JS30 全攻略第7天

2021-09-07

2022-03-14

JS30

前言

JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程，課程主打 No Frameworks、No Compilers、No Libraries、No Boilerplate 在30天的30部教學影片裡，建立30個JavaScript的有趣小東西。

另外，Wes Bos 也很無私地在 Github 上公開了所有 JS 30 課程的程式碼，有興趣的話可以去 fork 或下載。

本日目標

練習使用JS Array 的 some()、every()、find()、findIndex()。

解析程式碼

JS 部分

練習題使用到的資料:

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

1. Is at least one person 19 or older?

Array.prototype.some()

some() 可以給定一個函式，測試陣列中是否至少有一個元素符合指定的條件，該方法回傳的是布林值。

Date

建立一個 JavaScript Date 物件來取得某個時間點。Date 物件是從世界標準時間（UTC） 1970 年 1 月 1 日開始算起。

第一題，我們檢查是否至少有一個 person 的年紀大於 19歲。指定一個 function 到 some() 中，在 function 裡面，我們宣告一個常數 currentYear來存放現在的年份，之後透過 if 判斷用現在的年份減去 person 的出生年，是否大於19，如果大於19就返回 true。

基本版:

const isAdult = people.some(function(person){
    const currentYear = (new Date()).getFullYear();
        if(currentYear - person.year >= 19)
            return true;
});

簡化版:

const isAdult = people.some(person => {
    const currentYear = (new Date()).getFullYear();
    return currentYear - person.year > 19;
});

更簡化版:

1
2
3

const isAdult = people.some(person => (new Date().getFullYear()) - person.year >= 19 );

console.log(isAdult);

2. Is everyone 19 or older?

Array.prototype.every()

every() 方法會測試陣列中的所有元素是否都符合函式所指定的條件，若全部元素都符合則返回 true，反之則返回 false。

我們使用 every() 方法，將陣列元素一個個的拿出來做條件判斷，若是有其中一個元素經過計算不符合設定的規則就 return false。

1
2
3

const allAdults = people.every(person => (new Date().getFullYear()) - person.year >= 19 );

console.log(allAdults);

3. Find the comment with the ID of 823423.

Array.prototype.find()

find() 方法會回傳第一個符合函式定義條件的元素值，若沒有元素符合條件就回傳undefined。

下面我們使用 find() 找出 comment id 是 823423 的 comment。這邊是用===而不是==進行相等運算，因為在 js 中使用 == 進行相等運算，js 會幫你偷偷地轉換型別再進行比較，例如: '99' == 99 的結果就會是 true。===則是嚴格的相等運算，js 不會偷偷的做資料轉型，兩邊資料型態只要不一致，自然就會回傳 false。

基本版:

const comment = comments.find(function(comment){
    if(comment.id === 823423){
        return true;
    }
});

簡化版:

1
2
3

const comment = comments.find(comment => comment.id === 823423);

console.log(comment);

4. Delete the comment with the ID of 823423.

Array.prototype.findIndex()

findIndex()方法將按照指定的函式，尋找陣列中第一個符合條件的元素，並回傳元素的 index（索引）。如果沒有找到符合的元素就回傳 -1 。

Array.prototype.slice()

slice()方法會回傳一個新的陣列，它會切割出原陣列從索引 begin 至 end（不含 end）的元素。原本的陣列不會被影響。

我們使用 findIndex() 尋找到第一個 comment id 是 823423 的元素並取得該元素的索引值(index)。

透過 slice()將陣列進行切割，我們可以將找出的元素值從陣列中移除並宣告常數承接回傳的新陣列。(複習一下，前面說過...可以把陣列中的元素一個個地展開。)

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

console.log(index);

const newComments = [
    ...comments.slice(0,index),
    ...comments.slice(index + 1)
];

console.table(comments);
console.table(newComments);

補充資料:

相等比較 ===、==
Array.prototype.slice()
Array.prototype.findIndex()
Array.prototype.find()
Array.prototype.every()
Date
Array.prototype.some()

2021 iThome 鐵人賽

前言