level 10
在最新版的JavaScript 中,JavaScript 语言引入了更多的有用语法。在本文中,我将介绍几个在JavaScript新旧版本中易于阅读的技巧。我们将从三元运算符、声明多个变量、箭头函数、默认参数值等方面开始。
2021年09月17日 11点09分
2
level 10
1、三元运算符
我们可以使用三元运算符以简洁的方式编写 if...else 语句。
而不是写:
const x = 20;let grade;if (x >= 50) {grade = "pass";} else {grade = "fail";}
我们可以写:
const x = 20;let grade = (x >= 50) ? "pass" : "fail";
他们都检查 x 是否大于或等于 50,然后分配字符串 'pass' 如果为真,否则为假。
我们还可以使用三元运算符编写嵌套的 if 语句,如下所示:
const x = 20;let grade = (x >= 50) ? "pass" : (x >= 25) ? "good fail" : 'bad fail';
这与下面代码一样:
const x = 20;let grade;if (x >= 50) {grade = "pass";} else {if (x >= 25) {grade = "good fail"; } else {grade = "bad fail"; }}
2021年09月17日 11点09分
3
level 10
2、设置默认值
如果变量为假,我们可以通过编写以下内容来设置默认值:
let x;let y = x || 10;
这与下面代码一样:
let x;let y;if (x === undefined || x === null || x === 0 || x === '' || isNaN(x)) { y = 10;}
因为 x || 10 表示如果 x 为假,即 x 为 undefined、null、0、空字符串或 NaN,那么我们将 10 赋值给 y,这与:
if (x === undefined || x === null || x === 0|| x === ''|| isNaN(x)) { y = 10;}
2021年09月17日 11点09分
4
level 10
3、声明多个变量的简写
我们可以通过编写来声明多个变量:
let x = y = z = 5;
这与下面代码一样:
let x = 5;let y = 5;let z = 5;
它的工作原理是,首先将 5 分配给 z,然后将 z 的值分配给 y,最后将 y 的值分配给 x 。
2021年09月17日 11点09分
5
level 10
4、If Truthy
检查某些东西是否为真的JavaScript简写,它不是 undefined、null、0、空字符串或 NaN,如下所示:
if (x){console.log('x is truthy')}
上面的代码检查 x 是否为真,如果是,则执行 console.log。
2021年09月17日 11点09分
6
level 10
5、For...Of 循环简写
从 ES6 开始,我们可以使用 for...of 循环来遍历数组或类数组对象中的变量,其中包括 Maps、Sets、参数对象、生成器、迭代器以及任何带有 [Symbol.iterator]方法。
我们可以写:
let fruits = ['apple', 'orange', 'grape'];for (let fruit of fruits) {console.log(fruit);}
这比使用带有索引的常规 for 循环更干净,并且它也适用于其他可迭代对象。例如,我们可以将它与生成器一起使用:
let fruits = function*() {yield'apple';yield'orange';yield'fruits';}for (let fruit of fruits()) {console.log(fruit);}
2021年09月17日 11点09分
7
level 10
5、Array.forEach
我们可以使用 Array.forEach 方法来遍历数组,尽管它比循环慢。
要使用它,我们可以编写如下代码:
let fruits = ['apple', 'orange', 'grape'];fruits.forEach((fruit, index) =>console.log(fruit));
2021年09月17日 11点09分
8
level 10
6、十进制底指数
我们可以指定指数,而不是写出带有所有尾随零的整数。
例如,如果我们有:
1e0
为1
1e1
10
1e2
100
1e3
为 1000 等。
2021年09月17日 11点09分
9
level 10
7、数字分隔符
最新的浏览器允许我们使用下划线来分隔数字,以便于阅读。例如,我们可以写:
100_000_000
一亿,下划线可以放在我们选择的任何地方。
2021年09月17日 11点09分
10
level 10
8、对象属性简写
而不是写:
constfoo = 1,bar = 2;constobj = {foo: foo,bar: bar};
我们可以写:
constfoo = 1,bar = 2;constobj = {foo,bar};
两段代码完全一样。
2021年09月17日 11点09分
11
level 10
9、箭头函数
如果箭头函数只有一行,那么我们就不需要大括号,我们可以在不使用 return 关键字的情况下从它返回一个值。
例如:
() => 1
与下面代码是相同的:
() => {return1}
如果我们不关心 this 的值,我们可以使用箭头函数,因为箭头函数不会改变函数内部的 this 值。
2021年09月17日 11点09分
12
level 10
10、默认参数值
我们可以在 ES6 中指定默认参数值。例如,我们可以这样写:
const add = (a = 1, b = 2) => {return a + b}
这与下面代码一样:
const add = (a, b) => {if (typeof a === 'undefined') { a = 1; }if (typeof b === 'undefined') { b = 1; }return a + b}
2021年09月17日 11点09分
13
level 10
上面的技巧大多来自 ES6。这个版本的 JavaScript 提供了许多快捷的方式方法,可以让我们更轻松地编写代码和阅读。
for...of 循环非常有用,因为它可以遍历数组和类似数组的对象。没有其他循环可以做到这一点。
数字分隔符较新,仅在最新浏览器中可用。
最后,感谢你的阅读。
2021年09月17日 11点09分
14