ES6-11一些新特性

ECMAScript6

从ES6开始，每年发布一个版本，版本号比年份最后一位大1。ES6就是ES2015

1.let：声明变量

• 变量不能重复声明（var可以重复声明）
• 块级作用域，变量只在{}代码块里面有效。（全局作用域、函数作用域、块级作用域eval）
• 不存在变量提升（在声明前使用报错，var有变量提升）
• 虽然是块级作用域，但是不影响作用域链

//遍历并绑定事件
for(let i = 0;i<items.length;i++){
   
	items[i].onclick = function(){
   
	//修改当前元素的背景颜色
	// this.style.background = "pink";//这是ES5及以前的写法，因为var全局作用域
	items[i].style.background = "pink";//let是块级作用域，等于只在当前i的for循环中起	作用，出去就没了
	}
}

2.const：声明常量

• 必须要有初始值
• 一般常量使用大写（约定，建议但是不强制）
• 常量值不能修改
• 块级作用域（与let相同，写在全局就是全局，写在代码块里就是块级）
• 对于数组和对象的元素修改，不算做常量的修改，不会报错（修改地址才报错）

3.解构赋值：按照一定模式从数组和对象中提取值，对变量进行赋值

• 数组的解构：let[a,b,c] = [‘xx’,‘yy’,‘zz’]。则a就等于xx，b等于yy……
• 对象的解构：let {属性a, 属性b}=obj{属性a:xx, 属性b:xx}。则属性a获取到的是obj.属性a的值

4.模板字符串：引入声明字符串的方式

• 格式 ：let str = `我是字符串${string}`,内容可以直接写，需要变量用 ${}格式
• 内容中可以直接出现换行符（‘’、""声明的字符串这样会报错）
• 可以直接进行变量拼接，使用 ${}语法

5.对象简化写法：直接在大括号里写入变量和函数，作为对象的属性和方法

• const obj = {name} 这个name就是name:name的简写
• func(){}可以直接这样写函数，省略了function声明

6.箭头函数：()=>{}

• this是静态的，始终指向函数声明时所在作用于下的this的值（call和apply也不能改变指向）
• 不能作为构造实例化对象（let Person=(){}只能这样而 不可以 let Person=()=>{})
• 不能使用arguments变量（箭头函数用arguments获取参数列表报错）
• 两种简写方式：
  • 形参有且只有一个，省略小括号：name=>{}
  • 当代码体只有一条语句，省略花括号和return: (n)=> n*n（参数n也可以省略）

应用场景：适合与this无关的回调：定时器，数组的方法回调

不适合的场景：与this有关的回调：事件回调，对象的方法

let ad = document.getElementById("ad");//绑定事件
ad.addEventListener("click", function(){
    
    //这个为ES5写法：保存 this的值
    let _this = this;//定时器
	setTimeout(function(){
    
	//2s后修改背景颜色
	_this.style.background = 'pink';2000); 
    //ES6写法
    setTimeout(()=>{
    
	this.style.background = 'pink';2000); 
})

7.函数参数的初始值：允许给函数参数赋初始值

• 形参可设初始值，如果没有传值，默认使用初始值。具有默认值的参数，一般位置要靠后
• 默认值可以与解构赋值结合使用。参数可以解构使用，并且赋初值，如果没传使用初始值

8.rest参数：用于获取参数的实参，用来替代arguments

• 用法：function date(…args){}，返回的是一个传过来的参数的数组（…args放在形参位置）
• rest参数必须放到参数列表的最后。function date(a,b,…args){}

9.扩展运算符：…将数组转为逗号分隔的参数序列

• 写法[…数组名]
• 应用：
  • 数组合并。const a=[1,2];const b=[3,4];const c= [...b,...a] // c=[3,4,1,2]
  • 数组(浅)克隆。const a = ['a','b','c'] ; const b=[...a] //b=['a','b','c']
  • 伪数组转成数组。const divs = document.querySelectorAll('div');const divArr = [...divs]。这样就可以使用数组的方法了。

10.Symbol：新数据类型，表示独一无二的值

• Symbol的值是唯一的，用来解决命名冲突的问题
• Symbol的值不能与其他数据进行运算
• Symbol定义的对象属性不能使用for…in循环遍历，但是可以用Reflect.ownKeys获取对象所有键名

使用：创建：let s = Symbol(‘newSymbol’) //typeof s ===‘symbol’

唯一性：再创建一个let s1 = Symbol(‘newSymbol’) s1 === s 返回false，类似同名不同身份证

当使用s2 = Symbol.for(‘newone’) 方式创建s2,s3时 s2===s3 返回true

• 使用场景：给对象添加方法

let game = {
   xx:xx,methods:{
   }