ES6新增语法和内置对象（let,const, Array/String/Set 扩展方法(解构赋值，箭头函数，剩余参数)）

1、let

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

　let 声明的变量只在所处于的块级有效。

　注意：使用 let 关键字声明的变量才具有块级作用域，var 关键字是不具备这个特点的。

　1. 防止循环变量变成全局变量。

　2. 不存在变量提升

　3. 暂时性死区

    if(true){
        let  a=10;
    }
    console.log(a);   //  a is not defined
　　//防止循环变量变成全局变量
　　for(var i=0;i<2;i++){
　　}
　　console.log(i);  // i=2(只有i=2时，不满足for循环条件，即执行下面语句)，如果 for循环中使用 let 那么输入i就会报错： i is not defined  
　　//let不存在变量提升
　　console.log(a);  //a is not defined
　　let a = 10;
　　//暂时性死区
　　var num = 10；
　　if(true){
　　　　console.log(num);
　　　　let num = 20; //只要在块级区域声明了变量let，那么这个块级区域就被let所绑定，所以在块级里面使用的 num 跟外面定义的全局变量 num 没有关系
　　}

2、const

　作用：声明常量，常量就是值（内存地址）不能变化的量

　1.const关键字

　　1.具有块级作用域

　　2. 声明常量必须赋初始值

　　3. 变量赋值后，值不能修改（两种情况）

　　　1. 基本数据类型：一旦赋值，值就不能修改（比如：数值，字符串）

　　　2. 复杂数据类型：不能赋值，但是可以修改 数据结构内部的值（比如：数组，对象）

   const PI = 3.14；
　　// PI = 100；会报错（声明常量时丢失了初始值）
　　const arr =[100,200];
　　arr[0]=123; //可以修改数组内元素的值，如果重新赋值是不允许的
　　arr=[1,2]; //会报错  因为 arr 重新赋值，改变了内存地址

3、let、const、var的区别

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

　2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。

　3. 使用 const 声明的常量，在后面出现的代码中不能再修改该常量的值。

　如果声明的值不需要变化，就用const，这样JavaScript 解析引擎不用时时监控值的变化，所以效率比 let 高。

　　

4、解构赋值（方便从数组和对象中提取值）

　解构：分解数据结构；赋值：指的是为变量赋值。

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

　如果变量没有对应的值，那么变量的值则是 undefined

　1. 数组解构：

　　数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量。

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

　2. 对象解构：

　　实际上是属性匹配，对象解构允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性的值赋值给变量。

　　写法一：（变量和对象中的属性名一致）

　　let {name,age,sex} = {name:"andy",age:18,sex:"女"}；
　　console.log(name);  // 'andy'
　　console.log(age);  //18

　　写法二：（变量名字和对象中属性名字不一致）

　　let{name:myName,age:myAge}={name:"andy",age:18};  //myName,myAge 属于别名
　　console.log(myName); // 'andy'
　　console.log(myAge);  //18

5、箭头函数

　ES6中新定义函数的方式

　1. 语法：

　　() => { }

　　　()：放置形参

　　　{ }：函数体

　　const fn = () => { }   // 通常把函数赋值给一个变量（常量），使用时，直接调用变量（常量）名

　2. 箭头函数中，如果函数体中只有一句代码，并且代码的执行结果就是函数的返回值，函数体大括号可以省略，return也可以省略。

　　const sum = (n1,n2) => n1+n2;
　　console.log(sum(1,2));  // 3

　3. 形参只有一个，可以省略小括号

　　function  fn( num ){
　　　　return num;
　　}
　　const  fn = num => num;

　4. 箭头函数不绑定 this ，箭头函数没有自己的 this 关键字，

　　如果在箭头函数中使用 this，this关键字将指向箭头函数定义作用域中的 this。

　　function fn（）{
　　　　console.log(this); //this指的是obj
　　　　return () =>{
　　　　　　console.log(this); // 因为箭头函数不绑定this，箭头函数中的this指向函数定义位置中的this，所以this指向obj
　　　　}
　　}
　　const obj ={name:'andy'};
　　const resFn = fn.call(obj);  // 使用call方法，把fn的this指向obj对象
　　resFn();  //调用的是fn中的匿名函数 

箭头函数面试题

var age = 100;
var obj = {
　age:20,
　say:() => {
　　　alert(this.age);   //100;
　}
}
obj.say();
关键点：obj是对象，没有作用域，say方法实际被定义在全局作用域下，say方法中的this指向是window，所以弹出就是window下面的age

6、剩余参数

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

　　function sum(first,...args){
　　　　console.log(first);  // 10
　　　　console.log(args);  // [20,30]
　　}
　　sum(10,20,30);

　2. 剩余参数和解构函数配合使用

　　let  [s1,...s2] = ['lisi','wangwu','zhangsan'];
　　console.log(s1);  //' lisi '
　　console.log(s2);  //['wangwu','zhangsan']

