最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

Day 7 – Array Cardio Day 2

XAMPP下载 admin 435浏览 0评论
 頁面連結(請打開 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)] ,也就是陣列裡面又包著陣列;而 … 所做到就是陣列中的 “內容” 而不是 “整個陣列”

转载请注明:XAMPP中文组官网 » Day 7 – Array Cardio Day 2

您必须 登录 才能发表评论!