引入 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

虽然许多旧代码库中可能使用 function prototype 方法来模拟类，但我们推荐使用类，因为它们语法更简洁。

 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 函数上下文操作将其引入代码。

将光标置于一个函数上以引入 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 ，然后从弹出列表中选择替换为 '==='。

最后修改日期： 2025年 9月 26日