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

擴展運算符,即…運算符是es6新增的一個語法,其主要作用是將數組或對象進行展開(這種說法也許不太準確),希望通過下面的總結能讓你明白其使用方法。

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

1、替代apply方法,一般在函數調用時處理參數

假設我們的參數剛好是一個數組(單個參數這裡就不討論瞭,逐個傳入即可);

var args = [1, 2, 3];

然後我們需要返回這個參數數組中所有元素之和,那麼ES5的做法如下:

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

var args = [1, 2, 3];

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

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

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

ES6使用擴展運算符就簡介多瞭:

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

var args = [1, 2, 3];

addFun(...args);

這裡…運算符是將args數組拆開成單個元素進行計算。

2、剩餘參數(rest運算符),主要針對函數形參

剩餘參數運算符與擴展運算符都是…,但是使用起來卻不一樣,可以簡單的理解為剩餘運算符和擴展運算符是相反的,擴展運算符是把數組或對象進行展開,而剩餘運算符是把多個元素‘合並’起來。

主要用於不定參數,可以理解為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、數據連接、合並

連接數組,使用push將數組添加到另一個數組的尾部

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]

合並數組(代替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、數組和對象的拷貝

數組拷貝

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}

註意:擴展運算符拷貝是淺拷貝,隻對數組或對象的第一層結構起作用

5、字符串轉數組

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、在函數調用時使用拓展運算符。

以前如果我們想將數組元素迭代為函數參數使用,一般使用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返回的並不是一個數組,而是各個數組的值。隻有[…arr]才是一個數組,所以…arr可以用來對方法進行傳值

總結

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

到此這篇關於ES6擴展運算符的理解與使用場景的文章就介紹到這瞭,更多相關ES6擴展運算符內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: