JavaScript(9)：陣列的常見操作方法

Array.forEach(callback[element, index, array])

forEach參數(變數名稱可以自定義)

• element：當前陣列元素(必填)
• index：當前陣列元素索引值(可選)
• array：傳遞進來的陣列(可選)

forEach功能

• 用於對陣列中的每個元素進行特定操作的功能

forEach特點

• 能被中斷（break），即使在函式中返回 false，forEach 也會繼續遍歷
• 不會產生新的陣列

---

forEach範例

• 新增NewPrice參數，且NewPrice是基於Price + 20產生

const arr = [
  {
    Name: "小王",
    Price: 10
  },
  {
    Name: "小明",
    Price: 100
  },
  {
    Name: "小美",
    Price: 50
  },
  {
    Name: "小天",
    Price: 80
  }
];

const newarr = []
arr.forEach((item, key) => {
  newarr[key] = {
    ...item,
    NewPrice: item.Price + 20
  }
})

console.log("arr", arr)
console.log("newarr", newarr)

console.log 顯示如下：

arr [
  { Name: '小王', Price: 10 },
  { Name: '小明', Price: 100 },
  { Name: '小美', Price: 50 },
  { Name: '小天', Price: 80 }
]
newarr [
  { Name: '小王', Price: 10, NewPrice: 30 },
  { Name: '小明', Price: 100, NewPrice: 120 },
  { Name: '小美', Price: 50, NewPrice: 70 },
  { Name: '小天', Price: 80, NewPrice: 100 }
]

Array.map(callback[element, index, array])

map功能

• map方法用於對陣列中的每個元素進行特定操作的功能，並返回一個新的陣列。

map特點

• 會產生新的陣列，需要有其他變數指定。

map範例

• 新增NewPrice參數，且NewPrice是基於Price + 20產生(上述forEach題目改用map寫法)

const arr = [
  {
    Name: "小王",
    Price: 10
  },
  {
    Name: "小明",
    Price: 100
  },
  {
    Name: "小美",
    Price: 50
  },
  {
    Name: "小天",
    Price: 80
  }
];

const newarr = arr.map((item, key) => {
  return {
    ...item,
    NewPrice: item.Price + 20
  }
})

console.log("arr", arr)
console.log("newarr", newarr)

console.log 顯示如下

arr [
  { Name: '小王', Price: 10 },
  { Name: '小明', Price: 100 },
  { Name: '小美', Price: 50 },
  { Name: '小天', Price: 80 }
]
newarr [
  { Name: '小王', Price: 10, NewPrice: 30 },
  { Name: '小明', Price: 100, NewPrice: 120 },
  { Name: '小美', Price: 50, NewPrice: 70 },
  { Name: '小天', Price: 80, NewPrice: 100 }
]

Array.filter(callback[element, index, array])

filter功能

• 用於從陣列中選擇滿足特定條件的元素，並返回一個新的陣列。

filter特點

• 會產生新的陣列，需要有其他變數指定。

filter範例

• 找到大於等於80的用戶資訊

const arr = [
  {
    Name: "小王",
    Price: 10
  },
  {
    Name: "小明",
    Price: 100
  },
  {
    Name: "小美",
    Price: 50
  },
  {
    Name: "小天",
    Price: 80
  }
];

const newarr = arr.filter((item) => {
  return item.Price >= 80
})

console.log("arr", arr)
console.log("newarr", newarr)

顯示如下

arr [
  { Name: '小王', Price: 10 },
  { Name: '小明', Price: 100 },
  { Name: '小美', Price: 50 },
  { Name: '小天', Price: 80 }
]
newarr [
  { Name: '小明', Price: 100},
  { Name: '小天', Price: 80}
]

• forEach雖然也能達到相同效果，但程式碼會較繁瑣

const arr = [
  {
    Name: "小王",
    Price: 10
  },
  {
    Name: "小明",
    Price: 100
  },
  {
    Name: "小美",
    Price: 50
  },
  {
    Name: "小天",
    Price: 80
  }
];

const newarr = []
arr.forEach((item) => {
  if (item.Price >= 80) {
    newarr.push(item)
  }
  return item.Price >= 80
})

console.log("arr", arr)
console.log("newarr", newarr)

Array.findIndex(callback[element, index, array])

findIndex功能

• 用於找到陣列中第一個滿足指定條件的元素的索引，如果找不到則返回 -1。

findIndex範例

• 小美漲價10塊

const arr = [
  {
    Name: "小王",
    Price: 10
  },
  {
    Name: "小明",
    Price: 100
  },
  {
    Name: "小美",
    Price: 50
  },
  {
    Name: "小天",
    Price: 80
  }
];

