陣列常用方法

陣列常用方法

這是我的陣列方法筆記。不一定詳盡,就給自己做個紀錄。
(詞窮)

forEach

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
const people = [
{
name: '小明',
money: 500
},
{
name: '漂亮阿姨',
money: 3000
},
{
name: '杰倫',
money: 60000
},
{
name: '老媽',
money: Infinity
}
];

// forEach 與 map
// 將所有物件增加 icash 有多少金額的欄位
// for(let i=0; i< people.length; i++){
// console.log(people[i]);
// }
//通常不會用到
people.forEach(function(item, index, array){
console.log(item, index, array);
})

map

跟forEach很像,但會回傳值

1
2
3
4
5
6
7
8
9
10
11
12
//要有一個變數來儲存MAP回傳的值
let peopleCash = people.map(function(item, index, array){
//回傳一個物件 
//物件中包含該陣列的每一個元素, 在每個元素上再新增一屬性為icash
return{
...item,
iCash: item.money +500
}

})

console.log(peopleCash);

若是沒有使用return, 還是會回傳一個跟原本長度相同的陣列, 但內容會是undefined
用map做篩選:

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

//若是使用map做篩選
const peopleCash = people.map(function(item, index, array){
//篩出金額大於2000的元素
if(item.money >2000){
return item;
}

})
console.log(peopleCash);
//outcome
0: undefined
1: {name: "漂亮阿姨", money: 3000}
2: {name: "杰倫", money: 60000}
3: {name: "老媽", money: Infinity}

沒有通過篩選條件的還是會回傳, 值會是undefined, 所以不適合

filter

會將通過條件的才回傳
filter和map都要傳入一個函式, 參數為item(各元素), index(索引值), array(要傳入的陣列)

1
2
3
4
5
6
7
8
const filteredPeople = people.filter(function(item, index, array){
//會回傳值為true的元素, 是一個陣列
// return true;
if(item.money >2000){
return true;
}
});
console.log(filteredPeople);

find

找到的資料只會回傳第一個符合條件的, 會按照原本的格式回傳

1
2
3
4
5
6
7
8
9
10
11
// find
// 1. 找到金額 = 500 的物件
// 2. 找到 > 5000 的物件

const findPeople = people.find(function(item, index, array){
//找到的資料只會回傳第一個符合條件的, 會按照原本的格式回傳
if(item.money >2000){
return true;
}
});
console.log(findPeople); //{name: "漂亮阿姨", money: 3000}

every

設定一個檢查條件
若是全部元素都通過, 就回傳true, 反之就false

1
2
3
4
5
6
const ans = people.every(function(item, i){
//設定一個檢查條件
//若是全部元素都通過, 就回傳true, 反之就false
return item.money > 50;
});
console.log(ans); //每個元素都有超過50, true (布林)

some

設定一個檢查條件
若是有其中一個元素都通過, 就回傳true, 反之就false

1
2
3
4
5
6
7
8
9
// some
// 1. 是否有物件超過 10000 元
// 2. 是否有物件持有金額少於 300元
const some = people.some(function(item, i){
//設定一個檢查條件
//若是有其中一個元素都通過, 就回傳true, 反之就false
return item.money > 50000;
});
console.log(some); //有其中幾個超過50000, true (布林)

reduce

設定一個檢查條件
若是有其中一個元素都通過, 就回傳true, 反之就false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// reduce
// 去除掉老媽,請問剩下的人有多少錢?
// 會回傳,適合用於數字運算 //前一個(沒有前一個就逗號後補零)
// const newNum = people.reduce(function(prev, item, index ){
// console.log(prev); //0
// return prev +500; //500 1000 1500
// }, 0)
//0會被帶入prev

// const newNum = people.reduce(function(prev, item, index ){
// console.log(prev); //0
// return prev +500; //600 1100 1600
// }, 100)

//加總
const newNum = people.reduce(function(prev, item, index){
console.log(prev); //0
return prev + item.money; //0 500 3500 63500 (最後一個數字為加總)
}, 0);

console.log('newNum' + newNum); //63500

沒了

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×