Javascript——ES6( ECMAScript 6.0)语法

简介: Javascript——ES6( ECMAScript 6.0)语法

一、let/const与var的区别


var 会进行预解析,let/const不会

var可以声明两个重名的变量,let/const不能

var没有块级作用域,let/const有块级作用域


二、箭头函数


1.普通函数

//xxx.onclick=function(a=10,b=20){ }  可以为函数设置默认值,没传参数就用默认值
xxx.onclick=function(){ }
var xxx={fn:function(){} }
xxx.forEach(function(){})
setTimeout(function(){})
var xxx=function(){}


2.箭头函数

格式:把普通函数的function去掉,再在小括号后面加上j箭头符号(=>)

xxx.onclick=()=>{ }
var xxx={fn:()=>{} }
xxx.forEach(()=>{})
setTimeout(()=>{})
var xxx=()=>{}


三、结构赋值


1.以前数组

let arr=['hello','world']
let a=arr[0]
let b=arr[1]


2.解构赋值

let [a,b]=['hello','world']
console.log(a)
console.log(b)


四、解构赋值-解构对象(键值对)


1.以前获取对象

let obj={
name:"小明"
age:20
}
let name=obj.nam
let age=obj.nam


2.解构赋值

let obj={
name:"小明"
age:20
}
//定义两个变量name和age,并获取obj里的name和age的值
let{name,age}=obj //如同 let name=obj.nam ,let age=obj.nam
console.log(name,age)
//定义一变量a(为name取个别名a)
let{name:a}=obj


五、E6_模板字符串反引号使用


作用:

给变量赋值时可以换行

可以配合${ 变量 }来解析变量


//给变量赋值时可以换行
var a=`hello
world`
//输出也保持换行
console.log(a)
//可以配合${ 变量 }来解析变量
 var name="小明"
 var s=`他的名字是${name}`
 console.log(s)
//输出为:他的名字是小明


六、E6_展开运算符


格式: . . . 数组或 . . . 对象(键值对)

作用:把数组或键值对展开(把中括号和大括号去掉)


用途1:合并数组或键值对


//数组合并
var s1=[10,20]
var s2=[30,40]
var s3=[50,60,70]
var s=[...s1,...s2,...s3]
console.log(s)
//输出结果:[10,20,30,40,50,60,70]
//键值对合并
  var s1={name:"小明",age:12}
  var s2={sex:"男",hight:170}
  var s={...s1,...s2}
  console.log(s)
//结果:{name: '小明', age: 12, sex: '男', hight: 170}


用途2:给函数传值


//求数组里的最大值
var s=[2,4,5,7,20,4]
var max=Math.max(...s)//如同:max=Math.max(2,4,5,7,20,4)
//结果为:20


七、E6_类语法


格式:

class 类名{
constructor( 形参列表 ){
this.属性名=形参1
this.属性名=形参2
}
//直接写方法就行
方法名( ){ 方法体 }
//静态属性和方法,加一个static
static a=100
static hi( ){ 方法体 }
}


//E6的类
class  Person{
constructor(name,age){
this.name=name
this.age=age
  }   
    //方法
     sayHi(){ console.log("你好,世界!") }
    //静态属性和方法,加一个 static
    static a=100
    static to()function{ console.log("大家好") }
 }
//创建对象
var p1=new Person("小明",20)
 //执行方法
  p1.sayHi()
//执行静态属性和方法
Person.a
Person.to()
相关文章
|
22天前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
23 5
|
22天前
|
自然语言处理 JavaScript 前端开发
ECMAScript 6 的出现为 JavaScript 带来了许多新的特性和改进
这些只是ES6的一些主要特性,它们极大地增强了JavaScript的功能和表现力,使得JavaScript在大型应用开发、前端框架等领域能够更加高效地编写复杂的应用程序。
|
1月前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
20 3
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
JavaScript 前端开发 编译器
掌握现代化JavaScript:ECMAScript提案与特性
【10月更文挑战第13天】本文介绍了ECMAScript(ES)的最新提案与特性,包括可选链、空值合并运算符、类字段和顶层Await等。通过跟踪TC39提案、使用Babel或TypeScript、测试兼容性以及逐步迁移,开发者可以高效地采用这些新特性,简化代码、提高开发效率并增强应用功能。文章还提供了实战技巧,帮助开发者在现代Web开发中充分利用这些现代化的特性。
|
2月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
50 4
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
27 1
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
43 0
|
2月前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
20 1
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
31 0