處理陣列的方法

提示

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

備註

不定期更新中

陣列

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,
  },
];

.sort()

| 將陣列進行排序

• .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, 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,
  },
];

---

.map()

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

• 寫 React 超常使用
• 很常用來運算後產生新陣列
• 列出數量大於 5 的

const newData = arrayData.map((item) => {
  return item.count > 5;
})
console.log(newData);

Result

[false,true,true,false]