寫出優雅的js程式碼

十二柚不檬發表於2018-11-28

一.常量相關

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…

相關文章