变量

使用有意义且易发音的变量名

错误示例:

const yyyymmdstr = moment().format("YYYY/MM/DD");

正确示例:

const currentDate = moment().format("YYYY/MM/DD");

为同类型变量保持词汇一致性

错误示例:

getUserInfo();
getClientData();
getCustomerRecord();

正确示例:

getUser();

采用可搜索的命名方式

我们阅读的代码量远多于编写的代码量。因此必须确保所写代码具备可读性与可搜索性。若未给变量赋予有助于理解程序的名称，将增加读者的理解成本。建议使用 buddy.js 或 ESLint 等工具识别未命名常量。

错误示例:

// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);

正确示例:

// Declare them as capitalized named constants.
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;

setTimeout(blastOff, MILLISECONDS_PER_DAY);

使用解释性变量增强可读性

错误示例:

const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
  address.match(cityZipCodeRegex)[1],
  address.match(cityZipCodeRegex)[2]
);

正确示例:

const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);

避免心智映射

显式优于隐式

错误示例:

const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // Wait, what is `l` for again?
  dispatch(l);
});

正确示例:

const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  dispatch(location);
});

避免添加不必要的上下文

若类/对象名称已包含相关信息，则变量名中不应重复该上下文

错误示例:

const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

function paintCar(car, color) {
  car.carColor = color;
}

正确示例:

const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};

function paintCar(car, color) {
  car.color = color;
}

优先使用默认参数而非短路求值或条件判断

默认参数通常比短路求值更为简洁。需注意的是，默认参数仅对undefined值生效，其他'假值'如''、false、null、0和NaN不会被替换。

错误示例:

function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}

正确示例:

function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}