改变编写 JavaScript 代码的旧方法 - JavaScript 代码的简写

2025-05-27

改变编写 JavaScript 代码的旧方法 - JavaScript 代码的简写

1. 带有多个 OR(||) 条件的 if 的简写

if (car === 'audi' || car === 'BMW' || car === 'Tesla') {
    //code
}
Enter fullscreen mode Exit fullscreen mode

传统上，我们习惯按照上述模式编写代码。但现在，我们不再使用多个“或”条件，而是直接使用数组并包含。请查看以下示例。

if (['audi', 'BMW', 'Tesla', 'grapes'].includes(car)) {
   //code
}
Enter fullscreen mode Exit fullscreen mode

2. 带有多个 And(&&) 条件的 if 的简写

if(obj && obj.tele && obj.tele.stdcode) {
    console.log(obj.tele .stdcode)
}
Enter fullscreen mode Exit fullscreen mode

使用可选链（？。）来替换此代码片段。

console.log(obj?.tele?.stdcode);
Enter fullscreen mode Exit fullscreen mode

3. 检查变量是否为 null、undefined 和空值的简写

if (name !== null || name !== undefined || name !== '') {
    let second = name;
}
Enter fullscreen mode Exit fullscreen mode

简单的方法是...

const second = name || '';
Enter fullscreen mode Exit fullscreen mode

4. switch case 的简写，用于从多个选项中进行选择

switch (number) {
  case 1:
     return 'Case one';
  case 2:
     return 'Case two';
  default:
     return;
}
Enter fullscreen mode Exit fullscreen mode

使用地图/对象

const data = {
  1: 'Case one',
  2: 'Case two'
};
//Access it using
data[num]
Enter fullscreen mode Exit fullscreen mode

5. 单行函数的简写

function example(value) {
  return 2 * value;
}
Enter fullscreen mode Exit fullscreen mode

使用箭头函数

const example = (value) => 2 * value
Enter fullscreen mode Exit fullscreen mode

6. 条件调用函数的简写

function height() {
    console.log('height');
}
function width() {
    console.log('width');
}
if(type === 'heigth') {
    height();
} else {
    width();
}
Enter fullscreen mode Exit fullscreen mode

简单的方法

(type === 'heigth' ? height : width)()
Enter fullscreen mode Exit fullscreen mode

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

if(amount === null) {
    amount = 0;
}
if(value === undefined) {
    value = 0;
}
console.log(amount); //0
console.log(value); //0
Enter fullscreen mode Exit fullscreen mode

只写

console.log(amount || 0); //0
console.log(value || 0); //0
Enter fullscreen mode Exit fullscreen mode
文章来源：https://dev.to/devsimc/change-your-old-methods-for-writing-a-javascript-code-shorthands-for-javascript-code-54hp
Devto 翻译
PREV
宣布完善 + DEV Hackathon！
NEXT
改变编写 JavaScript 代码的旧方法 - JavaScript 代码的简写