[十减四景病] 六个我用来装逼的 JavaScript 奇技淫巧

关于标题的解释：我一开始想写十个技巧，结果只写出来六个；我就一直想凑。后来我想想觉得好笑，这不就是鲁迅说的十景病嘛，于是就加上了个 [十减四景病] —— 毕竟还是没写到十个。

我的 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 数字提供了一种真的真的很优雅的解决方案。