跳至主要内容

JS 處理陣列的方法

提示

這裡匯總個人常用處理陣列的方法

備註

不定期更新中

原始資料

const arrayData = [
  {
    id: 1,
    type: 'apple',
    count: 3,
  },
  {
    id: 2,
    type: 'banana',
    count: 6,
  },
  {
    id: 3,
    type: 'blueberry',
    count: 9,
  },
  {
    id: 4,
    type: 'orange',
    count: 1,
  },
];

迴圈遍歷​

for | 基本迴圈​

|| 最基礎的迴圈方式，可依需求決定是否改變原陣列

  • 可讀取、修改原陣列或建立新陣列
  • 靈活性高，適合複雜邏輯
  • 可搭配 break 和 continue 控制流程

不改變原陣列 - 讀取資料

for (let i = 0; i < arrayData.length; i++) {
  console.log(arrayData[i]);
}

不改變原陣列 - 建立新陣列

const newArray = [];
for (let i = 0; i < arrayData.length; i++) {
  if (arrayData[i].count > 5) {
    newArray.push(arrayData[i]);
  }
}
console.log(newArray);

會改變原陣列 - 修改元素

for (let i = 0; i < arrayData.length; i++) {
  arrayData[i].count += 1;
}
console.log(arrayData);

for...of | 遍歷陣列元素​

|| 直接遍歷陣列的值，語法更簡潔

  • 不需要索引時很好用
  • 無法直接取得索引（需搭配 entries()）
  • 可搭配 break 和 continue
for (const item of arrayData) {
  console.log(item.type);
}

取得索引

for (const [index, item] of arrayData.entries()) {
  console.log(index, item);
}

for...in | 遍歷物件屬性​

|| 主要用於遍歷物件，不建議用於陣列

  • 會遍歷所有可枚舉屬性（包括原型鏈）
  • 陣列建議使用 for...of 或 for 迴圈
for (const key in arrayData[0]) {
  console.log(key, arrayData[0][key]);
}

不改變原陣列​

.map() | 遍歷所有元素後產生新陣列​

| 跑迴圈，不修改原始資料而是產生新陣列

  • 寫 React 超常使用
  • 很常用來運算後產生新陣列
  • 列出數量大於 5 的
const newData = arrayData.map(item => {
  return item.count > 5;
})
console.log(newData);

Result

[false,true,true,false]

.find() | 找第一個符合條件的資料​

const findApple = arrayData.find(item => count.count > 3);
console.log(findApple)

Result

{
  id: 2,
  type: 'banana',
  count: 6
}

.findIndex() | 找第一個符合條件的 index​

const isBanana = 2;
const findBananaIndex = arrayData.findIndex(item => item.id === isBanana)
console.log(findBananaIndex)

Result

1

.reduce() | 依條件回傳一個值​

解題

  • accumulator: 累加器
  • item: 當前元素
const totalCount = arrayData.reduce((accumulator, item) => {
  return accumulator + item.count
},0) //初始值
console.log(totalCount)

Result

19

會改變原陣列​

.sort() | 進行排序​

| 將陣列進行排序

.push() | 在最後一筆加上資料​

| 在陣列的最後一筆加上資料

const newFruit = {
  id: 5,
  type: 'grape',
  count: 5,
};
arrayData.push(newFruit);

.pop() | 移除最後一筆​

| 移除陣列的最後一筆 (結尾)

const removePopData = arrayData.pop();
console.log(arrayData);

Result

// [object Array] (3)
[
  {
    id: 1,
    type: 'apple',
    count: 3,
  },
  {
    id: 2,
    type: 'banana',
    count: 6,
  },
  {
    id: 3,
    type: 'blueberry',
    count: 9,
  },
];

.shift() | 移除第一筆​

| 移除陣列的第一筆 (開頭)

  • 移除並回傳(會回傳移除的元素)
  • 處理先進先出 (FIFO) 很好用 (queue)
const removePopData = arrayData.shift();
console.log(arrayData);

Result

// [object Array] (3)
[
  {
    id: 2,
    type: 'banana',
    count: 6,
  },
  {
    id: 3,
    type: 'blueberry',
    count: 9,
  },
  {
    id: 4,
    type: 'orange',
    count: 1,
  },
];

.splice() | 移除指定 index 元素​

| .splice(index, x) & .findIndex() 移除陣列指定索引以及筆數

  • 是透過 id 來找到正確的位置(index)，而不是直接使用 id 來刪除資料
const isBanana = 2;
const findBananaIndex = arrayData.findIndex(item => item.id === isBanana);
const deleteBanana = arrayData.splice(findBananaIndex, 1);
console.log(arrayData);

Result

[
  {
    id: 1,
    type: 'apple',
    count: 3,
  },
  {
    id: 3,
    type: 'blueberry',
    count: 9,
  },
  {
    id: 4,
    type: 'orange',
    count: 1,
  },
];