小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
JavaScript 规范
语言规范
引用
const 和 let 都是块级作用域,var 是函数级作用域
对所有引用都使用const,如果引用是可变动的,则使用 let ,不要使用 var
// 不推荐
var a = 1
var b = 2
var count = 1
if (count < 10) {
count += 1
}
// 推荐
const a = 1
const b = 2
let count = 1
if (count < 10) {
count += 1
}
对象
使用字面量创建对象
// bad
const a = new Object{}
// good
const a = {}
请使用对象属性值的简写方式
const job = 'FrontEnd'
// bad
const item = {
job: job
}
// good
const item = {
job
}
对象属性值的简写方式要和声明式的方式分组
const 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')
使用拓展运算符 ... 复制数组
const items = []
const itemsCopy = []
const len = items.length
let i
// bad
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i]
}
// good
itemsCopy = [...items]
解构赋值
当需要使用对象的多个属性时,请使用解构赋值
// 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}`
}
当需要使用数组的多个值时,请同样使用解构赋值
const arr = [1, 2, 3, 4]
// bad
const first = arr[0]
const second = arr[1]
// good
const [first, second] = arr
字符串
字符串统一使用单引号的形式 ''
// bad
const department = "JDC"
// good
const department = 'JDC'
字符串太长的时候,请不要使用字符串连接符换行 \,而是使用 +
const str = '京东金融' + '京东少东家'
程序化生成字符串时,请使用模板字符串
const test = 'test'
// bad
const str = ['a', 'b', test].join()
// bad
const str = 'a' + 'b' + test
// good
const str = `ab${test}`
函数
不要使用 arguments,可以选择使用 ... arguments 只是一个类数组,而 ... 是一个真正的数组
// bad
function test () {
const args = Array.prototype.slice.call(arguments)
return args.join('')
}
// good
function test (...args) {
return args.join('')
}
尽量不要更改函数参数的值
可根据使用场景决定,如果有些参数引用值需要被改,那么是可以改动的
对象属性
使用 . 来访问对象属性
const joke = {
name: 'haha'
}
// bad
const name = joke['name']
// good
const name = joke.name
分号
遵循 Standard 的规范,不使用分号() 根据项目主负责人的开发习惯,如果负责人习惯使用分号,则可继续按添加分号的习惯开发;
若不使用分号,则需注意:
了解分辨哪些场景下是一定要加分号的
// bad
const test = 'good';
(function () {
const str = 'hahaha';
})()
// good
const test = 'good'
;(() => {
const str = 'hahaha'
})();
代码规范
大括号风格
if (foo) {
bar()
} else {
baz()
}
变量命名
当命名变量时,主流分为驼峰式命名(variableName)和下划线命名(variable_name)两大阵营。
建议使用小驼峰命名方式
逗号风格
逗号前后的空格可以提高代码的可读性,团队约定在逗号后面使用空格,逗号前面不加空格
// 不推荐
var foo = 1,bar = 2
var foo = 1 , bar = 2
var foo = 1 ,bar = 2
// 推荐
var foo = 1, bar = 2
逗号放置在当前行的末尾
// 不推荐
var foo = 1
,
bar = 2
var foo = 1
, bar = 2
var foo = ['name' , 'age']
// 推荐
var foo = 1,
bar = 2
var foo = ['name', 'age']
链式赋值
链式赋值容易造成代码的可读性差,所以团队约定禁止使用链式赋值
// 不推荐
var a = b = c = 1
// 推荐
var a = 1
var b = 1
var c = 1
代码块风格
代码块前要添加空格
// 不推荐
if (a){
b()
}
function a (){}
// 推荐
if (a) {
b()
}
function a () {}