JavaScript Coding CheatSheet 80/20 法則的應用
2022-05-10
筆記 JavaScript 開發前一定要複習的重要物件操作技巧，筆記精要的整理出 20% 的語法與功能，能夠活用在 80% 的使用情境。能夠減少開發時對於語法的生澀與卡卡的感覺，讓功能的簡潔實踐想得到，也活用原生語法特性做得出來 😉
說明
Array Basic
Array
'Remove all falsy values'
[0, 1, false, 2, '', 3].filter(Boolean)
// [1, 2, 3]
'Array Concat'
[].concat(1, [2], [[3], 4], [[5]])
// [1, 2, [ 3 ], 4, [ 5 ]]
'Array Intersection'
[1, 2, 3, 4, 5].filter(e => [2,5,6].includes(e))
// [2, 5]
'Array Intersection with Set, Performance Better'
[1, 2, 3, 4, 5].filter(e => new Set([2,5,6]).has(e))
// [2, 5]
'⭐ Multiple Array Intersection'
let arrays = [[1, 2, 3], [128, 2, 1], [32, 1, 2]];
arrays.reduce((a, b) => a.filter(c => b.includes(c)))
// [1, 2]
'Array Difference'
[1, 2, 3, 4, 5].filter(e => ![2,5,6].includes(e))
// [1, 3, 4]
'Array Distinct'
[...new Set([1, 2, 2, 3, 5, 1, 6])]
// 🚀 [1, 2, 3, 5, 6]
[1, 2, 2, 3, 5, 1, 6].filter((val, index, self) => self.indexOf(val) === index)
// 💡 [1, 2, 3, 5, 6]
'Array Fill'
[[1], 0, 0].fill([0, 0])
// [[0, 0], [0, 0], [0, 0]]
'Array Elements Join to String with separator'
['foo', 'bar', 'baz'].join(', ')
// foo, bar, baz
'Reverse Array'
[1, 2, 3].reverse()
// [3, 2, 1]
'Flatten Array'
[].concat(...[1, [2, [3, [4]], 5]])
// [1, 2, [3, [4]], 5]
[1, [2, [3, [4]], 5]].flat()
// [1, 2, [3, [4]], 5]
[1, [2, [3, [4]], 5]].flat(Infinity))
// [1, 2, 3, 4, 5]Object
{
"0": {"name": "Link", "hp": 25, "atk": 9},
"1": {"name": "Kirby", "hp": 55, "atk": 3},
"2": {"name": "Mario", "hp": 33, "atk": 6},
}Object Manipulation
let data = require('./quesbank.json')
'Access Data'
data['1']
'Add Aata'
data[0] = {'meaning': 'wow'}
'Modify Data'
data[0].meaning = ''
'Del Data'
delete data[0][
{ name: 'Link', hp: 25, atk: 9 },
{ name: 'Kirby', hp: 55, atk: 3 },
{ name: 'Mario', hp: 33, atk: 6 }
]'Type Detection'
Array.isArray([])
// true
Array.isArray({})
// false
'Key-Values Pairs Array to Object'
console.log(Object.fromEntries([['hp', 15], ['atk', 3]]));
console.log('\nAll Keys');
console.log(Object.keys(data));
console.log('\nAll Values');
console.log(Object.values(data));
console.log('\nProperties to Array');
console.log(Object.values(data).map(e => e.word));
console.log('\nAdd Properties to Object');
Object.values(data).forEach(e => e['p'] = undefined)
// ...
console.log('\nDelete Properties from Object');
Object.values(data).forEach(e => delete e['p'])
// ...
console.log('\nFilter Object with Properties');
console.log(Object.values(data).filter(e => e.qno > 3));
console.log('\nCount Properties');
console.log(Object.values(data).filter(e => e.qno > 3).length);使用 chance
負責處理亂數抽取的工作，因為寫 Math.Random 心太累
npm init
npm install chance
var Chance = require('chance');
var chance = new Chance();console.log('\nPick and Set Object Properties');
pick = chance.pickone(Object.values(data))
pick['p'] = true
console.log(data);
console.log('\nPick with filter');
sets = chance.pickset(Object.values(data).filter(e => e != pick), 3)
console.log(sets);