技術標籤：JavaScriptjavascript

展開和剩餘語法在不定項函式使用，陣列物件拼接拷貝方面表現優異

【展開語法】

展開語法…用於展開陣列或者物件。（展開語法無法在IE瀏覽器中使用）

• 展開語法的基本用法

如果是陣列，展開成一項一項；在構造字面量物件時, 將物件表示式按key-value的方式展開。

1. 函式呼叫時，像apply一樣展開

function sum(x, y, z) { 
    return x + y + z; 
} 
const numbers = [1, 2, 3]; 
console.log(sum(...numbers));// 輸出: 6 
console.
 
log(sum.apply(null, numbers));// 輸出: 6 

2. 在構造陣列的時候使用

let list = [1, 2, 3] 
let b = [...list, ..."hello" ,4, '6'] 

3. 用於複製物件，或者屬性拷貝

// 複製 
let newobj = {...obj} 
// 增加 
let newobj = {id:'123',...obj} 

• 展開語法的實用例子

1. 展開語法在new中的使用
   使用 new 關鍵字來呼叫建構函式時，不能直接使用陣列+ apply 的方式（apply 執行的是呼叫 [[Call]] , 而不是構造 [[Construct]]）。當然, 有了展開語法, 將陣列展開為建構函式的引數就很簡單了：

var dateFields = [1970, 0, 1];
var d = new Date(...dateFields);

2. 使用展開語法進行陣列操作非常給力，可以直接替代push、concat、unshift等方法的使用

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 

3. 使用展開語法拷貝陣列和物件後不再是單純的地址指標複製

var arr = [1, 2, 3]; 
var arr2 = [...arr]; // like arr.slice() 
arr2.push(
 
4); // arr2 此時變成 [1, 2, 3, 4]// arr 不受影響 

但是呢，這個拷貝與Object.assign一樣，都只進行第一層的淺拷貝，如果下面的a是一個二維陣列，那第二維還是指標，這時候修改拷貝後的引數，還是會影響到原來的a`

var a = [[1], [2], [3]];
var b = [...a]; 
b.shift().shift(); // 1 

在陣列或函式引數中使用時，展開語法只能用於可迭代物件 （可以被for…of迴圈使用）

【剩餘語法】

剩餘語法準確來說跟展開語法相反，它被放在形參的最後一位，用來把多餘的輸入引數整合為一個數組

• 用在不定輸入引數的函式形參中

function a(a, b, ...theArgs) { 
    return theArgs.reduce((previous, current) => { 
        return previous + current; 
    }); 
} 
console.log(a(1,1,1,2,3)) // 6，前兩個1被賦值到形參a和b中 輸出: 6 

• 剩餘引數和 arguments物件的區別

1. 剩餘引數只包含那些沒有對應形參的實參，而 arguments 物件包含了傳給函式的所有實參。
2. arguments物件不是一個真正的陣列，而剩餘引數是真正的 Array例項，也就是說你能夠在它上面直接使用所有的陣列方法，比如 sort，map，forEach或pop。
3. arguments物件還有一些附加的屬性 （如callee屬性）。

• 剩餘語法的使用例項

1. 用於判斷引數數量

function fun1(...theArgs) {
  alert(theArgs.length);
}
fun1();  // 彈出 "0", 因為theArgs沒有元素
fun1(5); // 彈出 "1", 因為theArgs只有一個元素
fun1(5, 6, 7); // 彈出 "3", 因為theArgs有三個元素

2. 累乘

function multiply(multiplier, ...theArgs) {
  return theArgs.map(function (element) {
    return multiplier * element;
  });}

var arr = multiply(2, 1, 2, 3);
console.log(arr);  // [2, 4, 6]

3. 下例演示了你可以在剩餘引數上使用任意的陣列方法，而arguments物件不可以

function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}
alert(sortRestArgs(5,3,7,1)); // 彈出 1,3,5,7
function sortArguments() {
  var sortedArgs = arguments.sort();
  return sortedArgs; // 不會執行到這裡
}
alert(sortArguments(5,3,7,1)); // 丟擲TypeError異常:arguments.sort is not a function

(相關連結：MDN文件)