17、ES6

一、声明变量

（一）let: 声明变量

1.没有声明提前的概念

2.不能在同一作用域重复声明同一个变量

3.块级作用域{}

let a = 20;
function show(){
    let a = 20;
}
console.log(a)
报错：Identifier 'a' has already 
been declared 变量a已经被声明

案例：输出按钮索引值

//ES5方法
//相当于var i；
for(var i=0;i<btns.length;i++){
    btn[i].idx = i;
    btns[i].onclick = function(){
        setTimeout(function(){
            console.log(this.idx);
        }.bind(this),2000)
    }
}
//ES6方法：
for(let i=0;i<btns.length;i++){
    //相当于let i；
    btns[i].onclick = function(){
        setTimeout(function(){
            console.log(i);
        },2000)
    }
}
//考察知识点：
//1.变量的访问规则
//2.let的块级作用域{}

（二）const:声明常量

备注：const常用于引用第三方库的声明

1、变量声明不会提前

2、块级作用域

3、const不允许相同作用域内多次声明同一变量

4、声明后无法修改值

演示：(常量无法修改，所以有不成文规定，用大写字母表示)
const MY_NAME = 'laoxie';
// 报错：无法修改常量的值 ==> Assignment to constant variable
MY_NAME = 'LEMONE';
//演示：PI、Number内置的一些常量属性

二、解构

（一）概念

声明变量时，从数组和对象中提取值，对变量进行赋值，这种方式叫做解构

（二）、数组解构

1、基本解构：[变量名,变量名] = 数组

var[a,b,c] = [10,20,30];
console.log(a,b); //var a=10，b=20 ，c=30；

2、...表示获取剩余参数

var[a,...b] = [10,20,30]
console.log(a,b); //var a=10，b=[20,30]；

3、解构失败

（1）变量的长度大于数组的长度，出现解构失败,得到undefined

var[a,b,c,d] = [10,20,30]；
console.log(a,b,c,d);//d解构失败：数组arr中无对应索引值

（1）解构右侧不是数组，报错。

var [a] = 1；//a解构失败，对应的右边不是数组，无法解构

4.指定默认值:当变量解构失败的话，拿到默认值

（三）、对象解构

1、基本解构：{变量名1,变量名2} = 对象

*要求变量名与对象的属性名一致

var obj = {name:"lemon",age:18};
var {name,age} = obj; // var name="lemon",age=18；

2、解构失败，得到undefined

var {username,age} = obj;//username解构失败，变量必须与对象属性名相同，否则为undefined

3.如果变量名与属性名不相同，则必须写成以下格式才能取到值: {属性名:变量名} =对象

var {name:username,age} = obj; 
//声明的变量为username，解构obj中的name属性 
//相当于：var username="lemon",age=18;

4.指定默认值:当变量解构失败的话，拿到默认值

var {a=10} = {};//当a解构失败的话，拿到默认值

备注：不仅解构时可以传递默认值，基本数据类型作为形参时也可以传递默认值，也可以通过...变量名获取剩余的参数。

案例：字符串模板

备注：只需在最前面加反引号，其他的位置都可以不用，用$值链接得到的属性值

 var output = document.getElementById("output");
        var arr = [{
            id : '001', //item.id
            name : "laotian",
            age : 38,
            gender : "女",
            hobby : "健身教练"
        },{
            id : '002',
            name : "lemon",
            age : 17,
            gender : "女",
            hobby : "开车"
        },{
            id : '003',
            name : "mengzhu",
            age : 18,
            gender : "女",
            hobby : "瑜伽"
        }];
        output.innerHTML = arr.map(function(item){
            var {id,name,age,gender,hobby} = item;
            return `<li uid="${id}">
                        <h4>${name}</h4>
                        <p>年龄：${age}</p>
                        <p>性别：${gender}</p>
                        <p>爱好：${hobby}</p>
                    </li>`;
        }).join("");

三、字符串扩展

（一）字符串方法（了解）

1、includes

判断是否包含某个字符，返回布尔值

'html5'.includes('html');//true

2、startsWith/endsWith

是否以某一字符或某一字符串开头/结尾
let str='google';
str.startsWith('goo');  //true
str.endsWith('e');    //true

3、repeat(n)

得到字符串重复n次后的结果，n可以为小数，但不能为负数

（二）字符串模板（重点）

1、使用反引号``表示,使用${变量}往字符串插入变量（美观、方便）

2、格式：${变量|函数}

var fruit = "apple";
console.log(`一天一个${fruit}，医生远离我`);

