送给你的 JS 日常开发小技巧

常听人说，“面试造火箭，入职拧螺丝”。
冒昧问一下，大佬们一般都拧几圈，一天能拧几个呀？
我这有一份螺丝刀日常保养小技巧，希望您能帮忙看下能帮我每天多拧几个螺丝吗？

1. 动态添加 Object 属性

const condition = false

const person = {
  name: 'John Doe',
  ...(condition && { age: 18 }),
}

放心，在 Object 中 …false 不会有任何副作用。

2. Object 动态属性名

const dynamic = 'age'
const person = {
  name: 'jianguo.yang',
  [dynamic]: 18
}

console.log(person[dynamic]) // 18

3. 使用动态属性解构 Object

const dynamic = 'age'
const person = {
  name: 'jianguo.yang',
  age: 18
}

const { [dynamic]: personAge } = person
console.log(personAge) // 18

4. 校验 Array 中的假值

const persons = ['jian', 'guo', '', null, '.', 'yang']

const hasPerson = persons.some(Boolean) // true
const allPerson = persons.every(Boolean) // false
const realPerson = persons.filter(Boolean) // ['jian', 'guo', '.', 'yang']

5. Array 与 Object 互转

我相信拧螺丝绝对少不了它们的帮忙。

// 1. Array to Object
const persons = ['jian', 'guo', '.', 'yang']

console.log({...persons}) // {0: 'jian', 1: 'guo', 2: '.', 3: 'yang'}

// 2. Object to Array
const personMap = {0: 'jian', 1: 'guo', 2: '.', 3: 'yang'}

console.log(Object.keys(personMap)) // ['0', '1', '2', '3']
console.log(Object.values(personMap)) // ['jian', 'guo', '.', 'yang']
console.log(Object.entries(personMap)) // [['0', 'jian'], ['1', 'guo'], ['2', '.'], ['3', 'yang']]

6. 数组去重

我相信你们绝对可以说出10个以上，但我在厂里用第1个做去重，做质检的小妹都夸我写得少。

const persons = ['jian', 'guo', 'jian', null, null, '.', '', '']

console.log([...new Set(persons)])
console.log(Array.from(new Set(persons)))
console.log(persons.filter((name, i) => persons.indexOf(name) === i))

7. 不会还有人不知道可选链?.吧？

我不信。

const person = {
	name: 'jianguo.yang',
	age: 18
}

console.log(person.car?.name) // undefined
console.log(person.wife?.car?.name) // undefined
console.log(person.purse?.money?.print?.()) // undefined

8. 空值合并运算符??

const purse = 0

console.log(purse || 10000) // 10000

// 你是否在使用 || 时为遇到0而愤愤，那就用 ?? 吧
console.log(purse ?? 100000) // 0

// 它只处理 null 与 undefined
console.log(null ?? 100000) // 100000
console.log(undefined ?? 100000) // 100000

9. 逻辑赋值运算符

let purse = {
	money: 0,
	cards: 0
}

9.1. ||= 逻辑或赋值运算符

purse.money ||= 10000 // purse -> { money: 10000, cards: 0 }
// 即
purse.money || (purse.money = 10000)

9.2. &&= 逻辑与赋值运算符

purse.money &&= 10000 // purse -> { money: 0, cards: 0 }
// 即
purse.money && (purse.money = 10000)

9.3. ??= 空值合并赋值运算符

purse.money ??= 10000 // purse -> { money: 0, cards: 0 }
// 即
purse.money ?? (purse.money = 10000)

purse.ID ??= 'jianguo.yang' // purse -> { money: 0, cards: 0, ID: 'jianguo.yang' }

10. 数字分隔符

看到这，请问您有简单算了一下上面钱包里的钱有多少个 0 吗🤦‍♂️？

其实 ES12 早已经支持数字分隔符号_来提升数字可读性啦！

const money = 1000_000_000

console.log(money === 1000000000) // true

11. URL 查询参数

// location.search = "?name=jianguo&age=18"
const params = new URLSearchParams(location.search.replace(/\?/ig, ""))
params.has("name"); // true
params.get("age"); // 18

12. 组件传参

你是否还在为一个个向下传递的属性伤透脑经？

<Person name={name} age={age} />

// 试试这样？
<Person {...{name, age}} />

还有一个小彩蛋🎉

打开控制台，输入以下代码试试看效果？（我不信我是最后一个知道的！！！）

document.designMode = 'on'