iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
自我挑戰組

Be friend with JavaScript系列 第 13

Day 13 - Spread Operator & Rest Operator

在介紹 Spread Operator 和 Rest Operator 之前,先來介紹陣列相加的方法 - Concat。
如果陣列用加法的話會變成字串相加的形式。
例如:

let friends1 = ["Mike","John","Daniel"];
let friends2 = ["May","Lisa"];
console.log(friends1 + friends2); // Mike,John,DanielMay,Lisa
console.log(typeof (friends1 + friends2)); // string(用 "+" 來相加陣列會變成字串)

所以我們要用 concat 這個方法,才能讓陣列和陣列加起來形成一個新的陣列。
要特別注意的是 concat 是有先後順序的,例如下面的程式碼,如果想要讓 friends1 優先顯示在相加後的新的陣列中,則 friends1 就要放在 concat 前面(用 friends1 去 concat friends2),反之。

let friends = friends1.concat(friends2);
console.log(friends); // ["Mike","John","Daniel","May","Lisa"]
console.log(typeof friends); // object(別忘了陣列是物件之一)
friends = friends2.concat(friends1);
console.log(friends); // ["May","Lisa","Mike","John","Daniel"]

Spread operator

前面介紹過將陣列相加的方法 concat ,這邊要用另一種更簡單的方法 : Spread operator,用 ... 將陣列展開
例如:

let friends1 = ["Mike","John","Daniel"];
let friends2 = ["May","Lisa"];
let friends = [...friends1,...friends2];
console.log(friends); // ["Mike","John","Daniel","May","Lisa"]

Rest operators & Rest Parameters

如果我們想要隨意的在 function 裡面加入參數,可以使用這種方法,在定義的 function 參數前面加 ... ,執行 function 時加入的多個參數就會變成一筆陣列資料
例如:

function check(...numbers){
  console.log(numbers);
}
check(1,2,3,4,5,6,7,8);
// [1,2,3,4,5,6,7,8]

再舉個例子 - 找最大數的方式,原本的方式是在 function 的參數放入陣列,程式碼如下:

function findBiggest(arr) {
    if(arr.length === 0){
        return undefined;
    }
    let biggestNumber = -100000;
    for(let i = 0;i < arr.length;i++){
        if(arr[i] > biggestNumber){
            biggestNumber = arr[i];
        }
    }
  return biggestNumber;
}
console.log(findBiggest([3,67,43,95])); // 95

學會使用 ... 後我們把它拿來改成這種方式,在 function 內輸入多個參數讓它自己去比大小,而不必特別寫一個陣列儲存數字了(當然也可以用 Math.max() 這個方法)。

function findBiggest(...arr) {
    if(arr.length === 0){
        return undefined;
    }
    let biggestNumber = -100000;
    for(let i = 0;i < arr.length;i++){
        if(arr[i] > biggestNumber){
            biggestNumber = arr[i];
        }
    }
  return biggestNumber;
}
console.log(findBiggest(3,67,43,95,100)); // 100
console.log(Math.max(3,67,43,95,100)); // 100

上一篇
Day 12 - var 、let、const
下一篇
Day 14 - Arrow Function Expression & this
系列文
Be friend with JavaScript39
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言