个人编码习惯总结 - JavaScript 篇

如何使自己的代码看起来更加的整洁、优雅、更加可读？如何在团队中做好代码的 CR？不妨先从代码规范上提高代码书写要求！以下，是我日常工作、学习中的一些小总结

减少定义没有重复引用的变量

如果逻辑较为复杂，也可以单独定义为变量使用，提高代码可读性，前提是定义的变量名称要尽可能的表达其含义，良好的变量命名完全可以代替注释的使用。

使用三目运算符替代简单的 if else 写法

如果没有不要使用 if else 的写法，使用三目运算符会更简洁。

// bad
const a = 1;
let b;
if (a > -1) {
 b = 1;
} else {
 b = 2
}

// good
const a = 1;
const b = a > -1 ? 1 : 2;

花括号内前后保留空格

为了保持代码风格统一且更易阅读，推荐写代码时花括号内前后各保留一个空格。

// bad
const a = {x:1};

// good
const a = { x: 1 };

// bad
const a = ({x, y}) => x + y;

// good
const a = ({ x, y }) => x + y;

中括号内前后空格保留问题

这个问题自己也来来回回纠结了很久，以前是想着跟花括号保持一致的代码风格（前后也保留空格），后来所在的项目开发需要按照不保留空格的规范来写，后面也就习惯了不保留空格了。示例代码如下

// bad
const list = [ 1, 2, 3 ];

// good
const list = [1, 2, 3];

语句以分号结尾

const sum = a + b // 即使没有分号也是有效的语句——不推荐
const diff = a - b; // 有效的语句——推荐

使用常量

如果多个地方使用同一个值，我们推荐使用常量来替换，一来能使这个值更具语义，二来能够方便维护（值更改只需要维护这个常量即可，尤其是这个值重复使用次数较多）。

const offsets = {
  width: 150,
  height: 300,
};

// bad
const width = offsets.width > 200 ? 200 :  offsets.width;

// good
const MAX_WIDTH = 200; // 定义常量
const width = offsets.width > MAX_WIDTH ? MAX_WIDTH :  offsets.width;

switch 保留 default

default 作为默认分支可以处理一些非预期的意外行为，同时可以提升可读性和可维护性，一般建议保留该分支。

// bad
switch (type) {
  case 'a': {
    return 'bad';
  }
}

// good
switch (type) {
  case 'a': {
    return 'good';
  }
  default: {
    return 'handle default';
  }
}

import 引用顺序

为了提高 import 的可读性，考虑使用统一的 import 顺序并考虑根据 import 类型做分类处理，目前个人的习惯引用顺序是：

三方包
内部包
静态资源
CSS

// bad
import add from './utils/num';
import lodash from 'lodash';
import './index.css'
import logo from './assets/logo.png'
import find from './utils/string';

// good
import lodash from 'lodash';
import { add } from './utils/num';
import { search } from './utils/string';
import logo from './assets/logo.png'

import './index.css'

map 的使用

map 是用来在遍历一个数组的同时返回一个新的数组，但有时总会发现有些同学会滥用这个方法。例如，仅使用了 map 的遍历功能，此时，应该用 forEach 来代替这个用法。

let arr = [1, 2];

// bad
arr.map((num, index) => {
  arr[index] = num * 2;
});

// good
arr.forEach((num, index) => {
  arr[index] = num * 2;
});

// 或者正确地使用 map
arr = arr.map((num) => num * 2);

renjie-run / blog