2017年1月19日 星期四

[筆記] JavaScript ES6 中的展開運算子(spread operator)和其餘運算子(rest operator)


在 ES6 中,新增了一個 "..." 的關鍵字,這個關鍵字在不同時間點有不同的效果,有些時候它會被當作展開運算子(spread operator)使用,有些時候則是被當作其餘運算子(rest operator)使用。

其餘運算子(rest operator)


假設現在我想要寫一個函式,它可以把所有陣列的值相加後取平均,在過去如果我們要在函式中放入陣列的資料,一般我們會這樣寫:


let arr = [1,2,3,4,5];

let avg = function(arr){
  let sum = 0;
  for(let i = 0; i < arr.length; i++){
    sum += arr[i];
  }
  return sum / arr.length;
}

console.log(avg(arr));  //  3


但是在使用函式的時候,有些時候我們並不清楚我們會放入多少參數數目,假設我們把輸入的參數改成許多數值的話,最後會回傳 NaN 這樣的結果:


let avg = function(arr){
  let sum = 0;
  for(let i = 0; i < arr.length; i++){
    sum += arr[i];
  }
  return sum / arr.length;
}

console.log(avg(1,3,5,7,9));  // NaN


這時候就可以用到其餘運算字的概念(...),其餘運算字會幫助我們把輸入函式中的參數值變成陣列的形式,這時候我們就可以像這樣子撰寫程式:


let avg = function(...arr){
  console.log(arr)  // [1,3,5,7,9]
  let sum = 0;
  for(let i = 0; i < arr.length; i++){
    sum += arr[i];
  }
  return sum / arr.length;
}

console.log(avg(1,3,5,7,9));  // 5


我們可以看到在上面程式碼第二行的地方,從原本的 function(arr) 改成 function(...arr),透過在參數的前面加上 "..." 便可以把所輸入多個參數轉成陣列(我們可以從上面程式碼中把參數 arr 呼叫出來看)。

展開運算子(spread operator)


展開運算子和其餘運算子一樣都是 "..." ,但是在應用的效果上是完全相反的,其餘運算子是把許多的參數轉換成一個陣列,而展開運算子則是可以把陣列中的元素取出

假設我們想用 Math.max( ) 這個函式來找出最大值,但是我們輸入的參數卻是陣列:


let number = [1,2,3,4,5];

console.log(Math.max(number));  //  NaN


這時候因為帶入的參數是陣列的關係,所以我們會得到 NaN 的結果。但如果我們能夠適時的應用展開運算子,我們就可以把這個陣列展開成許多數值:


let number = [1,2,3,4,5];

console.log(Math.max(...number));  //  5

console.log(...number);  // 1,2,3,4,5


這時候我們在陣列的前面加上 "..." ,它就會把陣列從 [1,2,3,4,5] 轉換成 1,2,3,4,5,如此就可以正確的取得最大值。



Share:

0 意見:

張貼留言