ES6特性·总

Posted 2020-10-29 莫非王臣

此文系学习ES6后的自我总结，若有错误或者建议可留言告之，不胜感激

更多标准请参考阮一峰大神写的es6入门 => http://es6.ruanyifeng.com/

let&const

console.log(a); //error
let a=‘xx‘;

• 变量不会提升
• a具有块级作用域
• 不能通过window.a变量进行访问
• 使用let的循环中每次的变量都是新生成的 如：for(let a=0;a<len;a++)
• 不管是引用类型还是数值类型都可以改变

const a=‘xx‘,b={name:‘xx‘};

• 变量不会提升
• a为数值类型，不能够重新赋值
• b为引用类型，可以改变对象里边的属性值 如b.name=‘xxx‘ 但无法重写 如b={age:18}会引起error

 

Map&Set

let s=new Set([2,1,3,5,4]);

　s.size // 5  

　s.has(1) // true  

　s.delete(2);  //{1,3,5,4}

　s.has(2) // false  

s.add(2).add(1) //{1,3,5,4,2}

• set类似于集合 元素有序(按添加的顺序)且唯一 key与value相同 由此可以引出两种数组去重方法 ps:两种方式都会改变s

  var s=new Set([2,1,3,3,1,2,4]);
  [...s] //[2,1,3,4]
  Array.from(s) //[2,1,3,4]

  　　

• 可以链式调用 如上方代码所示s.add(2).add(1)
• 使用for...of & for...in的遍历结果是相同的 不过最好还是使用forEach遍历
• 可以使用filter和map方法

  let set = new Set([1, 2, 3, 4, 5]);  
  set = new Set([...set].map(x => x * 2));  //{2,4,6,8,10}
  set = new Set([...set].filter(x => (x % 2) == 0)); //{2,4}

• 可以实现集合的操作 如并集、交集 

  let a = new Set([1, 2, 3]);  
  let b = new Set([4, 3, 2]);  
    
  // 并集  
  let union = new Set([...a, ...b]);  
  // Set {1, 2, 3, 4}  
    
  // 交集  
  let intersect = new Set([...a].filter(x => b.has(x)));  
  // set {2, 3}  
    
  // 差集  
  let difference = new Set([...a].filter(x => !b.has(x)));  
  // Set {1}  

   

 

let m=new Map([[‘age‘,18],[‘sex‘,‘male‘]]);

  m.size // 2  

  m.has(‘sex‘) // true  

  m.get(‘sex‘) // "male"  

• map类似于哈斯表 是键值对的集合 遍历顺序即为插入的顺序
• map内部原理

  let map = new Map();   
  array.forEach(([key, value]) => map.set(key, value)); 

• map的key是严格匹配的 除NaN外所有 如false、‘false‘ 视为不同键值

  let map = new Map();  
    
  map.set(-0, 1);  
  map.get(+0) // 1 
    
  map.set(true, 1);  
  map.set(‘true‘, 2);  
  map.get(true) // 1  
    
  map.set(NaN, 1);  
  map.get(NaN) // 1 

Map&Set都有四个遍历属性：

1. keys()：返回key的遍历器

2. values()：返value的遍历器

3. entries()：返回所有元素的遍历器

4. forEach()：遍历所有元素

let map=new Map([[‘name‘:‘xx‘],[‘age‘:18],[‘sex‘:‘male‘]])
[...map.keys()]  // [‘name‘, ‘age‘, ‘sex‘]    
[...map.values()]  // [‘xx‘, 18, ‘male‘]  
[...map.entries()]  // [[‘name‘:‘xx‘],[‘age‘:18],[‘sex‘:‘male‘]]   
[...map]  // [[‘name‘:‘xx‘],[‘age‘:18],[‘sex‘:‘male‘]]

  set同上

 

箭头函数

• this的指向是定义时所在的对象 而不是使用时所在的对象
• 不能用作构造函数 即不能使用new 否则error
• 不能使用arguments

 

rest参数&扩展运算符&解构赋值

1. rest参数 用扩展运算符接收函数的多余参数，组成一个数组，放在形参的最后，形式如下：

   function foo(a, b, ...args) {
       // TODO
   }

   • rest参数只包括那些没有给出名称的参数，arguments包含所有参数；
   • arguments对象不是真正的array，而rest参数是Array的实例，可以直接应用sort, map, forEach, pop等方法；
   • arguments对象拥有一些自己额外的功能。

2. 扩展运算符 将可遍历对象的每一项都展开表示

   console.log(...[1, 2, 3])  
   // 1 2 3  
   console.log(1, ...[2, 3, 4], 5)  
   // 1 2 3 4 5  

3. 解构赋值 更加方便的声明变量

   let node = {
       type: "Identifier",
       name: "foo"
   };
   let { type, name } = node;
   
   cosnt[a, b, c, d, e] = ‘hello‘;
   a // h
   b // e
   c // l
   d // l
   e // o
   
   console.log(type); // "Identifier"
   console.log(name); // "foo"
   

    

    

    

模板

1. 模板字符串 使用${变量名} 来拼接字符串 功能上类似于vue的{{}}

   const word = ‘world‘;
   console.log(`hello ${word}`); //hello word

2. 模板语法 使用反引号 即键盘上的波浪号

   document.body.innerhtml=`
   <select>
       <option>语文</option>
       <option>数学</option>
       <option>英语</option>
   </select>`