寫出優雅的js代碼

一.常量相關

1.定義常量

var a=1; // 錯誤："var"定義的"常量"是可變的，在聲明一個常量時，該常量在整個程序中都應該是不可變的。
正解：
const a=1

2.給常量賦值

let lastName = fullName[1]; // 錯誤：若是fullName=[],那麼fullName[1]=undefined
let propertyValue = Object.attr; // 錯誤：若是Object={},那麼Object.attr=undefined
複製代碼

正解： 對於引用數據類型，要作好兜底

let lastName = fullName[1] || ''
let propertyValue=Object.attr||0
複製代碼

3.使用說明性常量

const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
  address.match(cityZipCodeRegex)[1], // 錯誤：1.address.match(cityZipCodeRegex)可能爲null,那當前這種寫法就會報錯
  address.match(cityZipCodeRegex)[2], // 錯誤：2.不知道這條數據是什麼意思
);
複製代碼

正解： 用常量名來解釋長代碼的含義

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

二.函數相關

1.對於for循環優先使用命令式編程

var result=[]
var a=[1,2,3,4,5,6]
for(i = 1; i <= 10; i++) { 
   if(a[i]>4){
      result.push(a[i])
   }
}
複製代碼

正解： 使用命令式編程(find、soma、every、map、filter、sort、shift、pop、join)，各類用法能夠參考：developer.mozilla.org/en-US/docs/…

var a=[1,2,3,4,5,6]
const result = a.filter(item => item> 4);
複製代碼

備註： forEach不能使用break結束循環體，但能夠使用 return 或 return false 跳出當前循環，效果與 for 中 continue 同樣， 若是要一次性結束全部循環，仍是老老實實使用for方法：for(let list of lists)。

2.函數中不要過多的採用if else

if (a === 1) {
	...
} else if (a ===2) {
	...
} else if (a === 3) {
	...
} else {
   ...
}
複製代碼

正解：

switch(a) {
   case 1:
   	....
   case 2:
   	....
   case 3:
   	....
  default:
   	....
}
Or
let handler = {
    1: () => {....},
    2: () => {....}.
    3: () => {....},
    default: () => {....}
}

    handler[a]() || handler['default']()
複製代碼

3.使用三目運算符

const a = ''
let b
if( a === '' ){
    b='nothing'
} else {
    b='hello'
}
複製代碼

正解：

const a = ''
let b = a ? 'nothing' : 'hello'; // 'hello'
複製代碼

注： 判斷元素是否存在，當類型爲undefined或null或空的string（' '）或0時,能夠直接使用if(a)/if(!a)的形式。當類型爲array或object時，就只能使用if(a instanceof Array)或if(a instanceof String)的形式。

4.使用正則表達式

const imgType='jpg'
if(imgType==='jpg'||imgType==='png'||imgType==='gif'){
    console.log('hello image')
}
複製代碼

正解：使用match匹配正則表達式

const imgType='jpg'
if(imgType.match(/.*?(gif|png|jpg)/gi)){
    console.log('hello image')
}
複製代碼

三.使用ES6新語法（只舉例經常使用語法）

1.使用箭頭函數

function method() {
  console.log('hello')
}
複製代碼

正解：

let method=()=> {
  console.log('hello')
}
method(); // hello
複製代碼

2.鏈接字符串

var message = 'Hello ' + name + ', it\'s ' + time + ' now' //錯誤：採用傳統加號，看着很冗餘
正解：採用模板字符
var message = `Hello ${name}, it's ${time} now`

3.使用解構賦值

var user = { name: 'dys', age: 1 };
var name = user.name;
var age = user.age;

var fullName = ['jackie', 'willen'];
var firstName = fullName[0];
var lastName = fullName[1];
複製代碼

正解：使用結構賦值

const user = {name:'dys', age:1};
const {name, age} = user;  // 當須要被賦值的字段和對象中定義的字段相同時，就能夠使用這種方法，至關於const name=user.name

var fullName = ['jackie', 'willen'];
const [firstName, lastName] = fullName;

複製代碼

4.如必須使用for循環使用for..in或for..of循環

for(let i=0;i<list.length;i++){
    console.log(list[i])
}
複製代碼

正解：

for(let i of list){
    console.log(i)
}
複製代碼

注意： 對於es6,for循環中 in 和 of 的區別： in能夠是給對象使用也能夠是對數組使用，of只能是針對數組而言的

const object={a:1,b:2,c:3}
for(let i in object){
    console.log(i); //a,b,c 
}
複製代碼

const array=[1,2,3]
for(let i of array){
    console.log(i); // 1,2,3
}
for(let i in array){
    console.log(i); // 0,1,2
}
複製代碼

5.使用繼承class類,而不是 ES5 的 Function

這裏只用ES6語法說明

// 定義類
class point{
    constructor(x,y){
        this.x=x;
        this.y=y;
    }
    toString(){
        return `${this.x},${this.y}`
    }
}
var p=new point(1,2)
p.toString() // 1,2
複製代碼

// 繼承類
class mainPoint extends point {
    constructor(x, y, z) {
        super(x, y); 
        this.z = z;
    }

    toString() {
        return this.z + ' ' + super.toString(); 
    }
}
var mainpoint=new mainPoint(1,2,3)
mainpoint.toString() // 3 1,2
複製代碼

四.ESLint的配置

ESLint能夠保證代碼符合必定的風格，有起碼的可讀性

{
  parser: 'babel-eslint',
  extends: ['airbnb', 'plugin:react/recommended', 'prettier', 'prettier/react'],
  plugins: ['react', 'prettier'],
  rules: {
    // prettier 配置用於自動化格式代碼
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: false,
        trailingComma: 'all',
        bracketSpacing: true,
        jsxBracketSameLine: true,
      },
    ],
    // 一個函數的複雜性不超過 10，全部分支、循環、回調加在一塊兒，在一個函數裏不超過 10 個
    complexity: [2, 10],
    // 一個函數的嵌套不能超過 4 層，多個 for 循環，深層的 if-else，這些都是罪惡之源
    'max-depth': [2, 4],
    // 一個函數最多有 3 層 callback，使用 async/await
    'max-nested-callbacks': [2, 3],
    // 一個函數最多 5 個參數。參數太多的函數，意味着函數功能過於複雜，請拆分
    'max-params': [2, 5],
    // 一個函數最多有 50 行代碼，若是超過了，請拆分之，或者精簡之
    'max-statements': [2, 50],
    // 堅決的 semicolon-less 擁護者
    semi: [2, 'never'],
  },
  env: {
    browser: true,
  },
}
複製代碼

參考：juejin.im/post/5becf9…