关于标题的解释:我一开始想写十个技巧,结果只写出来六个;我就一直想凑。后来我想想觉得好笑,这不就是鲁迅说的十景病嘛,于是就加上了个 [十减四景病] —— 毕竟还是没写到十个。
我的 GitHub:github.com/KnowsCount
我的 Twitter:twitter.com/KnowsCount
ES6 以来,JavaScript 已经基本上(自信点把基本上去掉)成了最受欢迎的语言。导致现在做前端,整天看到的就是 JavaScript;用 Node.js 做后端,整天看到的还是 JavaScript。
那整天写着一样的东西咱也不爽啊……整天见到旁边一群人写着一样的东西咱也不鹤立鸡群啊……所以,我们得整点活,跟你的同事同学们装个逼。
那么,我们就开始吧?
1. 解构
const createFoo = ({ name, description, foobar }) => {
// 创建 Foo
}
createFoo({
name: 'foo',
description: 'a placeholder',
foobar: 'foobar! foobar!',
})
虽然可能长了点,但是和 TypeScript 一样,人有人的好处啊。大概列一下就是三点:
- 你这么写,参数的顺序就随便了。——后期就不用一直看函数的注释之类的了!
- 自动补全就会很简单,编辑器开心了你就开心了;
- 以更加明确的一种方式表达出来了
2. 使用 generator 来创建(持续增长的) ID
function* fooGenerator() {
let i = 0
while (true) {
yield i++
}
}
const generateFoo = fooGenerator()
console.log(generateFoo.next().value) // 0
console.log(generateFoo.next().value) // 1
console.log(generateFoo.next().value) // 2
就不多说了;ES6 永远滴神。妈妈再也不用担心我依赖全局/类作用域变量了。
3. 使用可选链操作符
const foo = {
name: 'Foo',
description: 'yet another placeholder',
onChangeCallback: () => {
// 处理
return { status: 'OK' }
},
}
console.log(foo?.cat) // undefined
console.log(foo.onChangeCallback?.()) // { status: 'OK' }
console.log(foo.onChangeCallback?.()) // undefined
凡人只会用 if
和短路表达式。呵,我们装逼人当然是这么写的。更简洁地写出来了同样的效果,谁不喜欢呢?
4. 使用展开运算符来浅拷贝对象和数组
const numbers = [1, 2, 3, 4, 5, 6, 7, 8]
const foo = {
name: 'foo',
bar: false
}
console.log([...numbers, 9, 10])
console.log({ ...foo, bar: true})
console.log({ ...foo, foobar: 1})
这么简单就能浅拷贝对象,是不是能用在现实生活中就好了。
当然,不仅仅是浅拷贝,还支持扩展对象或数组;更是一个连接数组或合并对象的好方法——咱不用手动迭代了嘛。我又可以偷懒了。
使用 Set 删除数组中的重复数据
const numbers = [1, 2, 2, 2, 3, 3, 3, 4, 4, 5, 6, 7, 8, 8]
const stuff = [
'table',
'chair',
'human',
'human',
'human',
'book',
'computer',
'computer',
]
const uniqueNumbers = [...new Set(numbers)]
const uniqueStuff = [...new Set(stuff)]
console.log(uniqueNumbers) // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(uniqueStuff) // ['table', 'chair', 'human', 'book', 'computer']
这个对任何类型的值都非常有效,大赞!它甚至可以处理 JavaScript 的一些奇怪的 equality 行为……反正:简单、有效、单线程。
使用 map 对数组中的数值进行类型转换
const numbers = [[4.439406], '1', '2', '3', '346.356446', '-4026.3241']
const castedNumbers = numbers.map(Number)
console.log(castedNumbers) // [4.439406, 1, 2, 3, 346.356446, -4026.3241]
这可能是本文中最简单的奇技淫巧,但是它为将以字符串表示的数值数组转换为 JavaScript 数字提供了一种真的真的很优雅的解决方案。