7、ES6的内置对象扩展

　7.1. Array 的扩展方法

　　扩展运算符（展开语法） ：可以将数组或者对象转为用逗号分隔的参数序列。（和剩余参数用法相反）

 　　let  ary = [1,2,3];
　　...ary  // 1,2,3
　　console.log(...ary);  //1  2  3      打印时，会把 1,2,3 以 逗号（，）作为分隔符输出，所以输出时是没有逗号的。

　2. 扩展运算符可以应用于合并数组

　　方法一

　　let  ary1 = [1,2,3];
　　let   ary2 = [4,5,6];
　　let   ary3 = [...ary1,...ary2];

　　方法二

　　ary1.push(...ary2);

　3. 将类（伪）数组或可遍历对象转换为真正的数组（方便调用数组中的方法）。

　　方式一

　　let  oDivs = document.getElementsByTagName('div');  // 获取 div 元素集合
　　oDivs = [...oDivs];  // 转换为数组序列，在数组序列外用 [ ] 包裹起来，就转换为真正的数组了

　　方式二

　　构造函数方法：Array.from( )

　　将类（伪）数组或可遍历对象转换为真正的数组

　　let  arrayLike = {
　　　'0'：'a',
　　　'1'：'b',
　　　'2'：'c'
　　};
　　let  arr2 = Array.form(arrayLike);  //['a','b','c']

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

　　let  arrayLike = {
　　　　'0'：1，
　　　　'1'：2
　　}
　　let  newAry = Array.from(arrLike,function(item){
　　　　return   item * 2；
　　})；
　　console.log(newAry)； // 2,4

　4. 实例方法：find()

　　用来找出第一个符合条件的数组成员，如果没有找到返回 undefined

var arr=[{
　　id:1,
　　name:'张三'
},{
　　id:2,
　　name:'李四'
}];
let target = arr.find(item => item.id==2);
console.log(target);

　5. 实例方法：findIndex()

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

let arg = [1,5,3,10,4,7];
let index = arg.findIndex(value => value>6);
console.log(index);  // 3

　6. 实例方法：includes()

　表示某个数组是否包含给定的值，返回布尔值。

var arr = [1,2,3];
arr.includes(2);//true
arr.includes(0);//false

　7.2. String 的扩展方法

　模板字符串（`）（tab键上面的按键）

　ES6新增的创建字符串的方式，使用反引号定义。

　语法：

let  name = `zhangsan`;

　2. 可以解析变量

let name ="zhangsan";
let sayHello =`hello,my name is ${name}`; //hello,my name is zhangsan 

　3. 可以换行

let result ={
　　name:'张三',
　　age:18,
　　sex:'男'
}
let html=`
<div>
　　<span>${result.name}</span>
　　<span>${result.age}</span>
　　<span>${result.sex}</sapn>
</div>
`;

　4. 可以调用函数

const fn =function(){
　　return '函数';
}
let greet = `模板  ${fn()}`; //在调用函数的位置会显示函数的返回值
console.log(greet);  //模板  函数

　5. 实例方法： startsWith() 和 endsWith()

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

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

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

　6. 实例方法：repeat()

　repeat 方法表示将原字符串重复 n 次，返回一个新字符串

'x'.repeat(3);  // xxx
'hello'.repeat(2); //hellohello

　7.3 Set 数据结构

　ES6 提供了新的数据结构 set，类似于数组，但是成员的值都是唯一的，没有重复的值。

　Set 本身就是一个构造函数，用来生成Set数据结构。

　语法：

const  set = new Set();

　2. Set 函数可以接受一个数组作为参数，用来初始化。

　size：实例对象中的属性，表示在当前数据结构中有多少值

const  set = new Set([1,2,3,4,5]);
console.log(set.size); //5

　3.利用 Set 数据结构做数组去重

const s1 = new Set([1,2,3,2,4,3,1,4]);  //set 会把数据重复的自动去除
console.log(s1.size); //4
// ...s1   1,2,3,4
const newS1=[...s1]; //[1,2,3,4]

　4. 实例方法

　　add(value)：添加某个值，返回 Set 结构本身

　　delete(value)：删除某个值，返回一个布尔值，表示删除是否成功

　　has(value)：返回一个布尔值，表示改制是否为Set的成员

　　clear()：清除所有成员，没有返回值

const  s =new Set();
s.add(1).add(2).add(3);  //向 set 结构中添加值
s.delete(2);  // 删除 set 结构中的 2 值
s.has(1);   // 表示 set 结构中是否有 1 这个值，返回布尔值
s.clear();  //清除 set 结构中的所有值

　5. 遍历

　Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

　语法：

s.forEach(val=>console.log(val));

　遍历set数据结构，从中取值

const s1 = new Set(['1','a','e','3']);
s1.forEach(val=>console.log(val)); //1 a e 3