JavaScript 展開運算子

展開運算子用三個點（...）表示。

很多文章將其稱作為擴充套件運算子，但是從它的功能上看稱作展開運算子更加合理。

此運算子是ES2015新增。

首先看一段程式碼例項，體會一下它的作用：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr = ["螞蟻部落", 6, "softwhy.com"];
console.log([1,2,...arr]);

程式碼執行效果截圖如下：

程式碼實現了陣列合並效果，使用展開運算子直接將arr陣列展開置於目標陣列。

三個點還可以用來表示剩餘引數，看起來和展開運算子一模一樣，其實還是有所區別的。

具體參閱JavaScript 剩餘運算子一章節。

一.展開運算子功能：

前面對展開運算子功能做了簡單的演示，下面做一下總結介紹。

（1）.在函式呼叫時，在引數中，將具有Iterator介面的物件展開。

（2）.在陣列建立時，將具有Iterator介面的物件展開。

（3）.建立物件直接量時，將物件直接量按照鍵值對方式展開（ES2018新增）。

關於Iterator介面可以參閱ES2015 Iterator遍歷器一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
func(...iterableObj)

函式呼叫時，將具有Iterator介面的物件展開。

[JavaScript] 純文字檢視 複製程式碼
[...iterableObj, "螞蟻部落", 6]

建立陣列時，將具有Iterator介面的物件展開。

[JavaScript] 純文字檢視 複製程式碼
let objClone = { ...obj };

建立物件直接量時，將物件直接量按照鍵值對方式展開，其實進行了鍵值對拷貝操作。

特別說明：陣列或者物件的拷貝都是淺拷貝。

二.程式碼例項：

展開運算子的出現，使得原來較為複雜的操作變得非常輕鬆，下面是一些常見的應用。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(webName, url, age) {
  return [webName, url, age];
} 
let args = ["螞蟻部落","www.softwhy.com",4];
console.log(func.apply(null, args));

上述程式碼中，函式可以接受三個引數，陣列具有三個元素。

如果想要將陣列的三個元素作為函式的引數，可以笨拙的將陣列三個元素挨個取出來寫入引數位置，也可以利用appy方法巧妙的實現。現在使用展開運算子，實現起來非常輕鬆：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(webName, url, age) {
  return [webName, url, age];
}
var args = ["螞蟻部落","www.softwhy.com",4];
console.log(func(...args));

程式碼執行效果截圖如下：

在函式呼叫是，使用展開運算子將陣列展開並作為函式的引數。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let oneArr = [0, 1, 2];
let twoArr = [3, 4, 5];
oneArr.push(...twoArr);
console.log(oneArr)

程式碼執行效果截圖如下：

上面演示的是展開運算子在函式呼叫時的應用。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let str = "螞蟻部落";
console.log([...str]);

程式碼執行效果截圖如下：

建立陣列的時候，通過展開運算子將字串展開，那麼字串的每一個字元構成一個陣列元素。

[JavaScript] 純文字檢視 複製程式碼
let nodeList = document.getElementsByTagName("div");
let array = [...nodeList];

元素物件集合是一個類陣列物件，具有Iterator介面。

那麼展開運算子可以將此元素物件集合展開，生成一個真正的陣列。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
console.log('x\uD83D\uDE80y'.length)
console.log([...'x\uD83D\uDE80y'].length)

上面的程式碼說明，展開運算子可以識別32位的Unicode字元。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let infor={
  target:"分享互助",
  url:"www.softwhy.com"
}
let obj={
  address:"青島市南區",
  age:4,
  ...infor
};
console.log(obj);

程式碼執行效果截圖如下：

建立物件直接量時，將物件直接量按照鍵值對方式展開，這是ES2018新增的功能。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let one = [[1], [2], [3]];
let two = [...one];
console.log(two.shift().shift());
console.log(two);

程式碼執行效果截圖如下：

由此可見，展開運算子采用的是淺拷貝，只遍歷一層。