JS30-07-Array-Cardio-Day-2

發表於 | 分類於 ， | 0 comments

練習運用 Array 的各種函式

目標

  • 共提供二組資料
    • people： [{ name: ‘Wes’, year: 1988 },…]
    • comments ：[{ text: ‘Love this!’, id: 523423 },…]
  • 根據不同需求條件篩選出正確的資料

練習題目

people 的資料：

  1. 在people資料中，是否有19歲以上的人
  2. 在people資料中，是否每個人都19歲以上

comments 的資料：

  1. 在comments資料中，找到id是 823423 的資料
  2. 在comments資料中，找到id是 823423 的資料索引值, 並透過索引值刪除這筆資料

成品

[DEMO] | [GitHub]

people 題目

people資料
1
2
3
4
5
6
const people = [
    { name: 'Wes', year: 1988 },
    { name: 'Kait', year: 1986 },
    { name: 'Irv', year: 1970 },
    { name: 'Lux', year: 2015 }
];

Q：在people資料中，是否有19歲以上的人

A：透過 some() 逐筆判斷，只要其中一筆有符合，就回傳 true

some()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Some and Every Checks
// Array.prototype.some() // is at least one person 19 or older?

/* 解法 */
const isAdult = people.some(function(people){
  const currYear = (new Date()).getFullYear();
  if ( (currYear - people.year) >= 19){
    return true
  }
})

/* 簡化語法 */
const isAdult = people.some( people => (new Date()).getFullYear() - people.year >= 19)

console.log(isAdult);

Q：在在people資料中，是否每個人都19歲以上

A：透過 every() 逐筆判斷，只要其中一筆不符合，就回傳 false

every()
1
2
3
4
// Array.prototype.every() // is everyone 19 or older?
const allAdults = people.every( people => (new Date()).getFullYear() - people.year >= 19)

console.log(allAdults);

comments 題目

comments資料
1
2
3
4
5
6
7
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 }
];

Q：在comments資料中，找到id是 823423 的資料

A：透過 find() 逐筆判斷，回傳 第一個符合條件的值，若都無符合，則回傳 undefined

find()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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

/* 解法 */
const comment = comments.find(function(comment){
  if (comment.id === 823423){
    return true
  }
})


/* 簡化語法 */
const comment = comments.find( comment => comment.id === 823423)

console.log(comment);

Q：在comments資料中，找到id是 823423 的資料索引值, 並透過索引值刪除這筆資料

A：

  1. 透過 findIndex() 逐筆判斷，回傳 第一個符合條件的索引值，若都無符合，則回傳 -1
  2. 將取得的索引值，透過 slice() 和 Spread syntax(展開語法) 的搭配使用，產出一新陣列
findIndex()、slice()、Spread syntax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Array.prototype.findIndex()
// Find the comment with this ID
// delete the comment with the ID of 823423

const index  = comments.findIndex( comment => comment.id === 823423)
// console.log(index);

// 去除不要的comment，產生一個新的陣列
// slice 為 淺拷貝（shallow copy），不影響原陣列資料。
const newComments = [
    ...comments.slice(0, index),
    ...comments.slice(index+1)
]

console.log(newComments);