美文网首页
es6 扩展运算符 三个点(...)

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

作者: sdcV | 来源:发表于2017-07-28 16:48 被阅读43次
    1. 扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
    console.log(...[1, 2, 3])  // 1 2 3  
    console.log(1, ...[2, 3, 4], 5)  // 1 2 3 4 5  
    [...document.querySelectorAll('div')]   // [<div>, <div>, <div>] 
    
    2. 用于函数调用
    function add(x, y) {  
        return x + y;  
    }  
    var numbers = [4, 38];  
    add(...numbers) // 42 
    
    3. 替代数组的 apply 方法
    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); 
    
    4.合并数组
    var arr1 = ['a', 'b'];  
    var arr2 = ['c'];  
    var arr3 = ['d', 'e'];  
    // ES5 的合并数组  
    arr1.concat(arr2, arr3);  
    // [ 'a', 'b', 'c', 'd', 'e' ]  
    // ES6 的合并数组  
    [...arr1, ...arr2, ...arr3]  
    // [ 'a', 'b', 'c', 'd', 'e' ]  
    
    5. 与解构赋值结合
    const [first, ...rest] = [1, 2, 3, 4, 5];  
    first // 1  
    rest // [2, 3, 4, 5]  
    

    如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

    const [...butLast, last] = [1, 2, 3, 4, 5];  //  报错  
    
    6. 类数组转为数组
    var nodeList = document.querySelectorAll('div');  
    var array = [...nodeList]; 
    

    相关文章

      网友评论

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

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