forEach 方法

js的陣列用法 push(), sort(), pop() map, filter, reduce
陣列中有 forEach 用法，但是，跟其他陣列方法不一樣forEach 方法並不會回傳值，其他的陣列方法則會回傳一個陣列或值

const people = [ { name: '力宏' }, { name: '小明' }, { name: '小花' }]
var result = array.forEach( function(item, index) {
	return item
})
console.log(result) // undefined

filter 方法

用來過濾符合條件的內容

const people = [
  {
    name: '力宏',
    money: 10000
  },
  {
    name: '小明',
    money: 2000
  },
  {
    name: '小花',
    money: 10
  }
]

let result = people.filter( (item, index) => item.money > 1000)
console.log(result)

map 方法

功用為處理原本陣列內的內容，並回傳一個新的陣列。
要特別注意的是，回傳的新陣列的長度會跟原始陣列的長度一樣，如果，若沒有資料的部分，回傳的新陣列會直接在那個元素塞入undefined。

const people = [
  {
    name: '力宏',
    money: 10000
  },
  {
    name: '小明',
    money: 2000
  },
  {
    name: '小花',
    money: 10
  }
]

let result = people.map( (item, index) => {
  item.money += 1000
  return item
} )
console.log(result)

如果你在回傳的部分加入判斷式，若不符合的元素在最終產生的新陣列會被塞入undefined的內容。

const people = [
  {
    name: '力宏',
    money: 10000
  },
  {
    name: '小明',
    money: 2000
  },
  {
    name: '小花',
    money: 10
  }
]

let result = people.map( (item, index) => {
  item.money += 1000
  if (item.money >= 10000) return item
} )
console.log(result)  // 回傳 [ {money: 11000, name: "力宏"}, undefined, undefined]

reduce

它會接收上一個數值回傳的內容供給下一個參數使用。很適合用在累加或比對的情境。
accumulator: 前一個參數，如果是陣列的地第一個元素話，值是以另外傳入或初始化的值
currentValue: 當前變數
currentIndex: 當前索引
array: 全部陣列

const people = [
  {
    name: '力宏',
    money: 10000
  },
  {
    name: '小明',
    money: 2000
  },
  {
    name: '小花',
    money: 10
  }
]

let result = people.reduce( (accumulator, current, currentIndex, array) => {
  console.log(accumulator)
  return accumulator + current.money
}, 0)
console.log(result)

上面這個範例是一個累加的範例。
accumulator 是前一個參數累加後的結果，然後，傳到後面給當前參數使用。

再來一個 reduce 比對的例子

const people = [
  {
    name: '力宏',
    money: 10000
  },
  {
    name: '小明',
    money: 2000
  },
  {
    name: '小芳',
    money: 10001
  },
  {
    name: '小花',
    money: 10
  }
]

let result = people.reduce( (accumulator, current, currentIndex, array) => {
  if (accumulator.money < current.money) {
    accumulator = current
  }
  return accumulator
}, {money:0})
console.log(result)

sort

可以用來自訂排序的邏輯，陣列會根據 compareFunction 函數的回傳值來做排序依據。
然後，compareFunction 會傳回一個數字，可能是正數、0 或負數。
若回傳值如果小於 0 (負數)，表示 a 排序在 b 前面
若回傳值如果等於 0，表示 a 和 b 排序一樣位置不動
若回傳值如果大於 0 (正數)，表示 b 排序在 a 前面

const people = [
  {
    name: '小花',
    money: 1000
  },
  {
    name: '小六',
    money: 10000
  },
  {
    name: '小冰',
    money: 100
  }
]

let result = people.sort(function(a, b) {
  return a.money - b.money
})
console.log(result)

以上這個範例，會比較陣列中的物件元素的money大小，並且從小到大來排序。

pop

此方法會移除陣列的最後一個元素，並回傳陣列的最後一個元素，這邊回傳的是剛剛被移除的那個元素，而這個方法會改變園陣列的長度

const people = [
  {
    name: '小花',
    money: 1000
  },
  {
    name: '小六',
    money: 10000
  },
  {
    name: '小冰',
    money: 100
  }
]

let result = people.pop()
console.log(result)  // 回傳 小冰物件 
console.log(people)  // 回傳 移除後的陣列

Landy Blog

陣列用法sort,pop,map,filter,reduce介紹

forEach 方法

filter 方法

map 方法

reduce

sort

pop