10个你不能错过的JavaScript技巧

逃离我推掉我的手 2022-08-31 07:27 203阅读 0赞

![f157ecad7e069d58e2317e2863962bb1.png][]

原文 | https://levelup.gitconnected.com/handy-javascript-shorthands-9ad9cc76d06d

翻译 | 杨小二

在最新版的JavaScript 中，JavaScript 语言引入了更多的有用语法。在本文中，我将介绍几个在JavaScript新旧版本中易于阅读的技巧。我们将从三元运算符、声明多个变量、箭头函数、默认参数值等方面开始。

**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";
      }
    }

**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;
    }

**3、声明多个变量的简写**

我们可以通过编写来声明多个变量：

let x = y = z = 5;

这与下面代码一样：

let x = 5;
    let y = 5;
    let z = 5;

它的工作原理是，首先将 5 分配给 z，然后将 z 的值分配给 y，最后将 y 的值分配给 x 。

**4、If Truthy**

检查某些东西是否为真的JavaScript简写，它不是 undefined、null、0、空字符串或 NaN，如下所示：

if (x){
     console.log('x is truthy')
    }

上面的代码检查 x 是否为真，如果是，则执行 console.log。

**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);
    }

**5、****Array.fo****rEach**

我们可以使用 Array.forEach 方法来遍历数组，尽管它比循环慢。

要使用它，我们可以编写如下代码：

let fruits = ['apple', 'orange', 'grape'];
    fruits.forEach((fruit, index) => console.log(fruit));

**6、十进制底指数**

我们可以指定指数，而不是写出带有所有尾随零的整数。

例如，如果我们有：

1e0

为1

1e1

1e2

100

1e3

为 1000 等。

**7、数字分隔符**

最新的浏览器允许我们使用下划线来分隔数字，以便于阅读。例如，我们可以写：

100_000_000

一亿，下划线可以放在我们选择的任何地方。

**8、对象属性简写**

而不是写：

const foo = 1,
      bar = 2;
    const obj = {
      foo: foo,
      bar: bar
    };

我们可以写：

const foo = 1,
      bar = 2;
    const obj = {
      foo,
      bar
    };

两段代码完全一样。

**9、箭头函数**

如果箭头函数只有一行，那么我们就不需要大括号，我们可以在不使用 return 关键字的情况下从它返回一个值。

例如：

() => 1

与下面代码是相同的：

() => {
      return 1
    }

如果我们不关心 this 的值，我们可以使用箭头函数，因为箭头函数不会改变函数内部的 this 值。

**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
    }

上面的技巧大多来自 ES6。这个版本的 JavaScript 提供了许多快捷的方式方法，可以让我们更轻松地编写代码和阅读。

for...of 循环非常有用，因为它可以遍历数组和类似数组的对象。没有其他循环可以做到这一点。

数字分隔符较新，仅在最新浏览器中可用。

最后，感谢你的阅读。

#  #

**学习更多技能**

**请点击下方公众号**

![2fecbbb38ec687db0f8651053b36c4e3.gif][]

![e3b02bd975c4b98ffbf5732a9796ec47.png][]

![2ba0cca1d1b87f2aa9d8ae17f486b70f.png][]

[f157ecad7e069d58e2317e2863962bb1.png]: /images/20220829/b91829577f54414496914d419d8f035f.png
[2fecbbb38ec687db0f8651053b36c4e3.gif]: /images/20220829/02d612b8146c47d7a50dd3b381bc8bef.png
[e3b02bd975c4b98ffbf5732a9796ec47.png]: /images/20220829/5ef8ecf013064714a5960841c02f8a1d.png
[2ba0cca1d1b87f2aa9d8ae17f486b70f.png]: /images/20220829/b0a0ac3b2f4a4659a72b98592084f37e.png