JavaScript-ES6编程风格

块级作用域

• let取代var

  两者语义相同，而且let没有副作用

  如果以下var代替let，就声明了两个全局变量。变量应该只在其代码块内有效，var做不到这点

  if(true){
      let x = 'hello'
  }
  

• var存在变量提升，let没有这个问题

  如果使用var，console.log(x)就不会报错并且输出undefined，因为变量声明提升到代码块的头部，因此违背了变量先声明后使用的原则。所以，不建议使用var，而是用let取代

  if(true){
      console.log(x)
      let x = 'hello'
  }
  

• 全局常量和线程安全

  在let和const之间，建议优先使用const，尤其在全局环境，不应该设置变量，只应设置常量。const优于let有以下原因：

  • const可以提醒阅读程序的人，这个变量不应该改变
  • js编辑器会对const进行优化，所以多使用const，有利于提高程序的运行效率

字符串

静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。

使用场景：页面传递query参数，接口query参数，path参数

const a = 'good'
const b = `good${i}dd`

解构赋值

• 使用数组成员对变量赋值时，优先使用解构赋值

  const arr = [1,2,3,4]
  
  //bad
  const first arr[0]
  const second arr[1]
  
  //good
  const {first,second} = arr
  

• 函数的参数如果是对象的成员，优先使用解构赋值

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

• 如果函数返回多个值，优先使用对象的解构赋值，而不是数组的对象赋值。以便于以后添加返回值，以及更改返回值的顺序

  //bad
  function processInput(input){
      return [left,right,top,bootom]
  }
  
  //good
  function processInput(input){
      return {left,right,top,bootom}
  }
  
  const {left,right} = processInput(input)
  

对象

单行定义的对象，最后一个成员不以逗号结尾

多行定义的对象，最后一个成员以逗号结尾

//bad
const a = {k1:v1,k2:v2,}
const b = {
    k1:v1,
    k2:v2
}

//good
const a = {k1:v1,k2:v2}
const b = {
    k1:v1,
    k2:v2,
}

对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法

//bad
const a = {}
a.x = 3

//
const a = {}
Object.assign(a,{x:3})

//good
const a = {x:null}
a.x = 3

数组

• 使用扩展运算符[...]拷贝数组

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

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

//good
const itemsCopy = [...items]

• 使用Array.from()，将类似数组的对象转为数组

let likeArr = {
    0: 'react',
    1: 'Vue',
    2: 'angular',
    3: 'Node',
    'length': 4
}
let arr = Array.from(likeArr);
console.log(arr);//[ 'react', 'Vue', 'angular', 'Node' ]