ES6擴展運算符的理解與使用場景

更新時間：2021年09月07日 14:16:42 作者：Mr_Ma

擴展運算符（ spread ）是三個點（...）,它好比 rest 參數(shù)的逆運算,將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列,這篇文章主要給大家介紹了關于ES6擴展運算符的理解與使用場景的相關資料,需要的朋友可以參考下

1、替代apply方法，一般在函數(shù)調(diào)用時處理參數(shù)
2、剩余參數(shù)(rest運算符)，主要針對函數(shù)形參
3、數(shù)據(jù)連接、合并
4、數(shù)組和對象的拷貝
5、字符串轉(zhuǎn)數(shù)組
6、在函數(shù)調(diào)用時使用拓展運算符。
總結

擴展運算符，即...運算符是es6新增的一個語法，其主要作用是將數(shù)組或?qū)ο筮M行展開(這種說法也許不太準確)，希望通過下面的總結能讓你明白其使用方法。

個人的理解和總結使用場景如下：

1、替代apply方法，一般在函數(shù)調(diào)用時處理參數(shù)

假設我們的參數(shù)剛好是一個數(shù)組(單個參數(shù)這里就不討論了，逐個傳入即可)；

var args = [1, 2, 3];

然后我們需要返回這個參數(shù)數(shù)組中所有元素之和，那么ES5的做法如下：

function addFun(x, y, z) {
    return x + y + z;
}

var args = [1, 2, 3];

// 兩種調(diào)用方式
// 1，這種方式在參數(shù)較少的情況下還能應付，但是參數(shù)一旦過多就不靠譜了，
addFun(args[0], args[1], args[2])

// 2，用apply方法直接傳遞數(shù)組
addFun.apply(null, args);

apply方法能很好的解決參數(shù)過多的問題，但是前提是你需要清除apply和call方法的區(qū)別，估計很多童鞋很少用apply方法。

ES6使用擴展運算符就簡介多了：

function addFun(x, y, z) {
    return x + y + z;
}

var args = [1, 2, 3];

addFun(...args);

這里...運算符是將args數(shù)組拆開成單個元素進行計算。

2、剩余參數(shù)(rest運算符)，主要針對函數(shù)形參

剩余參數(shù)運算符與擴展運算符都是...，但是使用起來卻不一樣，可以簡單的理解為剩余運算符和擴展運算符是相反的，擴展運算符是把數(shù)組或?qū)ο筮M行展開，而剩余運算符是把多個元素‘合并'起來。

主要用于不定參數(shù)，可以理解為arguments的替代品，因此ES6開始不再使用arguments對象

let demoFun = function(...args) {
    for (let item of args) {
        console.log(item);
    }
}

demoFun(1, 2, 3) // 1, 2, 3

let demoFun = function(argA, ...args) {
    console.log(argA);
    console.log(args)
}

demoFun(1, 2, 3);
// 1
// [2, 3]

配合結構使用時，把他理解為整體為一個元素就行了

var [a, ...rest] = [1, 2, 3, 4];

// 這里把...rest整體看成一個元素
console.log(a) // 1
console.log(...rest) // [2, 3, 4]

3、數(shù)據(jù)連接、合并

連接數(shù)組，使用push將數(shù)組添加到另一個數(shù)組的尾部

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

// ES5處理方式
Array.prototype.push.apply(arr1, arr2);
console.log(arr1) // [1, 2, 3, 4, 5, 6]

// ES6處理方式
arr1.push(...arr2);
console.log(arr1) // [1, 2, 3, 4, 5, 6]

合并數(shù)組(代替concat方法)

var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

// ES5 合并
var es5Arr = arr1.concat(arr2);
console.log(es5Arr) // ['a', 'b', 'c', 'd', 'e', 'f']

// ES6 合并
var es6Arr = [...arr1, ...arr2];
console.log(es6Arr) // ['a', 'b', 'c', 'd', 'e', 'f']

4、數(shù)組和對象的拷貝

數(shù)組拷貝

var arr1 = [1, 2, 3];
var arr2 = [...arr1];

console.log(arr1 === arr2) // false

arr2.push(4); // 修改arr2，不會影響arr1的值

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]

對象也一樣

var obj1 = {
    a: 1,
    b: 2
};

var obj2 = {...obj1};

console.log(obj1 === obj2); // false

obj2.c = 3; // 修改obj2不會影響obj1
console.log(obj1); // {a: 1, b: 2}
console.log(obj2); // {a: 1, b: 2, c: 3}

注意：擴展運算符拷貝是淺拷貝，只對數(shù)組或?qū)ο蟮牡谝粚咏Y構起作用

5、字符串轉(zhuǎn)數(shù)組

var str = 'hello';

// ES5 處理方式
var es5Arr = str.split('');
console.log(es5Arr) // ["h", "e", "l", "l", "o"]

// ES6 處理方式
var es6Arr = [...str];
console.log(es6Arr) // ["h", "e", "l", "l", "o"]

6、在函數(shù)調(diào)用時使用拓展運算符。

以前如果我們想將數(shù)組元素迭代為函數(shù)參數(shù)使用，一般使用Function.prototype.apply的方式。

function myFunction(x, y, z) { 
  console.log(x+""+y+""+z);
} 
var args = [0, 1, 2]; 
myFunction.apply(null, args);

有了展開語法，我們可以這樣寫。

function myFunction(x, y, z) { 
  console.log(x+""+y+""+z); 
} 

var args = [0, 1, 2]; 
myFunction(...args);

提示: ...arr返回的并不是一個數(shù)組，而是各個數(shù)組的值。只有[...arr]才是一個數(shù)組，所以...arr可以用來對方法進行傳值

總結

...運算符的常用方法和場景如上，其他的使用方法就不做過多介紹了，比如map、偽數(shù)組轉(zhuǎn)化，有興趣的朋友可以自己查查資料，其實本質(zhì)上的用法都差不多，總結起來就是：三點放在形參或者等號左邊為rest運算符;放在實參或者等號右邊為spread運算符，或者說，放在被賦值一方為rest運算符，放在賦值一方為擴展運算符。

到此這篇關于ES6擴展運算符的理解與使用場景的文章就介紹到這了,更多相關ES6擴展運算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: