###### 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)