JavaScript- 陣列處理方式

本文总阅读量次

陣列使用的技巧是辨別 JavaScript 功力相當重要的一塊，只要能夠對於陣列資料操作熟悉，配合框架就能夠將開發效率更上層樓。

  • forEach：單純執行每個陣列內的物件或值。
  • map：執行每個元素，回傳的值會替代原本陣列內的值。
  • filter：執行每個元素，回傳 true 時，目前的值會保留在陣列內，這會回傳一個新陣列，而不是修改原本的陣列。
  • reduce：執行每個元素，依序組合、加總，然後丟給下個元素，最終會回傳一個結果。

forEach()

forEach：遍歷每個元素，函式執行每個陣列內的物件或值

1
2
3
陣列名.forEach(function(數值item ,索引index , 原陣列array){
    執行內容
})

案例

1
2
3
4
5
this.todos.forEach(function(item){ 
  if（item>2）{
    console.log(item)
  }}
//在this.todos陣列裡，使用item的資料做迴圈判斷

在陣列內新增cash項目，並套用原momey數值+500

1
2
3
4
people.forEach(function(item,index,array){
item.cash = item.money + 500
console.log(item)
});

map()

map與foreach的差異是map會有return指向新的陣列裡，但不影響原陣列的數值，很適合將原始的變數運算後重新組合一個新的陣列。

需產生新的陣列newpeople，放入函數內所新增的變數，*return代表會回傳一個值（滿足條件）到新陣列裡。

1
2
3
4
5
6
7
const newpeople =people.map(funtion(item,index,array){
  return{
    ...item, //…item表示為陣列裡的所有值，逗號後是結合後方的新變數

    icash:item.money+500
  }
})

filter()

按照字面上的意思來說就是過濾器，filter 不會修改值，但他會幫你決定要不要將這個值留在陣列裡面，要注意的是 filter 會回傳一個新的陣列，而不是修改原本的陣列。

相較於map不同的是filter會從原陣列裡篩選原有的數值至新陣列上，而非新增新的變數

1
2
3
4
5
6
7
8
9
10
var arr    = [1, 2, 3, 4],  
    newArr = [];

for(var i = 0; i < arr.length; i++) {  
    if(arr[i] > 2) {
        newArr.push(arr[i]);
    }
}

console.log(newArr); // [3, 4]
1
2
3
4
5
6
7
var arr = [1, 2, 3, 4];

var newArr = arr.filter((val) => {  
    return val > 2;
})

console.log(newArr); // [3, 4]

every()

every() 可以檢查所有的陣列是否符合條件，這僅會回傳一個值 true or false，可以用來檢查陣列中的內容是否符合特定條件。

1
2
3
4
5
6

var ans = array.every(function(item, index, array){
  console.log(item, index, array); // 物件, 索引, 全部陣列
  return item.age > 10 // 當全部 age 大於 10 才能回傳 true
});
console.log(ans); // false: 只要有部分不符合，則為 false

some()

some() 與 every() 非常接近，都是回傳 true or false，差異僅在 every() 需完全符合，some() 僅需要部分符合。

1
2
3
4
5
6
7
8
9
10

ar ans2 = people.some(function(item, index, array){
  return item.age < 25
});
console.log(ans2); // true: 只要有部分符合，則為 true  

var ans2 = people.some(function(item, index, array){
  return item.age > 25
});
console.log(ans2); // false: 全部都不符合則為 false

參考資料: 陣列處理方法、Javascript迴圈函式