###### 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']
```

## 陣列(找到/移除)相同值
```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)
```
