常用陣列方法(上)
陣列方法-forEach
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| const people = [
{
name: '小明',
friends: 2
},
{
name: '阿姨',
friends: 999
},
{
name: '邊緣人',
friends: 0
}
]
people.forEach(function(item, index, array){
console.log(item);
});
|
forEach中的三個引數分別為:
item: 遍歷當下的元素
index: 當下在陣列的第幾個元素
array: 該陣列本身
陣列方法 - map
map會處理陣列中每個元素，最後回傳出一個新的陣列。
而這個新的陣列與就的陣列毫無關係。
故map可以用在將某個陣列的元素內容複製到另一個新陣列中。
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| const people = [
{
name: '小明',
money: 2
},
{
name: '阿姨',
money: 999
},
{
name: '邊緣人',
money: 0
}
]
const newPeople = people.map(function(item, index, array){
return{
...item,
icash: item.money+500
}
});
console.log(newPeople);
|
注意…item這邊的寫法，它是一個縮寫的寫法，
首先，先利用...將item物件中的成員值先依序取出來。
第二，因為，要回傳的物件屬性名稱跟item物件的成員屬性名稱都一樣(name和money)，所以，可以省略不寫，
最終，以上這兩個步驟可以直接用…item來代替。
map沒有return會怎樣
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| const people = [
{
name: '小明',
money: 2
},
{
name: '阿姨',
money: 999
},
{
name: '邊緣人',
money: 0
}
];
const newPeople = people.map(function(item, index, array){
});
console.log(newPeople); // undefined,undefined,undefined
|
如果沒有return東西，則接收的對象的元素，會全部都為undefined。
map v.s forEach
它們倆個方法的差別在於forEach沒有retrun，
map有return，且map所創出來的新陣列跟舊陣列毫無關係。
map方法用在過濾
先說，map這個方法是不適合用在過濾的狀況。
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| const people = [
{
name: '小明',
money: 200
},
{
name: '阿姨',
money: 3000
},
{
name: '邊緣人',
money: 0
},
]
var newArray = people.map(function(item, index, array){
if(item.money > 2000){
return {
...item,
cash: item.money+500
}
}
})
console.log(newArray); // [undefined, {...}, undefined]
|
以上這個範例，你會發現沒有符合該判斷式的物件就不會回傳，
而沒有被回傳的部分，在新的陣列中，會用undefined來取代，
所以，這就是不適合用map來搭配過濾使用的原因。
陣列方法 - filter
將所有回傳true的值，加到新的陣列裡面，且不會對這些遍歷的元素做處理。
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| const people = [
{
name: '力宏',
score: 90
},
{
name: '飛宏',
score: 10
},
{
name: '雷托',
score: 90
}
]
let newArray = people.filter(item => item.score > 60)
console.log(newArray)
|
陣列方法 - find
只會回傳一次回傳true的值，所以，它比較適合搜尋特定或單一的值。
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| const people = [
{
name: '力宏',
score: 90
},
{
name: '飛宏',
score: 10
},
{
name: '雷托',
score: 90
}
]
let newArray = people.find(item => item.score === 10)
console.log(newArray)
|
小總結
forEach只有遍歷陣列，沒有作任何更動，也沒有回傳任何東西。
記得
map方法是直接return 遍歷的元素到新的陣列裡面。
filter是將所有回傳true的元素都儲存到新陣列裡面。
find是將第一個回傳true的元素回傳。
要小心map和filter,find回傳的東西是不一樣的喔。
陣列方法 - every
用來取得true跟false的結果
當所有的結果都為true的話，它回傳的結果才會是true。
注意，它回傳的是二元值true或false喔。
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| const people = [
{
name: '小明',
money: 200
},
{
name: '阿姨',
money: 3000
},
{
name: '邊緣人',
money: 0
}
]
const ans = people.every(item => item.money > 200)
console.log(ans); // false
|
因為，其中幾個元素的money的屬性值沒有大於200，所以，every會直接回傳false。
陣列方法 - some
跟every不同，some只要有一個為true，就會回傳true。
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| const people = [
{
name: '小明',
money: 200
},
{
name: '阿姨',
money: 3000
},
{
name: '邊緣人',
money: 0
}
]
const ans = people.some(item => item.money > 200)
console.log(ans); // true
|
陣列方法 - reduce
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| const people = [
{
name: '小明',
money: 200
},
{
name: '阿姨',
money: 3000
},
{
name: '邊緣人',
money: 0
}
]
var newArray = people.reduce(function(prev, item, index){
console.log(prev);
return prev+500;
}, 0)
|
prev:前一個的參數
首先，reduce的函式中的prev參數是代表前一個參數，如果沒有前一個參數的話，
就由你在逗點後面設的0為它的前一個參數值，記得這個前一個參數的預設值是自由設定的喔。
那這個沒有前一個參數的狀況會在什麼時候出現，通常都會出現在陣列的第一個元素，
因為，第一個元素沒有前面的參數，所以，此時，就可以用你所設定的這個0囉。
所以，上面這個範例，prev的console.log的結果為0, 500, 1000, 1500
item: 當前參數
index: 索引
用reduce來做加總
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| const people = [
{
name: '小明',
money: 200
},
{
name: '阿姨',
money: 3000
},
{
name: '邊緣人',
money: 0
}
]
let newArray = people.reduce((prev, current) => prev + current.money, 0)
console.log(newArray);
|
利用prev存入前一個元素的money值，所以，就可以利用它做總和的功能囉。
用reduce來比大小
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| const people = [
{
name:'小明',
money: 200
},
{
name:'杰倫',
money: 350
},
{
name:'漂亮阿姨',
money: 10
},
]
let ans = people.reduce((prev, item, index) => Math.max(prev, item.money), 0)
console.log(ans); // 350
|
我們用這個方法可以找出陣列裡面money為最大的數值。