10 个 JavaScript 代码简写技巧总结

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 (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");

现在你不需要写很多console.log()了，我们可以用c()来代替它，因为这样更容易写，调试速度更快。