JS30 Day07
今天介紹的 Array 方法很實用,可以用來多刷幾題 Codewars XD


Array Cardio Day 2

完成目標

本課是延續 Day 4 ,介紹更多 JavaScript 中常見的 Array 方法。




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
36
37
38
39
40
41
<!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>

index-FINISHED.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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!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?
// const isAdult = people.some(function(person) {
// const currentYear = (new Date()).getFullYear();
// if(currentYear - person.year >= 19) {
// return true;
// }
// });

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

console.log({isAdult});
// Array.prototype.every() // is everyone 19?

const allAdults = people.every(person => ((new Date()).getFullYear()) - person.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(comment => comment.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(comment => comment.id === 823423);
console.log(index);

// comments.splice(index, 1);

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

</script>
</body>
</html>



學習筆記


★ getFullYear()

getFullYear() 方法可返回一個表示年份的 4 位數字。

語法:dateObject.getFullYear()

範例:

1
2
3
4
5
6
7
8
9
var d = new Date()
document.write(d.getFullYear())

// 2019

var born = new Date("July 10, 1991")
document.write("I was born in " + born.getFullYear())

// I was born in 1991

★ Array.splice()

splice() 方法可以新增/刪除 Array 項目,並返回被刪除的項目。

*注意:此方法會改變原本的 Array。

語法:arrayObject.splice(index,howmany,item1,.....,itemX)

  • Index:必填。從哪裡開始新增/刪除項目
  • howmany:選擇。刪除多少項目,可以為 0,若未設定此參數,則會刪除從 index 之後的所有項目
  • item:選擇。新增的新項目。

範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>

<p id="demo"></p>
<button onclick="myFunction()">點擊</button>
<script>
// 點擊後會刪除 Shake 並新增 Juice 到 Array
function myFunction(){
let drinks = ["Milk", "Tea", "Coffee", "Shake"];
drinks.splice(3,1,"Juice");
let x = document.getElementById("demo");
x.innerHTML = drinks;
}
</script>

</body>

★ Array.slice()

slice() 方法會回傳一個新 Array 物件,為原 Array 選擇之 begin 至 end(不含 end)部分的淺拷貝(shallow copy)。而原本的 Array 將不會被修改。也可以用在 String。

語法:arr.slice([begin[, end]])

  • begin:開始的索引值,負數代表從後面開始算起,-1為倒數第一個元素。
  • end:結束的索引值,沒有填寫時則得到 Array 中的所有元素。

範例:

1
2
3
4
let drinks = ["Milk", "Tea", "Coffee", "Shake"];
drink1 = drinks.slice(1,3)

// ["Tea", "Coffee"]


接著是課程中使用的 Array 方法們


★ Array.some()

some() 方法會透過指定的函式,測試陣列中是否至少有一個元素。返回布林值。若有一個項目符合條件,即會返回 true,不會再繼續檢測剩下的項目。不會改變原本的 Array。

*注意:some() 不會檢測空 Array。

範例:

1
2
3
4
5
6
let ages = [17, 8, 50, 9];
let anyAdult = (age) => age >= 18;

console.log(ages.some(anyAdult));

// true

★ Array.every()

every() 方法會測試 Array 中的所有項目是否都通過了由指定之函式所實作的測試。

every()some() 看起來相似,但 every() 只要有一個項目不符合條件就會回傳 false。

範例:

1
2
3
4
5
6
let ages = [17, 8, 50, 9];
let allAdult = (age) => age >= 18;

console.log(ages.every(allAdult));

// false

★ Array.find()

find() 方法會回傳第一個滿足所提供之測試函式的項目的值。否則回傳 undefined。

範例:

1
2
3
4
5
6
let ages = [17, 8, 50, 9, 18];
let whoIsAdult = (age) => age >= 18;

console.log(ages.find(whoIsAdult));

// 50