摘要：小駝峰式命名法首字母小寫(xiě)。函數(shù)命名動(dòng)詞含義返回值判斷是否可執(zhí)行某個(gè)動(dòng)作權(quán)限函數(shù)返回一個(gè)布爾值。

提升代碼質(zhì)量

代碼復(fù)盤(pán)

有利于規(guī)范的落地

對(duì)業(yè)務(wù)的理解加深

表達(dá)溝通能力的增強(qiáng)

相互學(xué)習(xí)

儀式感

Airbnb 代碼規(guī)范 https://github.com/airbnb/jav...
eslint 代碼檢查 https://cn.eslint.org
korofileheader 注釋生成 https://marketplace.visualstu...
凹凸實(shí)驗(yàn)室代碼規(guī)范 https://guide.aotu.io/index.html
react 代碼規(guī)范 https://github.com/airbnb/jav...
vue 代碼規(guī)范 https://cn.vuejs.org/v2/style...

Pascal Case 大駝峰式命名法：首字母大寫(xiě)。eg：StudentInfo、UserInfo、ProductInfo

Camel Case 小駝峰式命名法：首字母小寫(xiě)。eg：studentInfo、userInfo、productInfo

/*
 * @description: 
 * @Author: xiaoping.zhang
 * @Date: 2019-02-17 10:22:28
 * @LastEditors: xiaoping.zhang
 * @LastEditTime: 2019-02-17 10:22:28
 */
 

/**
 * @Author: xiaoping.zhang
 * @description: 
 * @return: 
 * @Date: 2019-07-17 22:35:35
 */

字符串

數(shù)值

布爾類型

null

undefined

const foo = 1
let bar = foo

bar = 9

console.log(foo, bar) // 1, 9

object

array

function

const foo = [1, 2, 3]
const bar = foo

bar[0] = 9

console.log(foo[0], bar[0]) // 9, 9

對(duì)所有引用都使用 const，不要使用 var

// bad
var a = 1
var b = 2

// good
const a = 1
const b = 2

如果引用是可變動(dòng)的，則使用let

// bad
var count = 1
if (count < 10) {
  count += 1
}

// good
let count = 1
if (count < 10) {
  count += 1
}

請(qǐng)使用字面量值創(chuàng)建對(duì)象

/ bad
const a = new Object{}

// good
const a = {}

別使用保留字作為對(duì)象的鍵值，這樣在 IE8 下不會(huì)運(yùn)行

// bad
const a = {
  default: {},  // default 是保留字
  common: {}
}

// good
const a = {
  defaults: {},
  common: {}
}

請(qǐng)使用對(duì)象方法的簡(jiǎn)寫(xiě)方式

const job = "FrontEnd"

// bad
const item = {
  job: job
}

// good
const item = {
  job
}

-對(duì)象屬性值的簡(jiǎn)寫(xiě)方式要和聲明式的方式分組

onst job = "FrontEnd"
const department = "JDC"

// bad
const item = {
  sex: "male",
  job,
  age: 25,
  department
}

// good
const item = {
  job,
  department,
  sex: "male",
  age: 25
}

請(qǐng)使用字面量值創(chuàng)建數(shù)組

// bad
const items = new Array()

// good
const items = []

向數(shù)組中添加元素時(shí)，請(qǐng)使用 push 方法

const items = []

// bad
items[items.length] = "test"

// good
items.push("test")

使用拓展運(yùn)算符 ... 復(fù)制數(shù)組

// bad
const items = []
const itemsCopy = []
const len = items.length
let i

// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i]
}

// good
itemsCopy = [...items]

-使用數(shù)組的 map 等方法時(shí)，請(qǐng)使用 return 聲明，如果是單一聲明語(yǔ)句的情況，可省略 return

// good
[1, 2, 3].map(x => {
  const y = x + 1
  return x * y
})

// good
[1, 2, 3].map(x => x + 1)

// bad
const flat = {}
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
  const flatten = memo.concat(item)
  flat[index] = flatten
})

// good
const flat = {}
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
  const flatten = memo.concat(item)
  flat[index] = flatten
  return flatten
})

// bad
inbox.filter((msg) => {
  const { subject, author } = msg
  if (subject === "Mockingbird") {
    return author === "Harper Lee"
  } else {
    return false
  }
})

// good
inbox.filter((msg) => {
  const { subject, author } = msg
  if (subject === "Mockingbird") {
    return author === "Harper Lee"
  }

  return false
})

當(dāng)需要使用對(duì)象的多個(gè)屬性時(shí)，請(qǐng)使用解構(gòu)賦值

// bad
function getFullName (user) {
  const firstName = user.firstName
  const lastName = user.lastName

  return `${firstName} ${lastName}`
}

// good
function getFullName (user) {
  const { firstName, lastName } = user

  return `${firstName} ${lastName}`
}

// better
function getFullName ({ firstName, lastName }) {
  return `${firstName} ${lastName}`
}

當(dāng)需要使用數(shù)組的多個(gè)值時(shí)，請(qǐng)同樣使用解構(gòu)賦值

const arr = [1, 2, 3, 4]

// bad
const first = arr[0]
const second = arr[1]

// good
const [first, second] = arr

函數(shù)需要回傳多個(gè)值時(shí)，請(qǐng)使用對(duì)象的解構(gòu)，而不是數(shù)組的解構(gòu)

// bad
function doSomething () {
  return [top, right, bottom, left]
}

// 如果是數(shù)組解構(gòu)，那么在調(diào)用時(shí)就需要考慮數(shù)據(jù)的順序
const [top, xx, xxx, left] = doSomething()

// good
function doSomething () {
  return { top, right, bottom, left }
}

// 此時(shí)不需要考慮數(shù)據(jù)的順序
const { top, left } = doSomething()

字符串統(tǒng)一使用單引號(hào)的形式" "

// bad
const department = "JDC"

// good
const department = "JDC"

字符串太長(zhǎng)的時(shí)候，請(qǐng)不要使用字符串連接符換行，而是使用 +

const str = "前端js規(guī)范" +
  "前端js規(guī)范" +
  "前端js規(guī)范前端js規(guī)范前端js規(guī)范"

程序化生成字符串時(shí)，請(qǐng)使用模板字符串

const test = "test"

// bad
const str = ["a", "b", test].join()

// bad
const str = "a" + "b" + test

// good
const str = `ab${test}`

請(qǐng)使用函數(shù)聲明，而不是函數(shù)表達(dá)式

/ bad
const foo = function () {
  // do something
}

// good
function foo () {
  // do something
}

不要在非函數(shù)代碼塊中聲明函數(shù)

// bad
if (isUse) {
  function test () {
    // do something
  }
}

// good
let test
if (isUse) {
  test = () => {
    // do something
  }
}

不要使用 arguments，可以選擇使用 ...

// bad
function test (opts) {
  opts = opts || {}
}

// good
function test (opts = {}) {
  // ...
}

使用標(biāo)準(zhǔn)的 ES6 模塊語(yǔ)法 import 和 export

// bad
const util = require("./util")
module.exports = util

// good
import Util from "./util"
export default Util

// better
import { Util } from "./util"
export default Util

不要使用 import 的通配符 *，這樣可以確保你只有一個(gè)默認(rèn)的 export

// bad
import * as Util from "./util"

// good
import Util from "./util"

不要使用 iterators

const numbers = [1, 2, 3, 4, 5]

// bad
let sum = 0
for (let num of numbers) {
  sum += num
}

// good
let sum = 0
numbers.forEach(num => sum += num)

// better
const sum = numbers.reduce((total, num) => total + num, 0)