变量

使用有意义并且可读的变量名称

不好的:

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

好的:

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

为相同类型的变量使用相同的词汇

不好的:

  1. getUserInfo();
  2. getClientData();
  3. getCustomerRecord();

好的:

  1. getUser();

使用可搜索的名称

我们要阅读的代码比要写的代码多得多, 所以我们写出的代码的可读性和可搜索性是很重要的。 使用没有
意义的变量名将会导致我们的程序难于理解, 将会伤害我们的读者, 所以请使用可搜索的变量名。 类似
buddy.jsESLint
的工具可以帮助我们找到未命名的常量。

不好的:

  1. // 艹, 86400000 是什么鬼?
  2. setTimeout(blastOff, 86400000);

好的:

  1. // 将它们声明为全局常量 `const` 。
  2. const MILLISECONDS_IN_A_DAY = 86400000;
  3. setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

使用解释性的变量

不好的:

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

好的:

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

避免心理映射

显示比隐式更好

不好的:

  1. const locations = ['Austin', 'New York', 'San Francisco'];
  2. locations.forEach((l) => {
  3. doStuff();
  4. doSomeOtherStuff();
  5. // ...
  6. // ...
  7. // ...
  8. // 等等, `l` 是啥?
  9. dispatch(l);
  10. });

好的:

  1. const locations = ['Austin', 'New York', 'San Francisco'];
  2. locations.forEach((location) => {
  3. doStuff();
  4. doSomeOtherStuff();
  5. // ...
  6. // ...
  7. // ...
  8. dispatch(location);
  9. });

不添加不必要的上下文

如果你的类名/对象名有意义, 不要在变量名上再重复。

不好的:

  1. const Car = {
  2. carMake: 'Honda',
  3. carModel: 'Accord',
  4. carColor: 'Blue'
  5. };
  6. function paintCar(car) {
  7. car.carColor = 'Red';
  8. }

好的:

  1. const Car = {
  2. make: 'Honda',
  3. model: 'Accord',
  4. color: 'Blue'
  5. };
  6. function paintCar(car) {
  7. car.color = 'Red';
  8. }

使用默认变量替代短路运算或条件

不好的:

  1. function createMicrobrewery(name) {
  2. const breweryName = name || 'Hipster Brew Co.';
  3. // ...
  4. }

好的:

  1. function createMicrobrewery(breweryName = 'Hipster Brew Co.') {
  2. // ...
  3. }