教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

寫出優(yōu)雅的JS代碼

更新時間:2018年12月19日15時29分 來源:傳智播客 瀏覽次數(shù):

一.常量相關(guān)
1.定義常量
[JavaScript] 純文本查看 復(fù)制代碼
1
var a=1; // 錯誤："var"定義的"常量"是可變的，在聲明一個常量時，該常量在整個程序中都應(yīng)該是不可變的。

正解：
[JavaScript] 純文本查看 復(fù)制代碼
1
const a=1

2.給常量賦值
[JavaScript] 純文本查看 復(fù)制代碼
1
2
let lastName = fullName[1]; // 錯誤：如果fullName=[],那么fullName[1]=undefined
let propertyValue = Object.attr; // 錯誤：如果Object={},那么Object.attr=undefined

正解： 對于引用數(shù)據(jù)類型，要做好兜底
[JavaScript] 純文本查看 復(fù)制代碼
1
2
let lastName = fullName[1] || ''
let propertyValue=Object.attr||0

3.使用說明性常量
[JavaScript] 純文本查看 復(fù)制代碼
1
2
3
4
5
6
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.不知道這條數(shù)據(jù)是什么意思
);

正解： 用常量名來解釋長代碼的含義
[JavaScript] 純文本查看 復(fù)制代碼
1
2
3
4
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);

二.函數(shù)相關(guān)

1.對于for循環(huán)優(yōu)先使用命令式編程
[JavaScript] 純文本查看 復(fù)制代碼
1
2
3
4
5
6
7
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/…
[JavaScript] 純文本查看 復(fù)制代碼
1
2
var a=[1,2,3,4,5,6]
const result = a.filter(item => item> 4);

備注： forEach不能使用break結(jié)束循環(huán)體，但可以使用 return 或 return false 跳出當前循環(huán)，效果與 for 中 continue 一樣，如果要一次性結(jié)束所有循環(huán)，還是老老實實使用for方法：for(let list of lists)。
2.函數(shù)中不要過多的采用if else
[JavaScript] 純文本查看 復(fù)制代碼
1
2
3
4
5
6
7
8
9
if (a === 1) {
        ...
} else if (a ===2) {
        ...
} else if (a === 3) {
        ...
} else {
   ...
}

正解：
[JavaScript] 純文本查看 復(fù)制代碼
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
switch(a) {
   case 1:
           ....
   case 2:
           ....
   case 3:
           ....
  default:
           ....
}
Or
let handler = {
    1: () => {....},
    2: () => {....}.
    3: () => {....},
    default: () => {....}
}
    handler[a]() || handler['default']()

3.使用正則表達式
[JavaScript] 純文本查看 復(fù)制代碼
1
2
3
4
const imgType='jpg'
if(imgType==='jpg'||imgType==='png'||imgType==='gif'){
    console.log('hello image')
}

正解：使用match匹配正則表達式
[JavaScript] 純文本查看 復(fù)制代碼
1
2
3
4
const imgType='jpg'
if(imgType.match(/.*?(gif|png|jpg)/gi)){
    console.log('hello image')
}

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

1.使用箭頭函數(shù)
[JavaScript] 純文本查看 復(fù)制代碼
1
2
3
function method() {
  console.log('hello')
}

正解：
[JavaScript] 純文本查看 復(fù)制代碼
1
2
3
4
let method=()=> {
  console.log('hello')
}
method(); // hello

2.連接字符串
[JavaScript] 純文本查看 復(fù)制代碼
1
var message = 'Hello ' + name + ', it\'s ' + time + ' now' //錯誤：采用傳統(tǒng)加號，看著很冗余

正解：采用模板字符
[JavaScript] 純文本查看 復(fù)制代碼
1
var message = `Hello ${name}, it's ${time} now`

3.使用解構(gòu)賦值
[JavaScript] 純文本查看 復(fù)制代碼
1
2
3
4
5
6
7
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];

正解：使用結(jié)構(gòu)賦值
[JavaScript] 純文本查看 復(fù)制代碼
1
2
3
4
5
const user = {name:'dys', age:1};
const {name, age} = user;  // 當需要被賦值的字段和對象中定義的字段相同時，就可以使用這種方法，相當于const name=user.name
 
var fullName = ['jackie', 'willen'];
const [firstName, lastName] = fullName;

4.如必須使用for循環(huán)使用for..in或for..of循環(huán)
[JavaScript] 純文本查看 復(fù)制代碼
1
2
3
for(let i=0;i<list.length;i++){
    console.log(list[i])
}

正解：
[JavaScript] 純文本查看 復(fù)制代碼
1
2
3
for(let i of list){
    console.log(i)
}

注意： 對于es6,for循環(huán)中 in 和 of 的區(qū)別：in可以是給對象使用也可以是對數(shù)組使用，of只能是針對數(shù)組而言的
[JavaScript] 純文本查看 復(fù)制代碼
01
02
03
04
05
06
07
08
09
10
11
12
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語法說明
[JavaScript] 純文本查看 復(fù)制代碼
01
02
03
04
05
06
07
08
09
10
11
12
13
// 定義類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 point(1,2,3)
mainpoint.toString() // 3 1,2

四.ESLint的配置

ESLint可以保證代碼符合一定的風(fēng)格，有起碼的可讀性
[JavaScript] 純文本查看 復(fù)制代碼
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  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,
      },
    ],
    // 一個函數(shù)的復(fù)雜性不超過 10，所有分支、循環(huán)、回調(diào)加在一起，在一個函數(shù)里不超過 10 個
    complexity: [2, 10],
    // 一個函數(shù)的嵌套不能超過 4 層，多個 for 循環(huán)，深層的 if-else，這些都是罪惡之源
    'max-depth': [2, 4],
    // 一個函數(shù)最多有 3 層 callback，使用 async/await
    'max-nested-callbacks': [2, 3],
    // 一個函數(shù)最多 5 個參數(shù)。參數(shù)太多的函數(shù)，意味著函數(shù)功能過于復(fù)雜，請拆分
    'max-params': [2, 5],
    // 一個函數(shù)最多有 50 行代碼，如果超過了，請拆分之，或者精簡之
    'max-statements': [2, 50],



作者：傳智播客前端與移動開發(fā)培訓(xùn)學(xué)院

首發(fā)： http://web.itcast.cn

0 分享到：
和我們在線交談！