Wes Bos 的原始專案：JS30 Day07

• Wes Bos 教學影片 Day 07
• Day 07 專案完成前
• Day 07 專案完成後

專案目標：

熟悉陣列操作方法：some()、every()、find()、findIndex()、splice()。
此範例瀏覽器不會渲染出畫面，純粹用陣列操作方法來篩選出資料。

實作成果

資料集

題目給了兩筆資料集，以下共有 5 道題目要從以下兩個資料集中篩選出目標物件資料。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    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 }
    ];

第一題：people 資料中是否有 19 歲以上的人

本題要從 people 資料集判斷是否有 19 歲以上的人。

some() 方法，會將陣列中的「每一個元素」帶入指定的函式內做判斷，只要有一個以上的元素符合判斷條件，即透過 return 回傳 true，否則回傳 false。

裡頭有一個函式 ( 必填 ) 和一個回傳函式裡的 this 參數 ( 選填 )。
函式內包含三個參數，第一個是每個元素的值 ( 必填 )，第二個是當前元素的索引值 ( 選填 )，第三個是當前的陣列 ( 選填 )。

本題也會運用 getYear() 或 getFullYear() 方法來取得當前的年份

本題解法

1
2
3
4

// Array.prototype.some() // is at least one person 19 or older?

let ans01 = people.some(el=>new Date().getYear() + 1900 - el.year >= 19);
console.log(ans01);

第二題：People 資料中是否每個人都19歲以上

every() 方法，可以和 some() 方法一起理解。

every() 方法會將陣列中的「每一個元素」帶入指定的函式內做判斷，全部元素皆符合判斷條件，即透過 return 回傳 true，否則回傳 false。

裡頭有一個函式 ( 必填 ) 和一個回傳函式裡的 this 參數 ( 選填 )。
函式內包含三個參數，第一個是每個元素的值 ( 必填 )，第二個是當前元素的索引值 ( 選填 )，第三個是當前的陣列 ( 選填 )。

本題解法

1
2
3
4

// Array.prototype.every() // is everyone 19 or older?

let ans02 = people.every(el=>new Date().getFullYear() - el.year >= 19);
console.log(ans02);

第三題：在 comments 資料中找到 id 是 823423 的資料

本題要從 comments 資料集找出 id 是 823423 的資料。

find() 方法會將陣列中的「每一個元素」帶入指定的函式內做判斷，透過 return 回傳第一個通過函式判斷的元素值。否則回傳 undefined。

裡頭有一個函式 ( 必填 ) 和一個回傳函式裡的 this 參數 ( 選填 )。
函式內包含三個參數，第一個是每個元素的值 ( 必填 )，第二個是當前元素的索引值 ( 選填 )，第三個是當前的陣列 ( 選填 )。

find() 方法可以和 filter() 方法一起理解。
find() 方法回傳第一個通過函式判斷的元素值；filter() 方法則回傳通過函式判斷的全部元素值。

本題解法

1
2
3
4
5
6

// Array.prototype.find()
// Find is like filter, but instead returns just the one you are looking for
// find the comment with the ID of 823423

let ans03 = comments.find(el=>el.id===823423);
console.log(ans03);

第四題：在 comments 資料中找到 id 是 823423 的資料索引值

本題要從 comments 資料集找出 id 是 823423 的資料索引值。

findIndex() 方法會將陣列中的「每一個元素」帶入指定的函式內做判斷，透過 return 回傳第一個通過函式判斷的元素索引值，否則回傳 -1。

裡頭有一個函式 ( 必填 ) 和一個回傳函式裡的 this 參數 ( 選填 )。
函式內包含三個參數，第一個是每個元素的值 ( 必填 )，第二個是當前元素的索引值 ( 選填 )，第三個是當前的陣列 ( 選填 )。

findIndex() 方法和 find() 及 filter() 方法一樣都是通過函式進行判斷，但 findIndex() 回傳的是元素索引值，而非元素本身。

indexOf() 方法，和 findIndex() 一樣是回傳索引值。但 indexOf() 不是通過函式進行判斷，而只是以元素做 === 的嚴格相等判斷，回傳的是第一個通過相等判斷的元素索引值。

本題解法

1
2
3
4
5

// Array.prototype.findIndex()
// Find the comment with this ID

let ans04 = comments.findIndex(el=>el.id===823423);
console.log(ans04);

第五題：透過第四題找到的索引值，來刪除這筆資料

本題使用第四題找到的索引值，以及 splice() 方法來刪除資料集裡的該筆資料。

splice() 方法可以移除或新增陣列的元素。

包含三個參數，第一個是要移除或要添加資料的位置索引值 ( 必填 )，第二個是要移除的長度 ( 選填，若不填則第一個號碼位置後方的所有元素都會被移除，若設定為 0 則不會有元素被移除 )，第三個以後是要添加的內容 ( 選填 )。

本題解法

1
2
3
4

// delete the comment with the ID of 823423

comments.splice(ans04,1);
console.log(comments);

延伸閱讀：

• JS30 Day 7 - Array Cardio Day 2學習筆記
• JavaScript Array 陣列操作方法大全 ( 含 ES6 )
• JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]
• 關於 JavaScript 陣列 20 種操作的方法
• [六角 Youtube 視頻] JavaScript 陣列處理必學巧技