前端 ES6知识点总结

前端 ES6知识点总结

ES6

变量的解构赋值

• 数组的解构赋值：

  • 简单的数组解构：

  • let [a,b,c] = [1,2,3] //从数组中提取值，按照位置的对象关系对变量赋值。

  • 数组模式和赋值模式统一：

  • let [a,[b,c],d]=[1,[2,3],4];
    //简单的理解为等号左边和等号右边的形式要统一,如果等号两边形式不一样，很可能获得undefined或者直接报错
    

  • 取别名

let a = {
    "timestamp": "2020-04-14T03:31:18.807+0000",
    "status": 404,
    "error": "Not Found",
    "message": "No message available",
}

const {status : status1 } = a  //404

• 解构的默认值：

• let [foo = true] =[];
  console.log(foo); //控制台打印出true
  

• 【注】undefined 和 null 的区别

• let [a,b="xzt"]=['',undefined];
  console.log(a+b); //控制台显示“”
  //undefined相当于什么都没有，b是默认值。
  
  let [a,b="xzt"]=['xzt',null];
  console.log(a+b); //控制台显示“”
  //null相当于有值，但值为null。所以b并没有取默认值，而是解构成了null。
  

• 对象的解构赋值：

• let {foo,bar} = {foo:'xzt',bar:'an'};
  console.log(foo+bar); //控制台打印出了“xztan”
  

• 【注】：对象的解构与数组有一个重要的不同，数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

• 字符串解构

• const [a,b,c,d,e,f]="xztany";
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(d);
  console.log(e);
  console.log(f);
  

扩展运算符和rest运算符

• 对象扩展运算符（…）：

  • 当编写一个方法时，我们允许它传入的参数是不确定的

  • function xztany(...arg){
        console.log(arg[0]);
        console.log(arg[1]);
        console.log(arg[2]);
        console.log(arg[3]);
     
    }
    xztany(1,2,3);
    

• 扩展运算符的用处：

  • let arr1=['www','xztany','com'];
    let arr2=[...arr1];
    console.log(arr2);
    arr2.push('xzt');
    console.log(arr1);
    console.log(arr2);
    

• rest运算符

  • function xzt(first,...arg){
        console.log(arg.length);
    }
     
    xzt(0,1,2,3,4,5,6,7);
    

• 字符串查找

  • //ES5
    let xzt ='看懂'
    let a = '看懂不看懂'
    document.write(a.indexOf(xzt));//返回索引   0
    

  • //ES6
    let xzt ='看懂'
    let a = '看懂不看懂'
    document.write(a.includes(xzt));//返回索引   true
    //**判断开头是否存在： **
    a.startsWith(xzt);
    //判断结尾是否存在：
    a.endsWith(xzt);
    

• ** 复制字符串**

  • a.write('xzt|'.repeat(3));
    

• ** JSON数组格式转换 **

  • //标准的JSON数组格式
    let  json = {
        '0': 'js',
        '1': 'JS',
        '2': 'JJSS',
        length:3
    }
    Array.from(json)
    输出： ["js", "JS", "JJSS"]
    

• Array.of()方法

• let arr =Array.of(3,4,5,6);
  console.log(arr);
  [3, 4, 5, 6]
  
  
  
  

• find( )实例方法:

  • let arr=[1,2,3,4,5,6,7,8,9];
    console.log(arr.find(function(value,index,arr){
        return value > 5;
    }))
    //控制台输出了6，说明找到了符合条件的值，并进行返回了，如果找不到会显示undefined
    //只会返回当前满足条件的一个
    

• fill( )实例方法：

  • let arr=[0,1,2,3,4,5,6,7,8,9];
    arr.fill('js',2,5);
    console.log(arr);
    //fill()也是一个实例方法，它的作用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置
    

• 数组的遍历

• for…of循环：

  • 这种形式比ES5的for循环要简单而且高效。先来看一个最简单的for…of循环

  • let arr=['js ','JS1','JS2']
    for (let index of arr.keys()){
        console.log(index);
    }
    //返回索引
    
    for (let item of arr){
        console.log(item);
    }
    
    //返回内容
    
    for (let [index,val] of arr.entries()){
        console.log(index+':'+val);
    }
    //同时输出数组的内容和索引
    
    

• entries( )实例方法：

  • let arr=['js ','JS1','JS2']
    let list=arr.entries();
    console.log(list.next().value);
    console.log(list.next().value);
    console.log(list.next().value);
    //entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。
    

• forEach

  • let arr=['js ', ,, , , 'JS1','JS3']
    arr.forEach((val,index)=>console.log(val))
    //forEach循环的特点是会自动省略为空的数组元素，相当于直接给我们筛空了。当是有时候也会给我们帮倒忙。
    

• filter

  • let arr=[2,1,2,3,3]
     
    arr.filter(x=>x>2);
    console.log(arr)
    

• some

  • some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
    
    some() 方法会依次执行数组的每个元素：
    
        如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
        如果没有满足条件的元素，则返回false。
    
    注意： some() 不会对空数组进行检测。
    
    注意： some() 不会改变原始数组。
    

区分=== 和 is方法的区别是什么，看下面的代码输出结果。

console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

[注]：在这里告诉你一个小妙招，===为同值相等，is()为严格相等

• Object.assign( )合并对象

  • var a={a:'js'};
    var b={b:'JS'};
    var c={c:'web'};
     
    let d=Object.assign(a,b,c)
    console.log(d);
    

• SET 和 MAP 区别

  • set是一种关联式容器，其特性如下：

    • set以RBTree作为底层容器
    • 所得元素的只有key没有value，value就是key
    • 不允许出现键值重复
    • 所有的元素都会被自动排序
    • 不能通过迭代器来改变set的值，因为set的值就是键

    map和set一样是关联式容器，它们的底层容器都是红黑树，区别就在于map的值不作为键，键和值是分开的。它的特性如下：

    • map以RBTree作为底层容器
    • 所有元素都是键+值存在
    • 不允许键重复
    • 所有元素是通过键进行自动排序的
    • map的键是不能修改的，但是其键对应的值是可以修改的

  • //Set 对象类似于数组，且成员的值都是唯一的。
    const arr = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1];
    const set = new Set(); 
    arr.forEach(item => set.add(item)); 
    console.log(set); // 1, 2, 3, 4, 5 
    // 数组快速去重 console.log([...new Set(arr)]); //[1, 2, 3, 4, 5]
    
    

  • //Map 对象是键值对集合，和 JSON 对象类似，但是 key 不仅可以是字符串还可以是对象
    var map = new Map();
    var obj = { name: '小缘', age: 14 };
    map.set(obj, '小缘喵'); map.get(obj); 
    小缘喵 map.has(obj);
    true map.delete(obj) ;
    true map.has(obj); // false
    
    

• 用Proxy进行预处理

  • 钩子函数：当我们在操作一个对象或者方法时会有几种动作，比如：在运行函数前初始化一些数据，在改变对象值后做一些善后处理。这些都算钩子函数，Proxy的存在就可以让我们给函数加上这样的钩子函数，你也可以理解为在执行方法前预处理一些代码。 简单的理解为他是函数或者对象的生命周期。

• class 类的使用

  • 类的多方法声明，两个方法中间不要写逗号了，还有这里的this指类本身，还有要注意return 的用法。

  • 类的传参

    • 在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。

    • class Coder{
      constructor(a,b){
              this.a=a;
              this.b=b;
          }
          name(val){
              console.log(val);
              return val;
          }  
          
       //俩个方法之间不要打逗号
          add(){
              return this.a+this.b;
          }
      }
       
      let js=new Coder(1,2);
      console.log(js.add());