一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

常用的ES6方法

一、解构

一般情况下拿到的后端返回的数据

const userInfo = {
  name: '张三',
  age: '100',
  sex: '男',
  profession: '掏粪工',
  relatives: {
    sister: '姐姐',
    brother: '哥哥'
  }
}
const data = {
  code: 200,
  msg: '成功',
  data: userInfo
}
const name = data.data.name
const age = data.data.name

如果想获取name和age的话，通常使用的方法

const name = data.data.name
const age = data.data.name

但是这个看上去也重复了很多，比如data.data这些，或者说我们想拿他的亲属关系使用解构的方式

const { name, age, sex, profession: pro } = data.data

通过解构拿到参数的值，也可以给他换个命名，一举多得

二、字符拼接`${val}`

以前的拼接

let str = '他的名字叫: ' + name

使用ES6语法后

let str1 = `他的名字叫: ${name}`

修改后长的更好看了，出来混的，好看很重要。

三、数组合并`[...arr1, ...arr2]`

之前数组合并

let arr1 = [1, 2, 3, 4], arr2 = [3, 4, 5, 6, 7]
let newArr = arr1.concat(arr2)

ES6的数组合并

let newArr1 = [...arr1, ...arr2]

四、去重 `new Set()`

使用new Set去重

let newArr1 = [...new Set([...arr1, ...arr2])]

五、对象合并`Object.assign({}, obj)`

之前操作

let obj1 = {name: '张三'}, obj2 = { age: '25' }
let obj3 = {
  name: obj1.name,
  age: obj2.age
}

ES6操作

let obj1 = {name: '张三'}, obj2 = { age: '25' }
let obj = Object.assign({}, obj1, obj2)

六、可选链操作符

obj?.name

如果存在就返回值，不存在了会返回undefined

七、空值合并操作符

如果存在就返回值，不存在就返回默认值

const name1 = obj2?.name ?? '王五' // 王五

八、字符1转number

通过+号，修改str为number

const strNum1 = '1'
console.log(typeof(+strNum1)) // number

九、解析嵌套数组flat

之前操作

let str3 = [1, 3, 4, [5, 6, 7, [9, 10, 11, [12, 13]]]]
let str4 = str3.reduce((pre, val) => pre.concat(val), [])

能看到的是，我们只能解析一层

如果要解析多层，还需要递归循环

function flatDeep(arr, d = 1) {
    return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), []) : arr.slice();
};

这里可以使用flat

let str5 = str3.flat(Infinity)
console.log(str5)

十、fill填充数组

fill的参数第一个是填充值，第二个是起始点，第三个是终止点，填充不包含终止点

let arr3 = [1,2,3,4,5,6,7,8,9].fill(0, 0,3) //  [0, 0, 0, 4, 5, 6, 7, 8, 9]

十一、并存多个判断用includes()

// 判断 如果num = 1, 3, 4, 6时通过
const numArr1 = [1, 3, 4, 6]
const num = 1
if(numArr1.includes(num)) {
  console.log('通过')
}

十二、状态管理 new Map()

如果有多种状态，常用的方法是

const status1 = 1
let status1Text
if (status1 === 1) {
  status1Text = '状态1'
} else if (status1 === 2) {
  status1Text = '状态2'
} else if (status1 === 3) {
  status1Text = '状态3'
} else if (status1 === 4) {
  status1Text = '状态4'
}

优化后

// 更好的写法
const statusMap = new Map([
  [1, '状态1'],
  [2, '状态2'],
  [3, '状态3'],
  [4, '状态4'],
])
status1Text  = statusMap.get(status1)

十三、Object.keys()、Object.values()、Object.entries()

对对象进行操作

const userInfo = {
  name: '张三',
  age: '100',
  sex: '男',
  profession: '掏粪工',
  relatives: {
    sister: '姐姐',
    brother: '哥哥'
  }
}
let keys = Object.keys(userInfo)
let values = Object.values(userInfo)
let entries = Object.entries(userInfo)
console.log(keys, values, entries)

结果

暂时只有这么些，不足之处，敬请留言！！！

常用的11个js技巧