JavaScript Coding CheatSheet 80/20 法則的應用


  1. 說明
    1. Array Basic
    2. Array
    3. Object
    4. 使用 chance
  2. 參考資料

筆記 JavaScript 開發前一定要複習的重要物件操作技巧,筆記精要的整理出 20% 的語法與功能,能夠活用在 80% 的使用情境。能夠減少開發時對於語法的生澀與卡卡的感覺,讓功能的簡潔實踐想得到,也活用原生語法特性做得出來 😉

JavaScript logo

說明

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

參考資料

You-Dont-Need-Lodash-Underscore