展開運算子(Spread Operator) & 其餘運算子(Rest Operator)


「展開運算子」與「其餘運算子」的模樣都是三個點(即「...」,),也都跟陣列有關,但其功能在不同時機正好完全相反。


展開運算子(Spread Operator)

用來把陣列中的元素一一取出,舉例如下:

let numbers = [1,-2,5,-8,9];

console.log(Math.max(numbers));         //NaN
console.log(Math.max(…numbers));        //9

使用 Math.max() 這類內建函式時,輸入的引數為數字,單純輸入陣列形式的參數會回傳 NaN

若以「展開運算子」將陣列展開,把裡面的元素一個一個取出,資料型別即變為數字、可直接套用 Math.max()

用展開運算子複製陣列

展開運算子可用來複製陣列,方法是做出一個空陣列,並把原陣列的元素一一取出、放進空陣列中,新陣列的操作不影響原陣列內容,舉例如下:

let numbers = [1,-2,5,-8,9];
let copyNumbers = […numbers];

copyNumbers.push(20);         //僅影響複製後新生成的陣列
console.log(numbers);         //[1,-2,5,-8,9]
console.log(copyNumbers);     //[1,-2,5,-8,9,20 ]

用展開運算子連接陣列

透過展開運算子將陣列中的元素取出後,就能把多個陣列中的元素一起放入新陣列,完成陣列合併,新陣列不影響原陣列內容,舉例如下:

let arr1 = ["a", "b", "c"];
let arr2 = ["d", "e"];
let newArr = [...arr1, ...arr2];

console.log(newArr);     //["a", "b", "c", "d", "e"]

連接陣列的另一種方式:Array.prototype.concat()

為陣列原型(Array.prototype)既有的方法,一樣可以用來合併陣列,新陣列不影響原陣列內容,舉例如下:

let arr1 = ["a", "b", "c"];
let arr2 = ["d", "e"];
let newArr = arr1.concat(arr2);

console.log(newArr);     //["a", "b", "c", "d", "e"]

其餘運算子(Rest Operator)

將一連串數字轉變為陣列,舉例如下:

function findBiggest(…arr){
    console.log(arr);               //被轉為陣列[5,-6,9,-13,30,-8]
    let biggest = -Infinity;
    for(let i=0; i<arr.length; i++){
        if(arr[i]>biggest){
            biggest = arr[i];
        }
    }
    console.log(biggest);            //30
}

findBiggest(5,-6,9,-13,30,-8);       //輸入的資料型別為數字

參考資料

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







你可能感興趣的文章

[Notes] Git How to Step by Step: windows

[Notes] Git How to Step by Step: windows

[Note] webpack5 problem: Environment Variable (.env)

[Note] webpack5 problem: Environment Variable (.env)

基礎 JavaScript

基礎 JavaScript






留言討論