Antonio's blog

正在載入索引…

JavaScript：陣列的常見操作方法

4.8k 字，約 5 分鐘

文章目錄
  1. Array.forEach(callbackelement, index, array)
    1. forEach參數(變數名稱可以自定義)
    2. forEach功能
    3. forEach特點
    4. forEach範例
  2. Array.map(callbackelement, index, array)
    1. map功能
    2. map特點
    3. map範例
  3. Array.filter(callbackelement, index, array)
    1. filter功能
    2. filter特點
    3. filter範例
  4. Array.findIndex(callbackelement, index, array)
    1. findIndex功能
    2. findIndex範例
  5. Array.reduce(callbackaccumulator, currentValue, currentIndex, array, initialValue)
    1. reduce參數(變數名稱可以自定義)
    2. reduce功能
    3. reduce特點
    4. reduce範例
  6. Array.sort(compareFunction)
    1. sort參數(變數名稱可以自定義)
    2. sort特點
    3. sort功能
    4. sort範例
      1. 由小到大(升序)
      2. 由大到小(降序)

Array.forEach(callbackelement, index, array)

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

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

forEach功能

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

forEach特點

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

forEach範例

  • 新增NewPrice參數，且NewPrice是基於Price + 20產生
javascript
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 顯示如下：

javascript
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(callbackelement, index, array)

map功能

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

map特點

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

map範例

  • 新增NewPrice參數，且NewPrice是基於Price + 20產生(上述forEach題目改用map寫法)
javascript
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 顯示如下

javascript
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(callbackelement, index, array)

filter功能

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

filter特點

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

filter範例

  • 找到大於等於80的用戶資訊
javascript
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)

顯示如下

javascript
arr [
  { Name: '小王', Price: 10 },
  { Name: '小明', Price: 100 },
  { Name: '小美', Price: 50 },
  { Name: '小天', Price: 80 }
]
newarr [
  { Name: '小明', Price: 100},
  { Name: '小天', Price: 80}
]
  • forEach雖然也能達到相同效果，但程式碼會較繁瑣
javascript
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(callbackelement, index, array)

findIndex功能

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

findIndex範例

  • 小美漲價10塊
javascript
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)

顯示如下

javascript
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雖然也能達到相同效果，但程式碼會較繁瑣
javascript
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(callbackaccumulator, currentValue, currentIndex, array, initialValue)

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

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

reduce功能

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

reduce特點

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

reduce範例

javascript
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)

顯示如下

javascript
目前累加值：0
  -------
當前陣列元素 { Name: '小王', Price: 10 }
當前陣列索引 0
目前累加值：10
  -------
當前陣列元素 { Name: '小明', Price: 100 }
當前陣列索引 1
目前累加值：110
  -------
當前陣列元素 { Name: '小美', Price: 50 }
當前陣列索引 2
目前累加值：160
  -------
當前陣列元素 { Name: '小天', Price: 80 }
當前陣列索引 3
Total 240
  • forEach雖然也能達到相同效果，但程式碼會較繁瑣
javascript
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範例

由小到大(升序)

javascript
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)

由大到小(降序)

javascript
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)

留言

留言使用 GitHub 帳號登入（Giscus），留言會存在 GitHub Discussions。