Navigate back to the homepage

Day7: Array Cardio Day 2

JavaScript30
June 25th, 2021 · 1 min read

專案介紹: 練習 array 第二波, 包含 some、 every、 find、 findIndex、slice

作品頁面:https://iris1114.github.io/javascript30/07_Array-Cardio-Day-2/index.html (無畫面,請打開 console)

題目資料

題目給了 2 組資料,總共 5 道題目, people 資料用於第 1-2 題 , comments 資料用於第 3-5 題 。

1const people = [
2 { name: "Wes", year: 1988 },
3 { name: "Kait", year: 1986 },
4 { name: "Irv", year: 1970 },
5 { name: "Lux", year: 2015 },
6];
7
8const comments = [
9 { text: "Love this!", id: 523423 },
10 { text: "Super good", id: 823423 },
11 { text: "You are the best", id: 2039842 },
12 { text: "Ramen is my fav food ever", id: 123523 },
13 { text: "Nice Nice Nice!", id: 542328 },
14];

1. is at least one person 19 or older?

方法: 使用 some() 測試陣列中是否至少有一個元素符合判斷,如果至少有一個符合回傳 true, 沒有的話則回傳 false 。

Ans:

1const ans1 = people.some((person) => {
2 return new Date().getFullYear - person.year >= 19;
3});
4
5console.log("some():", ans1); //true

2. is everyone 19 or older?

方法: 使用 every() 測試陣列中的所有元素是否都符合判斷,如果都符合回傳 true, 沒有則回傳 false 。

Ans:

1const ans2 = people.every((person) => {
2 return new Date().getFullYear - person.year >= 19;
3});
4
5console.log("every():", ans2); //false

3. find the comment with the ID of 823423.

方法: 使用 find() 會回傳第一個滿足所提供之測試函式的元素值。否則回傳 undefined。

Ans:

1const ans3 = comments.find((comment) => {
2 return comment.id === 823423;
3});
4
5console.log("find()", ans3); //{text: "Super good", id: 823423}

4. Find the index with this ID of 823423.

方法: 使用 findIndex(), 依據提供的測試函式,尋找陣列中符合的元素,並返回其 index(索引)。如果沒有符合的對象,將返回 -1 。

Ans:

1const index = comments.findIndex((comment) => {
2 return comment.id === 823423;
3});
4
5console.log("findIndex()", index); //1

5. delete the comment with the ID of 823423.

方法: 使用 slice(), 會回傳一個新陣列物件,為原陣列選擇之 begin 至 end(不含 end)部分的淺拷貝(shallow copy)。而原本的陣列將不會被修改。特別注意,如果使用 splice() 則會藉由刪除既有元素並/或加入新元素來改變原本陣列的內容。

Ans:

1const newComments = [...comments.slice(0, index), ...comments.slice(index + 1)];
2
3console.log("newComments", newComments);

參考資料

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/some https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/every https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/find

More articles from Iris Blog

Day6: Type-Ahead

用 fetch 去 get 城市資料,並用正規表達式來回傳搜尋相關程式

June 23rd, 2021 · 1 min read

Day5: Flex Panels

練習 css flex 及 js 點擊圖片做展開效果

June 21st, 2021 · 1 min read
© 2020–2021 Iris Blog
Link to $mailto:qweichew@gmail.comLink to $https://github.com/iris1114Link to $https://www.instagram.com/iris.justdoit/Link to $https://www.linkedin.com/in/iris-chew