JS 筆記 - ES6：展開與其餘參數

使用展開語法合併陣列

下方有兩個陣列資料：

1 2	let groupA = ["1", "2", "3"]; let groupB = ["4", "5"];

將兩個陣列資料合併的傳統寫法如下：

1 2	let groupAll = groupA.concat(groupB); console.log(groupAll); //["1", "2", "3", "4", "5"]

但比較不易閱讀且不夠直觀，ES6 後來發明了下方寫法：

1 2	let groupAll = [...groupA, ...groupB]; console.log(groupAll); //["1", "2", "3", "4", "5"]

... ary 就是展開陣列資料，且這樣的寫法就可以得知在陣列裡有兩筆陣列，且閱讀上也直觀。

淺複製觀念

下方有兩個陣列，因 groupB = groupA，所以兩個內容的值會相同，且陣列跟物件都是傳參考，不是傳值，所以如果在 groupB 新增一個值，groupA 裡面也會新增一個值，故在此特性下會新增相同的值在其中。

let groupA = ["1", "2", "3"];
let groupB = groupA;
groupB.push("4");
console.log(groupA); //["1", "2", "3", "4"]

但如果要使 groupA 不受影響的話可以這樣寫。

let groupA = ["1", "2", "3"];
let groupB = [...groupA];
groupB.push("4");
console.log(groupA); //["1", "2", "3"]

按照上方展開陣列資料的特性，展開陣列後是取出 groupA 資料再回傳到新陣列 […groupA] 內，所以就不會被 groupB 影響。

類陣列觀念

類陣列就是很像陣列格式，但其實不是陣列，其 proto 的方法也很少。一般在 function 中會傳入參數值做運算，得到預期的值。

因第二個 update 資料較多，透過 console.log 檢查會顯示一個陣列資料。

var origin = 1000;
function update(money) {
  let arg = arguments;
  console.log(arguments); //會得到一個陣列資料
}
update(0);
update(10, 1, 1, 2, 2, 100, 5, 10, 10, 500);

另一個觀念：

var origin = 1000;
function update(money) {
  let arg = [...arguments]; //轉成新的陣列
  // console.log(arguments);
  let sum = arg.reduce(function (accumulator, currentValue) {
    return accumulator + currentValue;
  }, 0);
  console.log("我有" + sum + "元"); //sum 的值得到相加後顯示
}

update(0); //我有 0 元
update(10, 1, 1, 2, 2, 100, 5, 10, 10, 500); // 我有 641 元

reduce 是陣列中的方法，在類陣列中是無法使用的，所以要透過展開將原本的 arguments 轉成一個新陣列，就會得到預期的結果。

其餘參數

一般時候，若在 function 內設定好參數，輸入參數會自動對應其位置，如下：

function more(a, b, c) {
  console.log(a, b, c); //100, 200, 300
}
more(100, 200, 300);

但有時候傳入的參數不確定有多少數量時，可以展開用其餘參數的方式抓取，變成陣列資料。

function more(...more) {
  console.log(more); // [100, 200, 300, 400, 500]
}
more(100, 200, 300, 400, 500);

倘若前面加入一個變數，會顯示變數內容，後面的參數會用其餘參數的方式顯示。

function more(name, ...more) {
  console.log(name, more); //阿忠 (5) [100, 200, 300, 400, 500]
}
more("阿忠", 100, 200, 300, 400, 500);