ES6 & 集合

声明变量

1. let
   (1) 没有声明提前的概念
   (2) 不能在同一作用域重复声明同一个变量
   (3) 块级作用域{}

2. const
   (1) 变量声明不会提前
   (2) const不允许相同作用域内多次声明同一变量
   (3) 块级作用域
   (4) 声明后无法修改值

解构

1. 概念：从数组或对象中提取值，对变量进行赋值，这种方式叫做解构

2. 数组解构
   (1) 基本解构：[变量名,变量名] = 数组
     例：var [a,b,c] = [10,20,30];
   
   (2) …表示获取剩余参数
     例：var [a,…b] = [10,20,30]; //a=10,b=[20,30]
   
   (3) 解构失败
     ① 变量的长度大于数组的长度，出现解构失败,得到undefined
       例：var [a,b,c,d] = [10,20];
       console.log(c,d); //undefined undefined
   
     ②解构右侧不是数组，报错
       例：var [a] = 10;
       console.log(a); //报错：Uncaught TypeError: 10 is not iterable at
   
   (4) 指定默认值:当a解构失败的话，拿到默认值
       例：var [a=0,b=0,c=0] = [10,20];
       console.log( c ) // 0

3. 对象解构
   (1) 基本解构 {变量名,变量名} = 对象

   • 要求变量名与对象的属性名一致
   • 例：var obj = {name:“laotian”, age:38, gender:“男”};
     var {name,gender,age} = obj

   (2) 解构失败：变量名与属性名不一致，会出现解构失败，undefined
     例： var obj = {name:“laotian”, age:38, gender:“男”};
        var {name,sex,age} = obj;
        console.log(name,age,sex); //laotian 38 undefined

   (3) 如果变量名与属性名不相同，则必须写成以下格式才能取到值: {属性名：变量名}
     例：var {a:test} = {a:‘html’} //test=>html

   (4)指定默认值:当变量解构失败的话，拿到默认值
     例：var { name=“laoxie”, gender, age } ={ age:38, gender:“男” }
       Console.log(name,age,gender) //laoxie 38 男

备注：

• 不仅解构时可以传递默认值，基本数据类型作为形参时也可以传递默认值，也可以通 过…变量名获取剩余的参数。
• 解构只能用于数组和对象，如果解构不成功，变量会返回undefined，但如果对null和 undefined解构则会报错
• 解构同样适用于let和const

字符串扩展

1. 字符串方法
   (1) includes
     判断是否包含某个字符，返回布尔值
   
   (2) startsWith/endsWith
     是否以某一字符或某一字符串开头/结尾
   
   (3) repeat(n)
     得到字符串重复n次后的结果，n可以为小数，但不能为负数

2. 字符串模板

//使用反引号``表示,使用${变量}往字符串插入变量
//例：
var fruit = "apple";
console.log( `一天一个${fruit}，医生远离我` );

函数扩展

1. 箭头函数
   (1) 格式：标识符=>表达式，省略了function、return关键字、圆括号、花括号
      例：var sum = function(){ return 666; }   //传统写法(无参数)
      var sum = () => 666;           //用箭头函数写法(无参数)
   
   (2) 函数内只有一句return代码：省略了functoin、return、{}
     没有参数或存在多个参数
     只有一个参数，还可以省略()
     例：var test = function(x){return x+2;}   //传统函数写法(一个参数)
     var test = x=>x+2;           //使用箭头函数(一个参数)
   
   (3) 函数内有多句代码，不要省略{}、return
     箭头函数=>后面紧跟着的{}代表的是代码块
     使用了块语句的箭头函数不会自动返回值，你需要使用return语句将所需值返回
     例：var sum = (a,b) => { console.log(this);var c = a * b +1;return c+1; }
   
   (4) 箭头函数自身没有this
     箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域
   
   (5) 当使用箭头函数返回一个普通对象时，需要将对象包裹在小括号里
     例：var createPerson = ()=>{name:‘laoxie’,age:18}; // 这样写会报Bug！
     var createPerson = ()=>({name:‘laoxie’,age:18});
   
   (6) 默认参数
     例：var func2 = (x, …args) => { console.log(args) };
     func2(1,2,3); // 输出 [2, 3]

生成器函数Generators

1. function和函数名之间有一个*号
2. yield val;暂停代码的执行
3. return终止函数
4. next()：执行后得到一个对象，有两个属性如下

• value：暂停时返回的值(yield)
• done： 表示函数是否执行完毕

