Javascript ES6帶來很多方便且實用的新語法(其實ES6也不新的,但是IE就是不支援?),
很多網站都有很詳細介紹新語法,筆者本人也是在各大網站看了好多關於新語法的介紹,每次看完都會有一種感覺:哇!好方便喔,太厲害了......但是,要用在哪呢?真的要使用的時候反而想不到到底要用什麼方法去處理,所以在此會以使用情境作為分類。
本篇的介紹的例子都會以下列的範例做示範
let people = [
{
name: "哆啦A夢",
age: 10,
weight: 129,
height: 129,
favorite: "銅鑼燒",
isStudent: false
},
{
name: "葉大雄",
age: 11,
weight: 40,
height: 141,
favorite: "睡午覺",
isStudent: true
},
{
name: "靜香",
age: 11,
weight: 35,
height: 135,
favorite: "銅鑼燒",
isStudent: true
}
]
let people2 = [
{
name: "胖虎",
age: 12,
weight: 50,
height: 150,
favorite: "看漫畫",
isStudent: true
},
{
name: "小夫",
age: 11,
weight: 40,
height: 139,
favorite: "玩遙控模型",
isStudent: true
}
]
資料說明:這裡有兩群人,分別是哆啦A夢、大雄、靜香一群。胖虎和小夫一群。每個人分別都有:姓名、年齡、體重、身高、喜好、是否是學生等資料。
情境翻譯:我想知道這群人裡面,是不是所有人都是學生。至於學生是誰並不重要,我只要知道是(true
)或不是(false
)
// 是否有人是學生
let allStudents=people.every(e=>e.isStudent)
console.log('是不是所有人都是學生:',allStudents) // false 哆啦A夢不是
情境翻譯:我想知道這群人裡面,有沒有人是學生(至少有一個人是學生)。至於有幾個或是那個人是誰並不重要,我只要知道有(true
)或沒有(false
)
// 是否有人是學生
let isSomeoneStudent=people.some(e=>e.isStudent)
console.log('是否有人是學生:',isSomeoneStudent) // true 大雄和靜香是學生
情境翻譯:如果今天去遊樂園玩,某項遊樂設施有限制體重,限制一百公斤,超過的人不能乘坐。那麼我想要知道誰的體重小於一百公斤。我需要體重小於一百公斤的人的名單(哆啦A夢QQ)
let weightLessThanOneHundred=people.filter(e=>e.weight<100)
// 哆啦A夢大於100,不應該出現哆啦A夢
console.log('體重小於100的人:',weightLessThanOneHundred)
情境翻譯:如果今天有一個特殊的才藝比賽,要比賽睡午覺。因此我要找出喜歡睡午覺的人去參加比賽。但是因為名額只有一名,所以我要找出第一個符合條件的人
let isSomeLikeSleep=people.find(e=>e.favorite==='睡午覺')
// 大雄喜歡睡午覺
console.log('喜歡睡午覺的人:',isSomeLikeSleep)
但是同樣都是過濾條件後的結果,還是有使用情境上的差別的
可以依照使用情境不同的需求,使用不同的方法
情境翻譯:如果一年過去了,每個人都長大一歲了,現在要將每個人的年齡資料都加加一歲
let newAge=people.map(e=>{
e.age++
return e
})
console.log('增加一歲的年齡',newAge) //每個人的年寧都增加一歲
map的特點就是可以加工每一筆資料
ES6新增的其餘參數和展開運算子是非常方便的功能,使用方法非常簡單就是三個點點點(...)
情境說明:原本只有哆啦A夢、大雄、靜香三人。現在又來了新同學胖虎和小夫。因此我要加入新同學的資料,取得最新的學生名單
let allPeople=[...people1,...people2]
// 哆啦A夢、大雄、靜香、胖虎、小夫的合併資料
展開運算子可以將陣列展開,如果同時展開兩個陣列,就等於將兩個陣列合併的意思,也等同Javascript的 concat
方法。
情境說明:如果來了一個新同學-小衫,需要一份新的名單。但是不想要修改到舊的名單,這時候就可以使用其餘參數來拷貝陣列,避免修改到原本的資料
let newPerson=
{
name: "小衫",
age: 11,
weight: 41,
height: 142,
favorite: "睡午覺",
isStudent: true
};
let people3=[...people]
people3.push(newPerson)
console.log('拷貝過後的陣列')
console.log(people) // 哆啦A夢、大雄、靜香
console.log(people3) // 哆啦A夢、大雄、靜香、小衫
特別注意的是:這方法只能用在物件的淺拷貝,如果要使用深拷貝,就必須使用別的方法
延伸閱讀:
使用情境:假設今天要幫哆啦A夢報名吃銅鑼燒大賽,但是報名的時候不需要身高、體重等資料,那麼可以使用解構賦值的方法去剔除不需要的物件屬性
let student = {
name: "哆啦A夢",
age: 10,
weight: 129,
height: 129,
favorite: "銅鑼燒",
};
const { weight, height, ...data } = student;
console.log(data)
// { name: '哆啦A夢', age: 10, favorite: '銅鑼燒' }
以上是關於Javascript ES6 依照使用情境分門別類,介紹各個方法的使用時機。希望當遇到這些使用情境的時候,可以想起:對!就是這個方法。
今天的範例都會放在https://stackblitz.com/edit/typescript-4dy2zo
every-如果想要知道有沒有人是學生
some-如果想知道是不是所有人都是學生
這兩個標題好像寫反了,第一個感覺在說 some,第二個感覺在說 every ~
真的兩個寫相反了orz
感謝指正,謝謝!