ES6擴充套件運算子的理解與使用場景

阿新 • • 發佈：2021-09-08

1、替代apply方法，一般在函式呼叫時處理引數

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

var args = [1,2,3];

然後我們需要返回這個引數陣列中所有元素之和，那麼ES5的做法如下：

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

var args = [1,3];

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

// 2，用apply方法直接傳遞陣列
addFun.apply(null,args);

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

ES6使用擴充套件運算子就簡介多了：

function addFun(x,3];

addFun(...args);

這裡...運算子是將args陣列拆開成單個元素進行計算。

2、剩餘引數(rest運算子)，主要針對函式形參

剩餘引數運算子與擴充套件運算子都是...，但是使用起來卻不一樣，可以簡單的理解為剩餘運算子和擴充套件運算子是相反的，擴充套件運算子是把陣列或物件進行展開，而剩餘運算子是把多個元素‘合併'起來。

主要用於不定引數，可以理解為arguments的替代品，因此ES6開始不再使用arguments物件

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

demoFun(1,3) // 1,3

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

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

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

http://www.cppcns.com

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

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

3、資料連線、合併

連線陣列，使用push將陣列新增到另一個數組的尾部

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

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

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

合併陣列(代替concat方法)

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

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

// ES6 合併
var es6Arr = [...arr1,...arr2];
console.log(es6Arr) // ['a','f']

4、陣列和物件的拷貝

陣列拷貝

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

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

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

console.log(arr1); // [1,3]
console.log(arr2); // [1,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","o"]

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

6、在函式呼叫時使用拓展運算子。

以前如果我們想將陣列元素迭代為函式引數使用，一般使用Function.prototype.apply的方式。

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

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

functionhttp://www.cppcns.com myFunction(x,z) { 
  console.log(x+""+y+""+z); 
} 

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

提示: ...arr返回www.cppcns.com的並不是一個數組，而是各個陣列的值。只有[...arr]才是一個數組，所以...arr可以用來對方法進行傳值

總結

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

到此這篇關於ES6擴充套件運算子的理解與使用場景的文章就介紹到這了,更多相關ES6擴充套件運算子內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！