美文网首页技术文档FE
ES6 扩展运算符 三个点(...)

ES6 扩展运算符 三个点(...)

作者: ten5743 | 来源:发表于2017-04-11 17:32 被阅读4535次

    它是什么

    es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形。因为typeScript是es6的超集,所以typeScript也支持扩展运算符

    用在哪儿

    可变参数个数的函数调用

    function push(array, ...items) {  
      array.push(...items);  
    }  
    
    function add(...vals){
      let sum=0;
      for(let i=0;i<vals.length;i++){
        sum+=vals[i];
      }
      return sum;
    }
    
    let arr = [1,2,3,4,5,6];
    let sum = add(...arr);
    console.log(sum);  //21
    

    更便捷的数组合并

    let arr1 = [1,2];
    let arr2 = [5,6];
    let newArr = [20];
    //es5 旧写法
    newArr = newArr.concat(arr1).concat(arr2); //[20,1,2,5,6]
    console.log(newArr);
    //es6 使用扩展运算符
    newArr = [20,...arr1,...arr2];  //[20,1,2,5,6]
    console.log(newArr);
    
    

    替代es5的apply方法

    // ES5 的写法  
    function f(x, y, z) {  
    // ...  
    }  
    var args = [0, 1, 2];  
    f.apply(null, args);  
    // ES6 的写法  
    function f(x, y, z) {  
    // ...  
    }  
    var args = [0, 1, 2];  
    f(...args);  
    

    求最大值Math.max()

    // ES5 的写法  
    Math.max.apply(null, [14, 3, 77])  
    // ES6 的写法  
    Math.max(...[14, 3, 77])  
    //  等同于  
    Math.max(14, 3, 77);  
    

    通过push函数,将一个数组添加到另一个数组的尾部

    // ES5 的写法  
    var arr1 = [0, 1, 2];  
    var arr2 = [3, 4, 5];  
    Array.prototype.push.apply(arr1, arr2);  
    // ES6 的写法  
    var arr1 = [0, 1, 2];  
    var arr2 = [3, 4, 5];  
    arr1.push(...arr2);  
    

    新建Date类型

    // ES5  
    new (Date.bind.apply(Date, [null, 2015, 1, 1]))  
    // ES6  
    new Date(...[2015, 1, 1]);  
    

    与解构赋值结合,生成新数组

    // ES5  
    a = list[0], rest = list.slice(1)  
    // ES6  
    [a, ...rest] = list 
    下面是另外一些例子。  
    const [first, ...rest] = [1, 2, 3, 4, 5];  
    first // 1  
    rest // [2, 3, 4, 5]  
    const [first, ...rest] = [];  
    first // undefined  
    rest // []:  
    const [first, ...rest] = ["foo"];  
    first // "foo"  
    rest // [] 
    

    将字符串转为真正的数组

    [...'hello']  
    // [ "h", "e", "l", "l", "o" ]  
    

    将实现了 Iterator 接口的对象转为数组

    var nodeList = document.querySelectorAll('div');  
    var array = [...nodeList];  
    

    end 2017-02-17 14:46:14
    博客原文地址

    相关文章

      网友评论

        本文标题:ES6 扩展运算符 三个点(...)

        本文链接:https://www.haomeiwen.com/subject/rkeuattx.html