- A+
所属分类:Web前端
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()