10 个 JavaScript 简洁代码小技巧（文末彩蛋）

关注

发布于: 2021 年 01 月 27 日

原作者：Ibeh Ubachukwu
原文链接：https://dev.to/redbossrabbit/10-clean-code-examples-javascript-37kj
翻译/加工：零和幺

1. 用三元表达式给变量赋值

❌a > b ? foo = 'apple' : foo = 'ball';
✅foo = a > b ? 'apple' : 'ball';

复制代码

2. 根据条件，给对象的不同属性赋相同的值

❌c > d ? a.foo = 'apple' : a.bar = 'apple';
✅a = { [c > d ? 'foo' : 'bar']: 'apple' };

复制代码

3. 导出多个变量

❌export const foo;export const bar;export const kip;
✅export const foo, bar, kip;

复制代码

4. 用对象的属性给变量赋值

❌const a = foo.x, b = foo.y;
✅const { ['x']: a, ['y']: b } = foo;

复制代码

5. 用数组的索引给变量赋值

❌let a = foo[0], b = foo[1];
✅let [a, b] = foo;

复制代码

6. 在 DOM 中获取多个元素

❌const a = document.getElementById('a'),b = document.getElementById('b'),c = document.getElementById('c'),d = document.getElementById('d');
✅const elements = {};['a', 'b', 'c', 'd'].forEach(item => elements = {  	...elements,  	[item]: document.getElementById(item)});const { a, b, c, d } = elements;
/*代码如果想正常工作，你的元素 ID 必须是一个合法的 JavaScript 变量名并且存储元素的变量名必须与元素 ID 名保持一致*/

复制代码

7. 用逻辑操作符代替简单的 if 语句

❌if (foo) {  	doSomething();}
✅foo && doSomething();

复制代码

8. 根据条件传递参数

❌if (!foo) {  	foo = 'apple';}bar(foo, kip);
✅bar(foo || 'apple', kip);

复制代码

9. 处理很多 0 的情况

❌const SALARY = 150000000,TAX = 15000000;
✅const SALARY = 15e7,TAX = 15e6;

复制代码

10. 给多个变量赋同一个值

❌a = d;b = d;c = d;
✅a = b = c = d;

复制代码

彩蛋

使用对象结构赋值，可以省去写很多遍 console.log() 的烦恼。

const { ['log']: c } = console;c('something');

复制代码

现在你只需要用 c() 就可以快速的调试代码啦！

（完）

**你的点赞会给我一天好心情，如果能顺手来个 star，再顺便关注下公众号 [零幺小馆](https://mp.weixin.qq.com/s/ArTFBufmBx2rLIK-sVI0IQ) 就更完美了。**

发布于: 2021 年 01 月 27 日阅读数: 23

零和幺

关注

公粽号：零幺小馆。 API 调用师，CV 工程师 2017.10.17 加入

还未添加个人简介

发布

暂无评论

创作场景

10 个 JavaScript 简洁代码小技巧（文末彩蛋）

零和幺

评论