JavaScript Array 實戰用法

發表於 分類於
這篇會介紹 JavaScript 實際應用中的陣列操作，包括計算總和、統計技能、找出最大值等，幫助開發者在日常編程中更高效地使用 JavaScript 陣列。

陣列某數相加

計算購物車中的所有商品總價。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
let cart = [
    {
        final_total: 1000,
        id: '-MuukdVMGpp1N2qWpLCi',
        product: {
          num:1
        },
        product_id: '-MrqF6_cBLw8r2klq2xF',
        qty: 2,
        total: 1000,
    },
    {
        final_total: 2000,
        id: '-MuukdxAR0diJfsf1g_Y',
        product: {
          num:1
        },
        product_id: '-MsDLuC3zDUsalUMzm2w',
        qty: 3,
        total: 2000,
    }, 
    {
        final_total: 500,
        id: '-MuumZnqYPyEOVX1BGzS',
        product: {
          num:1
        },
        product_id: '-MrgpCOiALq9tT5Uu4vv',
        qty: 5,
        total: 500,
    }
];

// 計算 cart 裡面的 total
let price = cart.map((item) => item.total).reduce((a, b) => a + b, 0);
console.log(price); // 3500

陣列底下的陣列中物件某數相加

計算具有相同 text 的 num 值總和。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const data = [
  {
    id: 1,
    u: 10,
    total: [
      {
        text: '1',
        num: 99,
      }
    ]
  },
  {
    id: 1,
    u: 12,
    total: [
      {
        text: '1',
        num: 100,
      }
    ]
  },
  {
    id: 2,
    total: [
      {
        text: '2',
        num: 50,
      }
    ]
  },
  {
    id: 1,
    u: 19,
    total: [
      {
        text: '3',
        num: 11,
      }
    ]
  },
]

const dataTemp = [];
const filterData = data.filter(i => i.id === 1).map(m => dataTemp.push(...m.total));

// 計算相同的 text 相加
const res = Array.from(dataTemp.reduce((m, { text, num }) => m.set(text, (m.get(text) || 0) + num), new Map), ([text, num]) => ({ text, num }));

console.log(res);
// [
//   { "text": "1", "num": 199 },
//   { "text": "3", "num": 11 }
// ]

陣列取最大值

尋找陣列中的最大值。

1
2
const values = [1, 2, 300, 5, 6];
console.log(Math.max(...values)); // 300

陣列統計 skills 並移除重複值並排序

統計所有開發者的技能，並移除重複值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const developers = [
  {
    id: 1,
    name: "John",
    skills: ["HTML", "React", "Javascript", "Java"],
  },
  {
    id: 2,
    name: "Jane",
    skills: ["HTML", "CSS", "JavaScript", "React", "Redux", "NodeJS"],
  },
  {
    id: 3,
    name: "Jack",
    skills: ["HTML", "CSS", "JavaScript", "React", "Redux", "NodeJS"],
  },
];

const result1 = developers.reduce((allSkills, student) => new Set([...allSkills, ...student.skills]), []);
const result2 = developers.reduce((allSkills, student) => Array.from(new Set([...allSkills, ...student.skills])), []);

console.log(result1); // {'HTML', 'React', 'Javascript', 'Java', 'CSS', 'JavaScript', 'Redux', 'NodeJS'}
console.log(result2); // ['HTML', 'React', 'Javascript', 'Java', 'CSS', 'JavaScript', 'Redux', 'NodeJS']

陣列(找到/移除)相同值

找到陣列中符合特定鍵的項目，並分為兩個陣列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const data = [
  {
    id: 1,
    name: '類型',
    key: 'type',
    show: true,
  },
  {
    id: 2,
    name: '價格',
    key: 'price',
    show: true,
  },
  {
    id: 3,
    name: '名稱',
    key: 'name',
    show: true,
  },
]
const selectedKeys = ['type', 'name'];
const findMatches = data.filter(item => selectedKeys.indexOf(item.key) !== -1); // 找到相同值
const removeDuplicates = data.filter(item => selectedKeys.indexOf(item.key) === -1); // 移除相同值
console.log(findMatches);
console.log(removeDuplicates);

filter() & match() - 搜尋陣列

以下範例展示如何使用 filter() 和 match() 方法來搜尋陣列中的特定項目。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const list = [
  ['小明', '小小明', '小明明'],
  ['小華', '小小華', '小華華'],
  ['小美', '小小美', '小美美'],
];

// 使用展開運算符將二維陣列展平為一維陣列
const newList = [].concat(...list);
// newList = ['小明', '小小明', '小明明', '小華', '小小華', '小華華', '小美', '小小美', '小美美']

// 使用 filter() 和 match() 搜尋包含 "小小" 的項目
const result = newList.filter((value) => value.match('小小'));

console.log(result); // 輸出: ["小小明", "小小華", "小小美"]