介绍 JavaScript 现代实践

本文将向您介绍 WebStorm 提供的编码辅助功能如何帮助您在现代 JavaScript 中遵循关键的最佳做法，以实现更清晰、更易维护且更高性能的代码。

在处理旧的代码库时，您可能会遇到一些过时的模式和做法。 WebStorm 可通过高亮显示此类模式并建议快速修复来为您提供帮助。

使用 let 和 const 声明变量

let 和 const 提供块作用域，相比函数作用域的 var，更具可预见性并能减少意外错误。

虽然在旧代码中 var 声明可能是有意为之，但也可能源于旧的编程方式。

WebStorm 会检测 var 的用法，并建议将其替换为 let 或 const。

将光标悬停在高亮显示的 var 声明上，然后点击转换为 const 链接。
将光标放在 var 声明处，按 Alt+Enter 键，然后从弹出列表中选择转换为 let 或转换为 const。

示例

for (let j = 1; j < 5; j++) {
    console.log(j);
}
console.log(j);
/*You get 'Uncaught ReferenceError: j is not defined'*/

/*If we did this using var:*/
for (var j = 1; j < 5; j++) {
    console.log(j);
}
/* logs the numbers 1 to 4*/
console.log(j);
/*You’d get 5 as it still exists outside the loop*/

        
   

使用 Class 替代 Function：prototype

虽然在许多旧代码库中，您可能会遇到函数原型的类模拟方法，但建议使用 class ，因为其语法更简洁。

 function Person(name) {
     this.name = name;
 }
 Person.prototype.getName = function () {
     return this.name;
 }

 const p = new Person('A');
 console.log(p.getName()); // 'A'
                
    

class Person {
    constructor(name) {
        this.name = name;
    }

    getName() {
        return this.name;
    }
}

const p = new Person('A');
console.log(p.getName()); // 'A'
                
    

WebStorm 建议一个重构操作，您可以通过转换为 class 上下文操作调用该操作。

将光标放在要转换的函数名称处，然后按 Alt+Enter。
从列表中选择转换为 class。
在重构预览中，查看建议的更新，然后在准备就绪后点击重构。

使用箭头函数表达式

箭头函数提供更简洁的语法，并自动绑定 this 上下文，在类方法中 this 容易丢失的情况下尤其有帮助。

   const numbers = [1, 2];

   numbers.map(function (num) {
       return num * 2;
   });

const numbers = [1, 2];

numbers.map(num => num * 2);

借助 WebStorm，您可以使用专用的上下文操作引入箭头函数。

将文本光标放在匿名函数中并按 Alt+Enter。
从弹出列表中选择转换为箭头函数。

使用可选链

可选链运算符（?. ）会在访问属性、数组元素或方法之前，自动检查其是否存在。如果链中任一部分为 null 或 undefined ，则返回 undefined ，而不是抛出错误。不使用可选链时，该检查需要冗长且重复的代码。

const guest = {
    name: "John Doe",
    son: {
        name: "Ben"
    },
    daughter: {
        name: "Catherine"
    }
};

const daughterName = (guest.daughter && guest.daughter.name) ?? undefined;
const sisterName = (guest.sister && guest.sister.name) ?? undefined;
console.log(daughterName);
console.log(sisterName);
                
    

const guest = {
    name: "John Doe",
    son: {
        name: "Ben"
    },
    daughter: {
        name: "Catherine"
    }
};

const daughterName = (guest.daughter?.name) ?? undefined;
const sisterName = (guest.sister?.name) ?? undefined;
console.log(daughterName);
console.log(sisterName);
                
    

WebStorm 建议使用上下文操作引入 ?. 运算符。

将文本光标放在要转换的表达式处然后按 Alt+Enter。
从弹出列表中选择使用可选链。

使用 async/await 语法

async/await 语法通过避免链式调用 .then() 和 .catch() ，简化了异步操作的处理。它使您的代码更易读、更易维护，尤其是在处理多个异步调用时更容易理解。

function fetchData() {
    return fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            console.log(data);
        })
        .catch(error => {
            console.error(error);
        });
}
                
    

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}
                
    

借助 WebStorm，您可以通过转换为异步函数上下文操作将 async/await 语法引入到代码中。

将文本光标放在要引入 async/await 语法的函数处并按 Alt+Enter。
从弹出列表中选择转换为同步函数。

使用严格相等（===）

使用严格相等（=== ）替代宽松相等（== ）可实现更可预测且更可靠的行为，因为严格相等不会进行类型转换，而是直接比较值和类型。

console.log([] == ![]); // true (this is surprising!)
console.log(0 == ''); // true

console.log([] == ![]); // true (this is surprising!)
console.log(0 === ''); // false (as expected)

WebStorm 会检测使用宽松相等可能引发的潜在问题，高亮显示不可靠的代码段并建议快速修复。

将光标悬停在高亮显示的宽松相等上并点击替换为 '==='。
将光标放在 === 表达式处，按 Alt+Enter ，然后从弹出列表中选择替换为 '==='。

2026年 3月 24日