10 个 JavaScript 简洁代码小技巧(文末彩蛋)

·  阅读 126
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 就更完美了。

分类:
前端
标签:
分类:
前端
标签: