摘要：小駝峰式命名法首字母小寫。函數命名動詞含義返回值判斷是否可執行某個動作權限函數返回一個布爾值。

提升代碼質量

代碼復盤

有利于規范的落地

對業務的理解加深

表達溝通能力的增強

相互學習

儀式感

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

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

Camel Case 小駝峰式命名法：首字母小寫。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
 */

字符串

數值

布爾類型

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

對所有引用都使用 const，不要使用 var

// bad
var a = 1
var b = 2

// good
const a = 1
const b = 2

如果引用是可變動的，則使用let

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

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

請使用字面量值創建對象

/ bad
const a = new Object{}

// good
const a = {}

別使用保留字作為對象的鍵值，這樣在 IE8 下不會運行

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

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

請使用對象方法的簡寫方式

const job = "FrontEnd"

// bad
const item = {
  job: job
}

// good
const item = {
  job
}

-對象屬性值的簡寫方式要和聲明式的方式分組

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

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

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

請使用字面量值創建數組

// bad
const items = new Array()

// good
const items = []

向數組中添加元素時，請使用 push 方法

const items = []

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

// good
items.push("test")

使用拓展運算符 ... 復制數組

// 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]

-使用數組的 map 等方法時，請使用 return 聲明，如果是單一聲明語句的情況，可省略 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
})

當需要使用對象的多個屬性時，請使用解構賦值

// 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}`
}

當需要使用數組的多個值時，請同樣使用解構賦值

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

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

// good
const [first, second] = arr

函數需要回傳多個值時，請使用對象的解構，而不是數組的解構

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

// 如果是數組解構，那么在調用時就需要考慮數據的順序
const [top, xx, xxx, left] = doSomething()

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

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

字符串統一使用單引號的形式" "

// bad
const department = "JDC"

// good
const department = "JDC"

字符串太長的時候，請不要使用字符串連接符換行，而是使用 +

const str = "前端js規范" +
  "前端js規范" +
  "前端js規范前端js規范前端js規范"

程序化生成字符串時，請使用模板字符串

const test = "test"

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

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

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

請使用函數聲明，而不是函數表達式

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

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

不要在非函數代碼塊中聲明函數

// 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 = {}) {
  // ...
}

使用標準的 ES6 模塊語法 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 的通配符 *，這樣可以確保你只有一個默認的 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)