更改编写 JavaScript 代码的旧方法 - JavaScript 代码的速记

, , ,

1. 如果有多个OR（||）条件的简写

1
2
3
if (car === 'audi' || car === 'BMW' || car === 'Tesla') {
    //code
}

在传统的方式中，我们曾经以上述模式编写代码。 但是我们可以简单地使用数组并包含而不是使用多个 OR 条件。 看看下面的例子。

1
2
3
if (['audi', 'BMW', 'Tesla', 'grapes'].includes(car)) {
   //code
}

2. 如果有多个 And（&&） 条件的简写

1
2
3
if(obj && obj.tele && obj.tele.stdcode) {
    console.log(obj.tele .stdcode)
}

使用可选的链接 (?.) 替换此代码段。

1
console.log(obj?.tele?.stdcode);

3. 用于检查变量的空值、未定义值和空值的简写

1
2
3
if (name !== null || name !== undefined || name !== '') {
    let second = name;
}

做到这一点的简单方法是…

1
const second = name || '';

4.开关盒的简写，可从多个选项中进行选择

1
2
3
4
5
6
7
8
switch (number) {
  case 1:
     return 'Case one';
  case 2:
     return 'Case two';
  default:
     return;
}

使用地图/对象

1
2
3
4
5
6
const data = {
  1: 'Case one',
  2: 'Case two'
};
//Access it using
data[num]

5. 单行函数的简写

1
2
3
function example(value) {
  return 2 * value;
}

使用箭头功能

1
const example = (value) => 2 * value

6. 有条件调用函数的简写

1
2
3
4
5
6
7
8
9
10
11
function height() {
    console.log('height');
}
function width() {
    console.log('width');
}
if(type === 'heigth') {
    height();
} else {
    width();
}

简单的方法

1
(type === 'heigth' ? height : width)()

7. 使用 if 将默认值设置为变量的简写

1
2
3
4
5
6
7
8
if(amount === null) {
    amount = 0;
}
if(value === undefined) {
    value = 0;
}
console.log(amount); //0
console.log(value); //0

只需写入

1
2
console.log(amount || 0); //0
console.log(value || 0); //0