ES6新增语法及内置对象（声明变量、解构、箭头函数、剩余参数、数组、字符串以及集合）、ES7新特性

ES6简介

ES全称ECMAScript,它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。ES6(ECMAScript 2015)

ES6新增语法

声明变量

let和const 是ES6新增的声明变量的方式，用于补全ES5标准中var声明变量的不足：在JavaScript中用‘var’来声明变量会出现变量提升的情况（即通过"var"声明的变量系统都会把声明 隐式的升至顶部，从而变量在全局起作用）

作用域：
（1）ES5：全局作用域，函数作用域
（6）ES6：块级作用域：用于声明作用域之外无法访问的变量（使用let，const声明，通过let和const声明的常量会放在临时死区）

let

let是ES6中新增的用于声明变量的关键字。

注意：

（1）它声明的变量只在所处的块级中有效；

（2）不存在变量的提升

（3）let声明变量必须先声明后使用

如：

console.log(a)       //直接报错
let a=20

const

const用于声明常量，常量就是值（内存地址不能变的量）

注意：

（1）const具有块级作用域

if(true){
	const a=10
}
console.log(a)   //a is not defined

（2）声明常量时必须赋值，且常量赋值后，值不能修改

const PI=3.1515926;   //声明常量
PI=100;   // Assignment to constant variable. 声明常量以后值不能修改

const arr = [1, 2];
 arr[0] = 'a';
 arr[1] = 'b';
 console.log(arr);   // ['a', 'b']; 
 ary = ['a', 'b']; // Assignment to constant variable.

补充：const声明的对象属性值可以修改

const obj={
	name:'张三'，
	age:20
}
console.log(obj)
obj.name='李四'
console.log(obj)    //{name:'李四',age:20}

如果想要const声明的对象属性值不可以修改，则可以使用冻结对象

Object.freeze(obj)
obj.name='李四'
console.log(obj) 

但是冻结对象是不能多层冻结的，例如：

const obj={
	name:'张三',
	age:20,
	family:{
		father:{
			name:'李安',
			age:45
		}
	}
}
Object.freeze(obj)    //多层冻结不起作用
obj.family.father.age=50 
console.log(obj) //age改为50了

var

var用于声明全局变量，其作用域为该语句所在的函数内，且存在变量提升现象。

例如：

 console.log(a);  //输出   undefined
 const a=1;

三者区别

解构赋值

ES6允许从数组中提取值，按照对应位置，对变量进行赋值，对象也可以实现解构。

数组解构：

let [a,b,c]=[1,2,3]
console.log(a)    //1
console.log(b)     //2
console.log(c)     //3

对象解构：

let person = { name: 'xiaowen', age: 18 }; 
let {name: myName, age: myAge} = person; // myName myAge 是属性name,age的别名
console.log(myName); // 'xiaowen' 
console.log(myAge); // 18

箭头函数

箭头函数：使用箭头符号(=>)声明的函数

var 变量名 = ([参数])=> {
    函数体语句;
}

若函数体语句只有一条,可以省略’{}’

用法：

（1）无参

var 变量=()=>{语句}

var 变量=()=>语句    //函数体只有一条语句时

var 变量=function(){语句}

（2）一个参数

var 变量=(参数arg)=>{语句}

（3）多个参数

var 变量名=(x1,x2)=>{语句}

例如：

var f1=x=>x

//等价于

var f1=function(x){
	return x
}

console.log(f1(1))    //  1

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

例如：

let stu=['小吴','小张','小李']
let [s1,...s2]=stu

console.log(s1)   //小吴
console.log(s2)   //['小张'，'小李']

ES6内置对象

Array对象

1、扩展运算符：可以将数组做对象转换为用逗号分隔的参数序列

let arr=[1,2,3]
console.log(...arr)   //1 2 3
//...arr: 1,2,3

扩展运算符还可以合并数组

let arr1=[1,2,3]
let arr2=[4,5,6]
let arr3=[...arr1,...arr2]   //[1,2,3,4,5,6]

