扩展运算符的应用

深碍√TFBOYSˉ_ 2022-03-18 02:30 198阅读 0赞

扩展运算符是三个点（...），主要用于展开数组，将一个数组转为参数序列。下面是扩展运算符的应用情况;

### 1.　代替数组的apply方法： ###

求数组最大元素问题：

（１）用es5中的apply方法将数组转为参数序列，然后用Math.max()求数组中的最大元素：

function f(x,y,z){
        console.log(Math.max(x,y,z));
    }
    var args = [1,3,2];
    f.apply(null,args);
    
    //下面语句或许更简洁一点
    Math.max.apply(null,[3,4,1]);

（２）用es6中的扩展运算符将数组转为参数序列，然后用Math.max()求数组中的最大元素：

function f(x,y,z){
        console.log(Math.max(x,y,z));
    }
    var args = [1,3,2];
    f(...args);
    
    //下面语句或许更简洁一点
    Math.max(...[54,2,1]);

将一个数组追加到另一个数组尾部问题：

（３）通过es5的push()将一个数组追加到另一个数组尾部：

var arr1 = ["a","b"];
    var arr2 = ["c","d"];
    var arr3 = Array.prototype.push.apply(arr1,arr2);
    console.log(arr3);

（４）通过es6的扩展运算符将一个数组追加到另一个数组尾部：

var arr1 = ["a","b"];
        var arr2 = ["c","d"];
        var arr3 = arr1.push(...arr2);
        console.log(arr3);

### ２．合并数组： ###

（１）用es5的concat()来实现数组的合并。

var arr1 = ["a","b"];
    var arr2 = ["c","d"];
    var arr3 = ["e"];
    var arr4 = arr1.concat(arr2,arr3);
    console.log(arr4);//[ 'a', 'b', 'c', 'd', 'e' ]

（２）用es6的扩展运算符来实现数组的合并。

var arr1 = ["a","b"];
    var arr2 = ["c","d"];
    var arr3 = ["e"];
    var arr4 = [...arr1,...arr2,...arr3];
    console.log(arr4);//[ 'a', 'b', 'c', 'd', 'e' ]

### ３．与解构赋值结合使用： ###

const [head,middle,...tail] = [1,2,3,4,5];
    //head = 1;middle = 2;tail = [3,4,5];
    
    const [head,...tail] = [];
    //head = undefined;tail = [];
    
    const [head,...tail] = [3];
    //head = 3;tail = [];

### ４．将字符串转为数组： ###

var arr = [..."hello"];
    console.log(arr);
    // [ 'h', 'e', 'l', 'l', 'o' ]

（１）JavaScript会将32位的Unicode字符识别为２个字符，采用扩展运算符会消除这个问题。

'x\uD83D\uDE80y'.length;//4
    [...'x\uD83D\uDE80y'].length;//3

（２）涉及操作32位字符的函数的规范写法：

function getLength(str){
        return [...str].length;
    }
    getLength('x\uD83D\uDE80y');//3