使用 es6写更加简洁的 js代码

使用新语法配合 babel 的转码，已经可以解决一些浏览器的兼容问题了。既然如此，那就可以在具体的业务中多使用新语法去探索一下怎么更好的去写代码吧。分享下个人开发中整理的常用的 js 写法技巧

使用 let / const

var 命令会发生”变量提升“现象，即变量可以在声明之前使用，值为 undefined。 个人认为，对声明的变量确定后面不会发生更改时，使用 const, 这样代码的可读性也会增强。

• const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。
• let 变量指向的内存地址，保存的只是一个指向实际数据的指针

补充 const 定义的变量不是数据不可变，而是保存的引用地址不能发生改变。例子如下：
const person = { age: 22 }
person.age = 1

console.log(person.age ) // 1
复制代码

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

好处是：解决了访问多层嵌套的对象或数组的命名，减少代码量

• 声明多个变量:

let [age, name, sex] = [22, 'paopao', 1]
console.log(age, name, sex) // 22, paopao, 1
复制代码

• 使用在对象中：

const obj = {
  name: {
    firstName: 'da',
    lastName: 'paopao'
  }
}
const { firstName, lastName } = obj.name // 如果我们多处使用 firstName， 那就不必要每个地方都写 obj.name.firstName, 极大提升代码效率
// 等同于
const firstName = obj.name.firstName
const lastName = obj.name.lastName
复制代码

• 使用在函数中

// 在参数中结构赋值，获取参数, 当参数多的使用时候十分方便
function Destructuring({ name, age }) {
  return { name, age } // 相当于 { name: name, age: age } , 可以简写
}

const obj = { name: 'dapaopao', age: 22 }
Destructuring(obj)
复制代码

扩展符的运用

es6 扩展符有很多用法，他可以使你的代码更加简洁，易懂。这里就举例常用的用法

• 在对象中的用法：

let obj = {
  name: 'dapaopao',
  age: 22,
  sex: 1
}

// 复制对象。扩展符为浅复制！！！
const copy = { ...obj }

// 修改对象属性值(生成新对象) 相当于 Object.assgin({}, obj, { age: 18 })
const newObj = { ...obj, age: 18 }

// 结合结构赋值
let { sex, ...z } = obj
z // { name: 'dapaopao', age: 22 }
复制代码

• 在数组中的用法：

const arr = [1, 2, 3]
const arr2 = [4, 5, 6, 4]

// 复制数组。扩展符为浅复制！！！
const newArr = [...arr] // ...[1, 2, 3] => 相当于展开数组：1, 2, 3

// 合并数组
const conbineArr = [...arr, ...arr2]

// 结合求最大值函数
Math.max(...arr)

// 结合 Set 实现数组去重。注意：json 等对象数组不可用
[...new Set(arr2)] // [4, 5, 6]
复制代码

数组用法

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

Array.isArray(arr) // 判断是否为数组

arr.includes(2) // true 判断数组中是否包含某项

arr.findIndex(d => d === 3) // 2 找出第一个符合条件的数组成员并返回数组下标, 找不到返回 -1

arr.find(d => d === 3) // 3 找出第一个符合条件的数组成员并返回, 找不到返回 undefined

// es5 其他还有 filter map forEach 等，这里不做举例。
arr.every(d => d > 2) // false 每一项都满足条件则返回 true

arr.some(d => d > 2) // true 只要有一项满足条件则返回 true
复制代码

find/findIndex : 找出第一个符合条件的数组成员之后不再匹配，一定程度下优化查找。 includes: 返回 true/false, 相较于 indexOf, 实用多了

• flat() : 扁平化数组，常用于将数组转化为一维数组

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

arr.flat() // [1, 2, 3, 4] 扁平化数组, 默认展开一层。

const arr2 = [1, 2, [3, 4, [5, 6]]]

arr2.flat() // [1, 2, 3, 4, [5, 6]]
arr2.flat(2) // [1, 2, 3, 4, 5, 6] flat(3) 也是展开两层...
复制代码

• flatMap(): 在数组执行 map 方法后执行 flat, 用的不多，其实可以写 map 后写 flat 更好懂点。

[2, 3, 4].flatMap(x => [x, x * 2]) //  [ 2, 4, 3, 6, 4, 8 ]
// 1. [2, 3, 4].map(d => [d, d * 2]) => [[2, 4], [3, 6], [4, 8]]
// 2. [[2, 4], [3, 6], [4, 8]].flat()
复制代码

补充常用的对象转数组的用法：

const obj = { name: 'dapaopao' }
  
Object.keys(obj) // ['name']
Object.values(obj) // ['dapaopao']
Object.entries(obj) // ['name', 'dapaopao']
复制代码

模板字符串

用的挺多的，但是不兼容 IE !

const name = 'dapaopao'

const newStr = `welcome ${name}` // welcome dapaopao

// the same as
const newStr = 'welcome ' + name
复制代码

使用 async / await

这里做个例子进行介绍

async function test() {
  const data = await axios.get('https://randomuser.me/api/')
  console.log(data)
}
// 等同于
function test() {
  axios.get('https://randomuser.me/api/').then(res => console.log(res)) // axios 也是 promise 对象
}
复制代码

优化 if/else 语句

当逻辑或||时，找到为 true 的分项就停止处理，并返回该分项的值，否则执行完，并返回最后分项的值。 当逻辑与&&时，找到为 false 的分项就停止处理，并返回该分项的值。

const a = 0 || null || 3 || 4
console.log(a) // 3

const b = 3 && 4 && null && 0
console.log(b) // null
复制代码

减少 if / else地狱般的调用

const [age, name, sex] = [22, 'dapaopao', 1]

if (age > 10) {
  if (name === 'dapaopao') {
    if (sex > 0) {
      console.log('all right')
    }
  }
}

// 使用 &&
if (age > 10 && name === 'dapaopao' && sex > 0) {
  console.log('all right')
}

// 或者(太长了不推荐)
age > 10 && name === 'dapaopao' && sex > 0 && console.log('all right')
复制代码