四、函数扩展（重点）

（一）箭头函数

1、格式：标识符=>表达式

2、省略了function、return关键字、圆括号、花括号

3、函数内只有一句return代码，可省略{}及return。

​ *没有参数或存在多个参数

​ *只有一个参数，还可以省略()

var test = function(x){return x+2;}  // 箭头函数: var test = x=>x+2;

（2）零个参数用 () 表示

var sum = function(){return 10 + 10;}  //  箭头函数： var sum = () => 10+10;

4、函数内有多句代码，不要省略{}、return，用代码块括起来

* 箭头函数=>后面紧跟着的{}代表的是代码块
//ES6中的规则是，紧随箭头的{}被解析为块的开始，而不是对象的开始
​
 // ES5
​
btn.onclick = function (e) {
  e = e || window.event;
  var keCode = e.which || e.keyCode;
  console.log(keyCode);
};
​
// ES6
btn.onclick = e=>{
  e = e || window.event;
  var keyCode = e.which || e.keyCode;
  console.log(keyCode);
};

5、当使用箭头函数return值为一个普通对象时，需要将对象包裹在小括号里

//传统写法
var createPerson = function(){
    return {name:'laoxie',age:18};
}
// ES6
var createPerson = ()=>{name:'laoxie',age:18};   // 这样写会报Bug！
var createPerson = ()=>({name:'laoxie',age:18});

6、箭头函数自身没有this

箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域。

document.addEventListener("DOMContentLoaded", function(){
            var btn = document.querySelectorAll(".btn");
//ES5
     for(var i=0;i<btn.length;i++){
          btn[i].onclick = function(){
              setTimeout(function(){
                  console.log(this.value);
              }.bind(this), 1000)
          }
      }
      
//ES6
     for(var i=0;i<btn.length;i++){
         btn[i].onclick = function(){
             setTimeout(() => {
                 console.log(this.value);
​
             }, 1000)
         }
     }
})

（二）生成器函数

1、function* 函数名(){}：执行生成器函数会返回一个suspended的对象

2、 yield val; 暂停代码的执行

3、next():得到一个对象

4、return：终止函数

（1）value：暂停时返回的值（yield）

（2）done：表示函数是否执行完毕

function* sum(x){
    console.log(1);
    yield 50;
    console.log(2);
    yield 100;
    console.log(3);
    // return 150;
    console.log('end');
}
var res = sum();//得到一个状态为suspended的对象{next()}
// res.next();//得到一个对象：{value:xx,done:false}
console.log(res);

五、set集合

定义：

类似于数组，但是成员的值都是唯一的，可自动去重

生成set集合：var s = new Set()

（1）去重的前提是两个值恒等于
（2）利用set集合去重数组
    *Array.from(set集合)将set集合或者类数组转成数组

2、Array.from(items) 去重

var arr = [1, 2, 3, 4, 5, 5, 5, 5]；
let items = new Set(arr);
//去重后将set集合重新转成数组
arr = Array.from(items)；

（一）set的方法

1、add（value）==> 添加某个值

添加某个值，返回Set结构本身

案例： 
    var s = new Set();
    s.add("10");
    s.add(10);
    s.add({name:"lemon"});
    s.add({name:"lemon"});
    console.log(s);
备注：两个对象，健和值虽然一样，但是它们是不相等的，因为它们地址不一样

2、delete（value）==> 删除某个值

删除某个值，返回一个布尔值，表示删除是否成功。

3、has(value)：==>判断set值

返回一个布尔值，表示Set集合中是否存在该值。

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

（二）遍历set集合

1、forEach()

2、 for(var item of s){item代表集合中的每一项值}

例：
        var s = new Set();
        s.add("10");
        s.add(10);
        s.add({name:"lemon"});
        s.add({name:"lemon"});
        console.log(s);
遍历方法：
     ES5方法：   
         s.forEach(function(item){
             console.log(item);
         })
     ES6方法：
        for(var item of s){
            console.log(item);
        }
​

（三）for...of

1、这是最简洁、最直接的遍历数组元素的语法

2、for…of跟for-in的区别很明显，就是直接取值，而不再取下标了

3、与forEach()不同的是，它可以正确响应break、continue和return语句

var arr = [1,3,6];
for(var item of arr){
    if(item == 3){
         break;//循环语句、for...of
     }
     console.log(item);
}

只要有[迭代器Symbol(Symbol.iterator) ]就可以用for...of遍历

• Array

• DOM

• Set/Map集合

• String

• 不支持普通对象

