---
# System prepended metadata

title: 陣列實戰
tags: [JavaScript]

---

###### tags: `JavaScript`

# 陣列實戰

## 陣列某數相加
```javascript=
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
// reduce((a, b) => a + b, 0); 0 = 起始值
let price = cart.map((item) => item.total).reduce((a, b) => a + b, 0);
console.log(price); // 1000 + 2000 + 500 = 3500
```
## 陣列底下的陣列中物件某數相加
https://stackoverflow.com/questions/24444738/sum-similar-keys-in-an-array-of-objects
```javascript=
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 = []
// 處理後送到 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
//   }
// ]
```

## 陣列取最大值
```javascript=
const values = [1, 2, 300, 5, 6];
console.log( Math.max(...values)); // 300
```

## 陣列統計 skills 並移除重複值並排序
```javascript=
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(function (allSkills, student) {
  return new Set([...allSkills, ...student.skills]);
}, []);

const result2 = developers.reduce(function (allSkills, student) {
  return Array.from(new Set([...allSkills, ...student.skills]));
}, []);

// 縮寫
// 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']
```
![](https://i.imgur.com/ZuIFOk5.png)

## 陣列(找到/移除)相同值
```javascript=
const a = [
  {
    id: 1,
    name: '類型',
    key: 'type',
    show: true,
  },
  {
    id: 2,
    name: '投注編號',
    key: 'serialNumber',
    show: true,
  },
  {
    id: 3,
    name: '桌 / 靴 / 局',
    key: 'tableName',
    show: true,
  },
]

const b = ['type', 'tableName']
const c = a.filter(item => b.indexOf(item.key) !== -1)
const d = a.filter(item => b.indexOf(item.key) === -1)
```

![](https://i.imgur.com/YmSK9vI.png)