//例： 
function* show(){
  var a = 1;
  yield a;
  a *= 10;
  yield a;
  a -=7;
  yield a;
}
var fn = show(); ===>得到一个状态为suspended的对象{next()}//show{<suspended>}
fn.next() 		//{value: 1, done: false}
fn.next() 		//{value: 10, done: false}
fn.next() 		//{value: 3, done: false}
fn.next() 		//{value: undefined, done: true}

set集合

1. var s = new Set(); //创建一个set集合
   var s = newSet(arr);参数arr要可迭代，多是数组

2. Set集合，类似于数组，但是成员的值都是唯一的，可自动去重。
   去重的前提是两个值恒等于。
   利用set集合去重数组
   Array.from(set集合) 将set集合或者类数组转成数组

3. set的方法
   (1) add(value)：添加某个值，返回Set结构本身。
   (2) delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
   (3) has(value)：返回一个布尔值，表示Set集合中是否存在该值。
   (4) clear()：清除所有成员，没有返回值。

4. 遍历set集合 (item为set集合的每项元素，s是set集合名字)
   (1) forEach()
   (2) for(var item of s){item代表集合中的每一项值}（for…of方法）

对象的扩展

1. 对象的合并
   Object.assign(obj1,obj2) 将多个对象合并成obj1,并返回obj1

2. 对象的传递与复制
   (1) var obj2 = obj1;传递是地址，所以一旦改变其中一个对象的值，另外一个会受影响
   
   (2) 浅复制（对于引用类型，只拷贝地址）
      for…in 遍历对象中的键，传递给另外个对象
      var new = Object.assign({},obj);

//例：
var obj1 = {name:"meirenyu", age:100, hobby:["blue","cry"]}
var obj3 = Object.assign({},obj1);
//备注：复制obj1.hobby项时，复制的时数组["blue","cry"]的地址

   (3) 深复制：var new = JSON.parse(JSON.stringify(obj1))

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

3. 对象的简写
   (1) 属性直接写变量名：变量名作为属性名，变量值作为属性值。
   (2) 属性为[变量名],代表变量值为属性名
   (3) 方法简写:方法名(){}

//例：  
var fruit = "lemon";
var obj = {
    fruit,				//等同于：fruit : "lemon"
    [fruit] : 2, 		//等同于： lemon : 2
    show(){} 			//等同于：show : function(){}
}

4. map集合：它能让所有类型的数据作为键
   (1)创建map集合var map = new Map();
   
   (2)常用方法
   ① 设置set(key, value)
   ② 获取get(key)
   ③ has(key)
   ④ delete(key)
   ⑤ delete(key)
   
   (3)遍历方法
   ① keys() 获取所有键(类数组)，可以用Array.from()转成数组
   ② values() 获取所有值，可以用Array.from()转成数组
   ③ entries() 获取所有键值对，可以用Array.from()转成数组
   ④ for(var item of map){item存放map集合的每一项键值对，item为一个数组，item[0] 代表键，item[1]代表值}
   ⑤ 配合解构：获取for(var [key,val] of m){key代表map集合的每个键,val代表每个值}

symbol表示独一无二的值，一旦创建后就不可更改

1. symbol的创建var s1 = Symbol() （无参）

var s1 = Symbol();var s2 = Symbol(); s1 === s2 // false

2. 接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了标识和区分

var s1 = Symbol("foo");var s2 = Symbol("foo");s1 === s2 // false

3. symbol不可以与其他类型的值进行运算，会报错

4. Symbol.for() 第一次就是创建symbol,会先查找当前Symbol是否存在
   存在：则引用，不存在：则创建登记

   var s11 = Symbol.for('laoxie');		//创建一个Symbol
   var s12 = Symbol.for('laoxie');		//引用一个Symbol

5. Symbol的使用
   var attr = Symbol();
   var a = {[attr]: ‘Nani’;} 注意加方括号，否则回被当作普通属性

//例：    
var s1 = Symbol.for("lemon");
var s3 = Symbol.for("lemon");
var s2 = Symbol("laotian");
var obj = {
    [s1] : 100,
    [s3] :400,
    age : 17
}
obj[s1] = 50;
console.log(obj);

for…of方法

1. 这是最简洁、最直接的遍历数组元素的语法
2. for…of跟for…in的区别很明显，就是直接取值，而不再取下标了
3. 与forEach()不同的是，它可以正确响应break、continue和return语句

//例：
var arr = [10,12,18,30];
for (var value of arr) {
console.log(value);
}
//备注：只要有[迭代器Symbol(Symbol.iterator) ]就可以用for...of遍历
//Array、 DOM、 Set/Map集合、 String、 不支持普通对象