或者

arr1.push(...arr2)

2、构造函数方法

Array.from()：将类数组或可遍历对象转换成真正的数组。

此方法还可以接受第二个参数，作用类似于数组的map方法，用于对每个元素进行处理，并将处理后的值放入返回的数组。

let obj={
	'0':1,
	'1':2,
	'2':3,
	length:3   //转换后为数组长度
}

let arr1=Array.from(obj)   //[1,2,3]

let arr2=Array.from(obj,item=>item*2)  //[2,4,6]

3、实例方法
find()：用于找出第一个符合条件的数组成员（可以发现NaN）。

[1,3,-1,5].find(n=>n<0)  //-1

findIndex()：用于找出第一个符合条件的数组成员的位置，如果没有找到就返回-1。

let arr=[1,5,10]
let index=arr.findIndex((value,index)=>value>5)
console.log(index)   //  2

String对象

1、模板字符串

ES6新增的创建字符串的方式，使用反引号定义，使用模板字符串可以解析变量(使用‘$’引入变量或者调用函数)。

let name='小张'
let sayHello=`Hello,my name is ${name}.`；
//Hello,my name is 小张.

2、实例方法

（1）startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值

（2）endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

let str = 'Hello world!';
str.startsWith('Hello') // true 
str.endsWith('!')       // true

（3）includes()：表示某个字符串是否包含给定的串，返回布尔值

'abcde.includes(bc)   //true

（4）repeat()：将原字符串重复n次，返回一个新的字符串

'a'.repeat(3)      //'aaa'

Set集合

集合：无序，不重复的数据集合

1、基本方法：

（1）add(x)：添加值

（2）has(x)：判断x是否在集合中,返回布尔型

（3）delete(x)：删除集合中的元素

（4）clear()：清空集合

其他方法：

var s1=new Set([45,23,78,44,56])

console.log(s1)  //{45,23,78,44,56}
console.log(s1.keys())    //键名   通过迭代器（遍历器Iterator）遍历集合中的元素        {45,23,78,44,56} 
console.log(s1.values())   //Set集合没有键只有值（即键和值是相同的）  {45,23,78,44,56}
console.log(s1.entries())   //遍历键值对   {45,23,78,44,56}

2、集合的遍历

（1）[...集合名]

var s2=new Set(['red','blue','green'])
let arr=[...s2]      //遍历集合，将集合元素赋值给arr
console.log(arr)  // [ 'red', 'blue', 'green' ]

（2）map遍历

let set=new Set([1,2,3])
set=new Set([...set].map(x=>x*2))    //先遍历set集合，然后通过map遍历集合中的元素
console.log(set)   {2，4，6}

（3）filter过滤集合元素

let set1=new Set([1,2,3,4,5,6,7,8,9])
let set=new Set([...set1].filter(x => x%2==0))   //filter是过滤器,将集合中的偶数遍历出来
console.log(set)   //{2，4，6，8}

（4）forEach()遍历集合

集合与数组一样，也具有forEach()的遍历方法。

let set1=new Set([1,2,3])
set1.forEach(value => console.log(value))
//1
//2
//3

ES7

ES7即ECMAScript 2016。

ES7新特性

Array.prototype.includes()方法

在ES6中有String.prototype.includes()，可以查询给定字符串是否包含一个字符，而在ES7中，数组也可以用Array.prototype.includes()方法来判断一个数组是否包含一个指定的值。

[1,2,3,4].includes(1)   //true
[1,2,3,4].includes(1,1)  //false  //第一个参数是要查找的数，第二个参数是搜索的起始位置，默认是0.

[1, NaN, 2, 3].indexOf(NaN)        //-1  indexof无法判断NaN
[1, NaN, 2, 3].includes(NaN)       //true

求幂运算符**

ES7中引入了指数运算符，具有与Math.pow()等效的计算结果。

conosle.log(2**10)  //1024
console.log(Math.pow(2,10))   //1024