iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
3
Modern Web

透過 ESLint 練習 JavaScript ES6系列 第 9

Day09【ES6 小筆記】展開運算子 - 基礎使用範例(Spread operator)

展開運算子 - 基礎使用範例(Spread operator)

上一篇的剩餘參數,是把很多的參數整合成一個陣列,而展開運算子,則是把陣列裡面的值取出,並拆解成一個一個的獨立參數,使用方式一樣都是 ...,以下來看看使用情境&特性ㄅ~


- 基本用法:陣列/字串拆解

用在陣列會把每個值拆出來,並用逗號隔開,如果用在字串的話,也會把每個字符拆開。

//陣列
let week = [1,2,3,4,5,6,7];
console.log(...week);  // 1,2,3,4,5,6,7

//字串
let str = 'IAmSoCute';
console.log(...str);  // "I","A","m","S","o","C","u","t","e"

- 可以用來複製陣列

以映萱的減肥餐為例,假如明天的菜單要跟今天一樣,就可以這樣寫:

let today = ['沙拉','水煮雞胸'];
let tomorrow = [...today];
console.log(tomorrow); // ['沙拉','水煮雞胸']

- 可以用來組合兩個陣列

在過去我們如果要把兩個陣列組合成一個陣列時,會使用concat語法。
假如映萱要整理今天中午跟晚上的減肥菜單總共吃了哪些食物,在過去就會這樣寫:

let dinner = ['雞胸肉', '沙拉'];
let lunch = ['大陸妹','水煮蛋','和風醬'];
let todayFood = dinner.concat(lunch);

console.log(todayFood); // ["雞胸肉", "沙拉", "大陸妹", "水煮蛋", "和風醬"];

而使用展開運算子的語法,可以很輕易的連結兩個陣列,像這樣:

let dinner = ['雞胸肉', '沙拉'];
let lunch = ['大陸妹','水煮蛋','和風醬'];
let todayFood = [...dinner, ...lunch];

console.log(todayFood); // ["雞胸肉", "沙拉", "大陸妹", "水煮蛋", "和風醬"];

- 把陣列傳入函式做運算

我們可以把陣列的值展開,傳入函數的參數中做運算。
假如映萱想要計算今天的減肥餐總共花了多少錢,就可以這樣寫:

function count(breakfast, lunch, dinner) {
  return breakfast + lunch + dinner;
}
var price = [10, 50, 20];

console.log(count(...price)); // 80

以上就是展開運算子的運用啦~希望映萱有幫助大家理解使用方法囉!


參考文章
從ES6開始的JavaScript學習生活
ES6-展開運算子(Spread Operator)、其餘參數(Rest Operator)

ESLint airbnb 建議撰寫規則
4.3 使用陣列的擴展運算子 ... 來複製陣列。


上一篇
Day08【ES6 小筆記】剩餘參數 - 基礎使用範例(Rest parameter)
下一篇
Day10【ES6 小筆記】物件的解構賦值-以一間好吃的餐廳為例(Object Destructuring)
系列文
透過 ESLint 練習 JavaScript ES630

1 則留言

0

附註一下,spread operator複製陣列是shallow copy(value一樣,實際上reference不同)。

我要留言

立即登入留言