六、对象的扩展（重点）

（一）对象合并方法

1、对象的合并 Object.assign(obj1,obj2)

将多个对象合并成obj1,并返回obj1

var obj1 = {a:1}；
var newObj1 = Object.assign(obj1,{b:2});
//1.合并对象到obj1,所以obj1 = {a:1,b:2}
//2.返回obj1，传递给newObj1，所以newObj1 = {a:1,b:2}

var newObj2 = Object.assign(obj1,{b:2},{b:4,c:3});
//若存在相同属性，后面的覆盖前面的。//newObj=obj1={a:1,b:4,c:3}

（二） 对象的传递与复制

1、var obj2 = obj1;传递是地址

所以一旦改变其中一个对象的值，另外一个会受影响

var obj = {
    name:"laoxie",
    hobby:['大保健','money']
}
1.对象的传递：
var newObj = obj; //此时修改obj的任意属性，也会同时影响newObj

2、浅复制（对于引用类型，只拷贝地址）

（1）for...in 遍历对象中的键，传递给另外个对象

（2）var new = Object.assign({},obj);

2.对象的复制
（1）for...in遍历复制

for(var key in obj){
    newObj2[key] = obj[key];
}

（2）利用assign（）

var newObj3 = Object.assign({},obj);

3、深复制

• 将引用数据类型转成基本数据类型进行传递

• 再转成引用数据类型

这是分开写法：

var str = JSON.stringify(obj1);
var obj3 = JSON.parse(str);

这是结合写法：

var new = JSON.parse(JSON.stringify(obj1))

（三）对象简写

ES6允许在对象之中直接写变量

1.属性直接写变量名：变量名作为属性名，变量值作为属性值。

var myName = 'laoxie';
var obj = {myName};//等效于var obj = {myName:'laoxie'}。变量名作为属性名，变量值作为属性值。

2.属性为[变量名],代表变量值为属性名

var obj = {
    [myName]:18 //等效于 laoxie:18
}

3. 方法简写:方法名(){}

var obj = {
    coding(){} //等效于 coding:function(){}
}

（四）Map集合：它能让所有类型的数据作为键

（一） 常用方法：

1、set(key, value) ==> 设置

2、get(key) ==> 获取

3、has(key) ==> 判断值

4、delete(key) ==> 删除某个键

5、 clear() ==> 清楚所有成员，没有返回值

let map = new Map(); 

//设置：
map.set('name','laoxie');
map.set(6,666);
// 把数组作为键
var arr = [10,20,30];
map.set(arr,'数组');

//获取：
map.get(arr); //[10,20,30]

（二） 遍历方法

1、keys() 获取所有键(类数组)，可以用Array.from()转成数组

2、values() 获取所有值，可以用Array.from()转成数组

3、entries() 获取所有键值对，可以用Array.from()转成数组

4、for(var item of map){item存放map集合的每一项键值对，item为一个数组，item[0]代表键，item[1]代表值}

 配合解构：获取for(var [key,val] of m){key代表map集合的每个键，val代表每个值}
 
 for(var item of map){
    console.log(item); //每个item得到的都是一个数组，索引0为键，索引1为值
} 
//解构写法：
for(var [key,value] of map){
    console.log(key,value);
}

七、Symbol数据类型

1、表示独一无二的值，一旦创建后就不可更改2、接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了标识和区分3、 symbol不可以与其他类型的值进行运算，会报错4、 Symbol.for() 第一次就是创建symbol,会先查找当前Symbol是否存在

// 存在：则引用，不存在：则创建登记
var s11 = Symbol.for('laoxie');//创建一个Symbol
var s12 = Symbol.for('laoxie');//引用一个Symbol
//注意：直接使用Symbol()创建的Symbol值的键不会被登记，所以也就获取不到


// 没有参数的情况
var s1 = Symbol();
var s2 = Symbol();
s1 === s2 // false

//Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了标识和区分，对调式非常有用
// 有参数的情况
var s1 = Symbol("foo");
var s2 = Symbol("foo");
s1 === s2 // false

//Symbol值不能与其他类型的值进行运算

（一）symbol的用途

1、给对象创建私有属性

2、给现有的对象添加属性，可能会产生命名冲突，Symbol的出现解决这个问题

var attr = Symbol();

// 第一种写法,不用加引号
var a = {};
a[attr] = 'Nani';

// 第二种写法（注意加方括号，否则回被当作普通属性）
var a = {
    [attr]: 'Nani';
};

// 以上写法都得到同样结果
a[attr] // "Nani"