新手村07 - Array Cardio Day 2

07 - Array Cardio Day 2

俗話說的好，一天一蘋果，醫生遠離我

一天一 JS，What the f*ck JavaScript？

small steps every day - 記錄著新手村日記

完成目標

Javascript基本的Array方法運用：

  • 有兩個陣列 people、comments ，完成題目的要求

  • 題目以 Array.prototype.method() 為分界

  • 練習這些方法：Array.prototype.some()、Array.prototype.every() 、Array.prototype.find()、Array.prototype.findIndex()

index_START.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Array Cardio 💪💪</title>
</head>
<body>
  <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
  <script>
    // ## Array Cardio Day 2
    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 }
    ];
    // Some and Every Checks
    // Array.prototype.some() // is at least one person 19 or older?
    // Array.prototype.every() // is everyone 19 or older?
    // 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
    // Array.prototype.findIndex()
    // Find the comment with this ID
    // delete the comment with the ID of 823423
  </script>
</body>
</html>

JS - step by step

  1. 從 people 的變數中透過 some 找出一筆資料大於等於19歲：

    • some：方法會測試陣列中其中一個元素是否都通過了由給定之函式所實作的測試，回傳的是布林值。

    • getUTCFullYear：以世界時間為標準，回傳一個指定的日期的年份。

      Array.prototype.some()：https://tinyurl.com/y3ox2o5b

      Date.prototype.getUTCFullYear()：https://tinyurl.com/y64burg7

    1
    2
    3
    4
    5
    6
    const isAdult = people.some(function(p){
    	return new Date().getUTCFullYear() - p.year >= 19
    })

    console.log(isAdult)
    //true

  2. 從 people 的變數中透過 every 必須任何一筆資料大於等於19歲：

    • every：方法會測試陣列中的所有元素是否都通過了由給定之函式所實作的測試，回傳的是布林值。

      Array.prototype.every()：https://tinyurl.com/yyhl7e54

    1
    2
    3
    4
    5
    6
    const allAdults = people.every(function(p){
      return new Date().getUTCFullYear() - p.year >= 19
    })

    console.log(allAdults)
    //false

  3. 從 comments 的變數中透過 find 找出 ID 是 823423：

    • find：方法會回傳第一個滿足所提供之測試函式的元素值，並列出找到的項目，如果找不到會回傳 undefined。

      Array.prototype.find()：https://tinyurl.com/y2swwtgq

    1
    2
    3
    4
    5
    6
    const comment = comments.find(function(c){
      return c.id === 823423
    })

    console.log(comment)
    //{text: "Super good", id: 823423}

  4. 從 comments 的變數中透過 findIndex 找出 ID 是 823423

    • findIndex：方法會回傳第一個滿足所提供之測試函式的元素值，不會列出找到的項目，只會列出比數，如果找不到會回傳 -1 。

      Array.prototype.findIndex()：https://tinyurl.com/y38fqko5

    1
    2
    3
    4
    5
    6
    const index = comments.findIndex(function(i){
      return i.id === 823423
    })

    console.log(index)
    // 1

    就大功告成啦！

JS - Final

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script>
  // ## Array Cardio Day 2

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

  // Some and Every Checks
  // Array.prototype.some() // is at least one person 19 or older?

  const isAdult = people.some(function(p){
    return new Date().getUTCFullYear() - p.year >= 19
  })

  console.log(isAdult)

  // Array.prototype.every() // is everyone 19 or older?

  const allAdults = people.every(function(p){
    return new Date().getUTCFullYear() - p.year >= 19
  })

  console.log(allAdults)

  // 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(c){
    return c.id === 823423
  })

  console.log(comment)

  // Array.prototype.findIndex()
  // Find the comment with this ID
  // delete the comment with the ID of 823423

  const index = comments.findIndex(function(i){
    return i.id === 823423
  })

  console.log(index)

</script>

本刊同步於個人網站：http://chestertang.site/

本次範例程式碼原作者來源：https://reurl.cc/9zZGYv