DAY3-常見的Javascript使用技巧與情境

12th鐵人賽 javascript es6

tso1158687

2020-09-18 22:53:30

936 瀏覽

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夢、大雄、靜香一群。胖虎和小夫一群。每個人分別都有：姓名、年齡、體重、身高、喜好、是否是學生等資料。

every-如果想知道是不是所有人都是學生

情境翻譯：我想知道這群人裡面，是不是所有人都是學生。至於學生是誰並不重要，我只要知道是(true)或不是(false)

// 是否有人是學生
let allStudents=people.every(e=>e.isStudent)
console.log('是不是所有人都是學生:',allStudents) // false 哆啦A夢不是

some-如果想要知道有沒有人是學生

情境翻譯：我想知道這群人裡面，有沒有人是學生（至少有一個人是學生）。至於有幾個或是那個人是誰並不重要，我只要知道有(true)或沒有(false)

// 是否有人是學生
let isSomeoneStudent=people.some(e=>e.isStudent) 
console.log('是否有人是學生:',isSomeoneStudent) // true 大雄和靜香是學生

filter-如果想要找出體重小於一百公斤的人

情境翻譯：如果今天去遊樂園玩，某項遊樂設施有限制體重，限制一百公斤，超過的人不能乘坐。那麼我想要知道誰的體重小於一百公斤。我需要體重小於一百公斤的人的名單（哆啦A夢QQ）

let weightLessThanOneHundred=people.filter(e=>e.weight<100)
// 哆啦A夢大於100，不應該出現哆啦A夢
console.log('體重小於100的人：',weightLessThanOneHundred)

find-如果想要喜歡睡午覺的人

情境翻譯：如果今天有一個特殊的才藝比賽，要比賽睡午覺。因此我要找出喜歡睡午覺的人去參加比賽。但是因為名額只有一名，所以我要找出第一個符合條件的人

let isSomeLikeSleep=people.find(e=>e.favorite==='睡午覺')
// 大雄喜歡睡午覺
console.log('喜歡睡午覺的人：',isSomeLikeSleep)

註：有沒有發現到，filter和find都是找出某個條件後的結果

但是同樣都是過濾條件後的結果，還是有使用情境上的差別的

filter:找出出所有符合條件的結果
find:找出第一個符合條件的結果

可以依照使用情境不同的需求，使用不同的方法

map-如果想要將每個人的年齡都增加一歲

情境翻譯：如果一年過去了，每個人都長大一歲了，現在要將每個人的年齡資料都加加一歲

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