07 - Array Cardio Day 2

tags: JavaScript30

專案簡介

第七天要實作的目標是以解決五道問題的方式，學會 List 的資料搜索和條件判斷

課程影片：JS30 07
導讀影片：Alex

初始文件

Github 檔案位置：07 - Array Cardio Day 2

網頁一開始的樣子如下，有兩個 List 和幾道題目

正式製作

流程

今天要做的事情比較單純，就是以以下五個函式解決問題

1. Array.prototype.some()
2. Array.prototype.every()
3. Array.prototype.find()
4. Array.prototype.findIndex()
5. Array.prototype.slice()

共同 Data

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

第一題

題目內容

會用到的函式介紹 -> Array.prototype.some()

• is at least one person 19 or older?

解法

我們可以利用 some() 去偵測這份檔案裡所有的資料，是否有其中一個符合我們的規則（19 歲或以上）;

const ans1 = people.some(person =>{
  return (new Date).getFullYear() - person.year;
})
console.log(ans1);

第二題

題目內容

會用到的函式介紹 -> Array.prototype.every()

• is everyone 19 or older?

解法

我們可以利用 every() 去偵測這份檔案裡所有的資料，是否全都符合我們的規則（19 歲或以上）;

const ans2 = people.every(person => {
  return (new Date).getFullYear - person.year;
})
console.log(ans2);

第三題

題目內容

會用到的函式介紹 -> 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

解法

我們可以利用 find() 去搜索這份檔案裡是否有資料符合我們的要求，有的話則回傳該資料;

const ans3 = comments.find(comment => comment.id === 823423); // 給出資料
    console.log(ans3);

第四題

題目內容

會用到的函式介紹 -> Array.prototype.findIndex()

• Find the comment with this ID

解法

我們可以利用 findIndex() 去搜索這份檔案裡是否有資料符合我們的要求，有的話則回傳該資料的索引值;

const ans4 = comments.findIndex(comment => comment.id === 823423) // 給出索引值
console.log(ans4);

第五題

題目內容

會用到的函式介紹

1. Array.prototype.splice()
2. Array.prototype.slice()

• delete the comment with the ID of 823423

解法 1

我們可以利用 splice() 在指定的地方刪除或加入元素，來改變陣列內容

const ans5  = comments.splice(ans4, 1);
console.log(ans5); // 被刪掉的資料
console.log(comments); // 刪除資料後的檔案

解法 2

我們可以利用 slice() 選取舊陣列的資料組成新陣列，這樣可以避免原始資料被更改的情況，另外這裡用到了之前學的解構賦值

const newComments = [...comments.slice(0, ans4), ...comments.slice(ans4 + 1)];
console.log(newComments);

最後程式碼

詳見 > 最後的成品

結語

以上是第七天的製作紀錄，如有錯誤或不足的地方還請多多指教 >.<

.some(), .every(), .find() and [...SPREADS] — Array Cardio Day 2 - #JavaScript30 7/30
[ Alex 宅幹嘛 ] 深入淺出 Javascript30 快速導覽：Day 7：Array Cardio Day 2
MDN Web Docs