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

原作者：Ibeh Ubachukwu
原文链接：dev.to/redbossrabb…
翻译/加工：零和幺

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 就更完美了。