阅读 411

[十减四景病] 六个我用来装逼的 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 一样,人有人的好处啊。大概列一下就是三点:

  1. 你这么写,参数的顺序就随便了。——后期就不用一直看函数的注释之类的了!
  2. 自动补全就会很简单,编辑器开心了你就开心了;
  3. 以更加明确的一种方式表达出来了

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

文章分类
前端
文章标签