頁面連結(請打開 console 查看)

今天不寫程式，學習 (或是複習) 一些 Array methods 吧！

先列出本篇所涵蓋的 methods

• some()
• every()
• find()
• findIndex()
• splice()
• slice()

開始寫程式碼

我們有兩個陣列要處理：

const people = [
  { name: 'Wes', year: 1988 },
  { name: 'Kait', year: 1986 },
  { name: 'Irv', year: 1970 },
  { name: 'Lux', year: 2015 }
];

const comments = [
  { text: 'Love this!', id: 523423 },
  { text: 'Super good', id: 823423 },
  { text: 'You are the best', id: 2039842 },
  { text: 'Ramen is my fav food ever', id: 123523 },
  { text: 'Nice Nice Nice!', id: 542328 }
];

Q1: people 陣列中是否有一人以上 19 歲以上？

要檢查陣列項目是否有 “一項以上” 符合，可以使用 some() 來處理，函式只會 return true 或是 false

const isAdults = people.some(person => ((new Date()).getFullYear() - person.year) >= 19);
console.log(isAdults);  // true

如果不用 some() 的話，使用 find() 、 filter()或許也都是可行的做法 (但相對麻煩一些)

Q2: people 陣列中是否有全部的人都 19 歲以上？

若要檢查陣列中是否 “每項” 都符合條件，可以使用 every() ，該函式如 some() 只會 return true or false

const allAdults = people.every(person => ((new Date()).getFullYear() - person.year) >= 19);
console.log(allAdults);  // false

Q3: 從 comments 陣列中找到 id 為 823423 的項目

這裡有很多做法，可以使用 forEach 搭配 includes、filter()等等... 但搜尋目標如果只有一項就是使用 find() 的絕佳時機了！find() 會 return 被篩選出的 “第一項”

let foundId = comments.find(comment => comment.id === 823423);
console.log(foundId.text);  // "Super good"

Q4: 從 comments 陣列刪除 id 為 823423 的項目

這裡可以拆分成兩部分，找出該項與刪除該項

找出該項

同 find()搜尋目標只有一個，但這裡可以用 findIndex()，該函式會 return 被篩選出的 “第一項” 的 index number

const foundIdIndex = comments.findIndex(comment => comment.id === 823423);

刪除該項

找出來了但要如何刪除？有兩種辦法，一種是透過 splice() ，而另一種是透過 slice() 另組新陣列

先看第一種 splice()

使用 splice()

splice 可以用於刪除或是插入，但這裡我們只用得到刪除的部分

const newComments = comments.splice(foundIdIndex, 1);

第一個參數是開始的 index number，第二個參數代表要除去的數量；splice() 與 slice() 其實蠻像的，無論是用法或長相，但用法其實不太一樣，詳情就請見 MDN 說明了

透過 slice() 另組新陣列

這個方法我也是第一次嘗試，結合了展開運算式(spread operator) 與 slice()

const newComments = [
  ...comments.slice(0, foundIdIndex),
  ...comments.slice(foundIdIndex + 1)
];

概念是將欲刪除的該項排除複製其他項目到新陣列 newComments
也就是說：

• ...comments.slice(0, foundIdIndex) 表示的是 comments[foundIdIndex] 之前的所有項目 (不包含 comments[foundIdIndex])
• ...comments.slice(foundIdIndex + 1) 表示的是 comments[foundIdIndex] 之後的所有項目 (不包含 comments[foundIdIndex])

... 即 spread syntex，能夠展開陣列中的內容，可以試試看去掉 ... ，會發現結果會是 [Array(1), Array(3)] ，也就是陣列裡面又包著陣列；而 ... 所做到就是陣列中的 “內容” 而不是 “整個陣列”

Reference

• Array.prototype.some()
• Array.prototype.every()
• Array.prototype.find()
• Array.prototype.findIndex()
• Spread syntax
• Array.prototype.slice()
• Array.prototype.splice()