Open evantianx opened 7 years ago
使用字面量来创建数组
const items = new Array() ❌
const items = [] ⭕️
使用Array.push
来为数组添加成员
const someStack = []
someStack[someStack.length] = 'something' ❌
someStack.push('something') ⭕️
使用扩展操作符来复制数组
const len = items.length
const itemCopy = []
for (let i = 0; i < len; i++) { ❌
itemCopy[i] = items[i]
}
const itemsCopy = [...items] ⭕️
Array.from
来转换类数组为数组
const foo = document.querySelectorAll('.foo')
const nodes = Array.from(foo)
当接收及使用某个对象的多个属性值时,使用对象解构赋值
function getFullName(user) {
const firstName = user.firstName ❌
const lastName = user.lastName
return `${firstName} ${lastName}`
}
function getFullName(user) {
const { firstName, lastName } = user ⭕️
return `${firstName} ${lastName}`
}
function getFullName({ firstName, lastName }) { ❤️
return `${firstName} ${lastName}`
}
调用数组成员时,推荐使用解构赋值
const arr = [1, 2, 3, 4]
const first = arr[1] ❌
const second = arr[2]
const [first, second] = arr ⭕️
函数有多个返回值时使用对象解构赋值而非数组解构赋值
因为在之后调用时,使用数组结构赋值的结果要考虑顺序,而对象结构赋值不需要
function processInput(input) {
// something happens
return [top, right, bottom, left]
}
const [top, _, bottom] = processInput(input) // 需要考虑顺序 ❌
function processInput(input) {
// something happens
return { top, right, bottom, left }
}
const { top, bottom } = processInput(input) // 无需考虑顺序 ⭕️
使用命名函数表达式而非函数声明
函数声明会造成调用混乱,匿名函数表达式会使得 Debug 非常困难.
function foo() { ❌
// ...
}
const foo = function () { ❌
// ...
}
const foo = function bar() { ⭕️
//...
}
不要使用 arguements
来调用函数参数, 用...
代替
function concatenateAll() {
const args = Array.prototypr.slice.call(arguments) ❌
return args.join('')
}
function concatenateAll(...args) { ⭕️
return args.join('')
}
使用默认参数表达式
function handleThings(opts) { ⚠️
// 非常不推荐,这样会改变参数值,
// 同时如果 opts 为假值则会将其设置为一个对象
opts = opts || {}
// ...
}
function handleThings(opts) { ❌
if (opts === void 0) {
opts = {}
}
}
function handleThings(opts = {}) { ⭕️
// ...
}
const x = function () {} ⭕️
const y = function a() {} ⭕️
总是用类来构建对象原型
function Queue(contents = []) { ❌
this.queue = [...contents]
}
Queue.prototype.pop = function () {
const value = this.queue[0]
this.queue.splice(0, 1)
return value
}
class Queue { ⭕️
constructor(contents = []) {
this.queue = [...contents]
}
pop() {
const value = this.queue[0]
this.queue.splice(0, 1)
return value
}
}
extends
来实现继承
class PeekableQueue extends Queue {
peek() {
return this.queue[0]
}
}
不要在 import 中同时进行 export
export { es6 as default } from './AirbnbStyleGuide' ❌
import { es6 } from './AirbnbStyleGuide' ⭕️
export default es6
若某个模块仅有一个输出, 则使用默认输出
export function foo() {} ❌
export default function foo() {} ⭕️
import
写在非import
语句的前面
因为
import
都是声明提升的, 这样写不易出现错误
const foo = function bar() { ⭕️ //... } 請問。。。這不多此一舉嗎? function foo () {} 完成的時候,就會創建一個foo變量
我覺得原義應該是 const short = function longDescriptiveFunctionName () {} 這樣可以代碼裏面寫起來簡單,並且函數的名字也比較有描述性
对象
创建对象时多用对象字面量,不用
new
操作符创建对象中有计算属性时,直接用计算属性:
使用对象方法简写,属性简写
在不必要的情况下,不要为对象的属性名添加引号
不要直接调用
Object.prototype
中的方法如hasOwnProperty
,propertyIsEnumerable
和isPrototypeOf
通过对象展开符而不是
Object.assign
来进行浅复制,同时这样也可以显示忽略某些属性来复制其他属性。