console.log("arr before", arr)

const finditemindex = arr.findIndex((item) => {
  return item.Name === '小美'
})
arr[finditemindex].Price = arr[finditemindex].Price + 10

console.log("finditemindex(小美索引位置)", finditemindex)
console.log("info(小美物件資訊)", arr[finditemindex])
console.log("arr after", arr)

顯示如下

arr before [
  { Name: '小王', Price: 10 },
  { Name: '小明', Price: 100 },
  { Name: '小美', Price: 50 },
  { Name: '小天', Price: 80 }
]
finditemindex(小美索引位置) 2
info(小美物件資訊) { Name: '小美', Price: 60 }
arr after [
  { Name: '小王', Price: 10 },
  { Name: '小明', Price: 100 },
  { Name: '小美', Price: 60 },
  { Name: '小天', Price: 80 }
]

• forEach雖然也能達到相同效果，但程式碼會較繁瑣

const arr = [
  {
    Name: "小王",
    Price: 10
  },
  {
    Name: "小明",
    Price: 100
  },
  {
    Name: "小美",
    Price: 50
  },
  {
    Name: "小天",
    Price: 80
  }
];

console.log("arr before", arr)

let index = -1
console
arr.forEach((item, key) => {
  if(item.Name === '小美'){
    index = key
  }
})
arr[index].Price = arr[index].Price + 10

console.log("finditemindex(小美索引位置)", index)
console.log("info(小美物件資訊)", arr[index])
console.log("arr after", arr)

Array.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)

reduce參數(變數名稱可以自定義)

• accumulator：上一次累加的數值，若為第一次則等於initialValue(必填)
• currentValue：當前處理的陣列元素(必填)
• currentIndex：當前處理陣列元素的索引值(可選)
• array：傳遞進來的陣列(可選)
• initialValue：初始值(可選)

reduce功能

• 用於將陣列中的所有元素進行累積

reduce特點

• 可以用於陣列的求和、求積等操作
• 可以指定初始值(initialValue)

reduce範例

const arr = [
  {
    Name: "小王",
    Price: 10
  },
  {
    Name: "小明",
    Price: 100
  },
  {
    Name: "小美",
    Price: 50
  },
  {
    Name: "小天",
    Price: 80
  }
];

const init = 0
const Total = arr.reduce((acc, cur, index) => {
  console.log(`目前累加值：${acc}
  -------`)
  console.log("當前陣列元素", cur)
  console.log("當前陣列索引", index)
  return acc + cur.Price
}, init)

console.log("Total", Total)

顯示如下

目前累加值：0
  -------
當前陣列元素 { Name: '小王', Price: 10 }
當前陣列索引 0
目前累加值：10
  -------
當前陣列元素 { Name: '小明', Price: 100 }
當前陣列索引 1
目前累加值：110
  -------
當前陣列元素 { Name: '小美', Price: 50 }
當前陣列索引 2
目前累加值：160
  -------
當前陣列元素 { Name: '小天', Price: 80 }
當前陣列索引 3
Total 240

• forEach雖然也能達到相同效果，但程式碼會較繁瑣

const arr = [
  {
    Name: "小王",
    Price: 10
  },
  {
    Name: "小明",
    Price: 100
  },
  {
    Name: "小美",
    Price: 50
  },
  {
    Name: "小天",
    Price: 80
  }
];

let Total = 0
arr.forEach((item, key) => {
  console.log(`目前累加值：${Total}
  -------`)
  console.log("當前陣列元素", item)
  console.log("當前陣列索引", key)
  Total = Total + item.Price
})

console.log("Total", Total)

Array.sort([compareFunction])

sort參數(變數名稱可以自定義)

• a, b: 要比較的兩個元素

sort特點

• a - b：由小到大(升序)
• b - a：由大到小(降序)

sort功能

• 用於對陣列元素進行排序。

sort範例

由小到大(升序)

const arr = [
  {
    Name: "小王",
    Price: 10
  },
  {
    Name: "小明",
    Price: 100
  },
  {
    Name: "小美",
    Price: 50
  },
  {
    Name: "小天",
    Price: 80
  }
];

const sortarr = arr.sort((a, b) => {
  return a.Price - b.Price
})

console.log("sortarr", sortarr)

由大到小(降序)

const arr = [
  {
    Name: "小王",
    Price: 10
  },
  {
    Name: "小明",
    Price: 100
  },
  {
    Name: "小美",
    Price: 50
  },
  {
    Name: "小天",
    Price: 80
  }
];

const sortarr = arr.sort((a, b) => {
  return b.Price - a.Price
})

console.log("sortarr", sortarr)