Day 7 - Array Cardio Day 2

前言

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

更简化版:

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。

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

简化版:

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()