iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
1
Modern Web

前端工程師-從新手都中手系列 第 3

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

  • 分享至 

  • xImage
  •  

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


上一篇
DAY2-如何選擇前端框架
下一篇
DAY4-Javascript Set和Map (上)
系列文
前端工程師-從新手都中手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ayugioh2003
iT邦新手 1 級 ‧ 2020-09-19 18:58:39

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

這兩個標題好像寫反了,第一個感覺在說 some,第二個感覺在說 every ~

tso1158687 iT邦研究生 5 級 ‧ 2020-09-20 01:14:33 檢舉

真的兩個寫相反了orz
感謝指正,謝謝!

我要留言

立即登入留言