ES6 陣列常用的操作方法

Posted on | In

以下陣列的操作會以這個陣列作為範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let menuOrder = [
    {
      mother: 'Mary',
      eat: '乾麵',
      price: 40,
    },
    {
      son: 'Peter',
      eat: '炸醬面',
      price: 60,
    },
    {
      father: 'Tom',
      eat: '酸辣湯餃',
      price: 70,
    },
]

一、forEach

1. forEach 的使用方法

forEach 功能基本與 for 迴圈相同，但使用 forEach 可以更為簡短。

Array.prototype.forEach(function(item, index, array){
// 直接操作陣列中的每一個值 //
})

item: 陣列中成員的值
index: 陣列中成員的索引
array: 代表整個陣列

1
2
3
4
5
menuOrder.forEach(function(item,index){
    item.price = 0; // 遍歷每一個 item 的 price 值，將每一個 price 改為零
})

console.log(menuOrder) // 付完錢了，價錢全部變成零

2. 使用 forEach 需要注意到的

  • forEach 功能基本與 for 迴圈相同，但使用 forEach 可以更為簡短，但如果需要中斷迴圈(break) 還是得使用 for 迴圈才能操作。

  • forEach 的執行放在 callBack Function 中，使用 this 的話必須注意會指定到 windows

  • forEach 沒有回傳值 return

  • forEach 不會迭代之前建立的陣列，也就是說，如果在陣列跑到一半，原始陣列改變了，forEach 也只會照著目前跑到的索引值指示繼續跑。

1
2
3
4
5
6
7
8
9
10
var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
console.log(word);
if (word === "two") {
words.shift();
}
});
// one
// two
// four

當到達包含值”two” 的項時，整個陣列的第一個項被移除了，這導致所有剩下的項上移一個位置。因為元素”four” 現在在陣列更前的位置，”three” 會被跳過。

二、 map

1. map 的使用方法

map 和 forEach 很像，但是不同的是 map 有 return 值，可以把值賦予到另一個變數上，形成一個新的陣列，新的陣列的長度和原陣列長度相同

const newArray = array.map(function(item, index, array){
// return ….. //
})

item: 陣列中成員的值
index: 陣列中成員的索引
array: 代表整個陣列

1
2
3
4
5
6
7
// 隔壁桌的客人看到一樣的菜單決定要點一模一樣的菜，不過他們每個人打算多家一顆蛋
let copyOrder = menuOrder.map((item,index) => {
  item.price = item.price + 10; //但一顆 10塊
  return item;
})

console.log(copyOrder); // 隔壁桌客人的每道菜多十塊

2. 使用 map 需要注意到的

  • map 不適合用來過濾，因為 return 值無論有或沒有都會回傳，有可能回傳的值是 undefined。
  • 如果不回傳陣列內的值為 undefined

forEach 是修改自身的陣列， map 透過回傳值形成一個新的陣列

三、 filter

1. filter 的使用方法

使用 filter 可以過濾出陣列中符合條件為 true 的值建立一個新的陣列，新的陣列的長度和原陣列長度不一定相同

const newArray = array.filter(function(item, index, array){
// return ….. //
})

item: 陣列中成員的值
index: 陣列中成員的索引
array: 代表整個陣列

1
2
3
4
5
6
7
8
// 媽媽要教兒子數學，要她挑選出價錢大於 50 的菜。
let higherThan50 = menuOrder.filter((item,index) => {
    return item.price>50; // 過濾出價錢大於 50 的 item
})

console.log(higherThan50);
// {father: "Tom", eat: "酸辣湯餃", price: 70}
// {son: "Peter", eat: "炸醬面", price: 60}

四、 find

1. find 的使用方法

不論陣列中有多少條件符合，只會回傳找到的第一個值。
適合用來找 ID 或者是特定條件。

const newArray = array.find(function(item, index, array){
// return ….. //
})

item: 陣列中成員的值
index: 陣列中成員的索引
array: 代表整個陣列

1
2
3
4
5
6
7
8
9
10
11
12
// 媽媽要教兒子數學，要她挑選出價錢大於 50 的菜，但使用 find 一次只能找出一樣
let findOrder = menuOrder.find((item,index) => {
    return item.price>50; // 找出大於 50 的第一個菜
})

console.log(findOrder);
// 因為使用 find，每次兒子只能找到一到菜，媽媽耐心地說，找出 60 塊的菜
let findOrder = menuOrder.find((item,index) => {
    return item.price === 60; // 找出 60 的第一個菜
})

console.log(findOrder); // {son: "Peter", eat: "炸醬面", price: 60}

五、 findIndex

1. findIndex 的使用方法

findIndex 用來找符合條件的 item 的索引

const newArray = array.findIndex(function(item, index, array){
// return ….. //
})

1
2
3
4
5
6
// 媽媽問兒子， 60 塊的菜是第幾道出的菜阿
let findIndexOrder = menuOrder.findIndex((item,index) => {
    return item.price === 60; // 找出 60 的第一個菜
})

console.log(findIndexOrder); // 2

find 是回傳 item , findIndex 是回傳 Index

六、 every

所有結果都符合條件才會回傳 true，否則為 false

const newArray = array.every(function(item, index, array){
// return ….. // 全部符合條件才為 true
})

item: 陣列中成員的值
index: 陣列中成員的索引
array: 代表整個陣列

1
2
3
4
5
6
// 媽媽問兒子， 是不是所有的菜都是 50 塊以上阿
let everyOrder = menuOrder.every((item,index) => {
    return item.price > 50; // 判斷是否所有的菜大於 50
})

console.log(everyOrder); // false

七、 some

只有有一個結果符合條件，就會回傳 true，全部不符合才會回傳 false

const newArray = array.some(function(item, index, array){
// return ….. // 部分符合條件才為 true
})

item: 陣列中成員的值
index: 陣列中成員的索引
array: 代表整個陣列

1
2
3
4
5
6
// 媽媽問兒子， 是不是有些菜是 50 塊以上阿
let someOrder = menuOrder.some((item,index) => {
    return item.price > 50; // 判斷是否所有的菜大於 50
})

console.log(someOrder); // true

八、 reduce(歸納)

reduce 會將前一個值和下一個值做運算，這邊會多一個初始值(initPrev)，如果沒給初始值，會從索引值1開始開始迭代

const reduceArray = array.some(function(prev, item, index, array){
// return ….. //
}, initPrev)

pre: 前一個值，如果沒有則會帶入 initPrev
item: 陣列中成員的值
index: 陣列中成員的索引
array: 代表整個陣列

1. reduce 使用的情境

  • 兩相比較最後取出特定的值(最大或最小值)
    1
    2
    3
    4
    5
    6
    // 媽媽要兒子一一比較出哪一到菜最貴
    const maxOrder = menuOrder.reduce(function(prev, item, index){
        console.log(prev);
        return Math.max(prev, item.price); // prev 每次迭代會和 item.money 比較數值大小
    },0)
    console.log(maxOrder)
  • 計算所有成員(值)，總合或相乘
    1
    2
    3
    4
    5
    6
    // 媽媽問兒子全部要付多少錢
    const totalOrder = menuOrder.reduce(function(prev, item, index){
        console.log(prev);
        return prev + item.price; // prev 每次迭代會和 item.money 相加
    },0)
    console.log(totalOrder) //總共要付的錢
  • 其它需要兩兩處理的情況(組合巢狀陣列等等)

這次 item 的值，會變成下次 prev 的值

參考資料

卡斯柏 JavaScript 陣列處理方法
iTread

0%