不会ES6 你还不学！！！

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

前言

今天一起来学习es6知识

数组新增方法

扩展运算符

通过扩展运算符... 将数组转化为用逗号分隔的参数序列

let arr = [1,2,3]
let arr2 = [3,4,...arr,6]
console.log(arr2)  // [3,4,1,2,3,6]

实现数组的复制

let arr = [1,2,3]
let [...arr1] = arr
console.log(arr1) // [1,2,3]

扩展运算符与解构结合
- 用于生成数组
- 扩展运算符只能放在最后一位不然就会报错

let [arr,...arr1] = [1,2,3]
console.log(arr) // 1
console.log(arr1) // [2,3]

let [...arr, arr1] = [1,2,3] // 报错

将字符串转化为真正的数组

let str = 'vike'
console.log([...str]) // ['v','i','k','e']

构造函数新增方法
- Array.from
  - 将类数组转换为数组类似数组的对象和遍历的对象
```
let obj = {
    '0':'a',
    '1':'b',
    length:2
}
let arr = Array.from(obj)
console.log(arr)  // ['a','b']
```
  - 该方法接收第二个参数
  - 用来对每个元素进行处理处理完成后放入原数组
```
Array.from([1,2,3],(x)=>x*x)) // [1,4,9]
```
- Array.of
  - 将一组值转化为数组
  - 没有参数的时候返回一个空数组
```
Array.of(1,2,3)  // [1,2,3]
```
  - 当参数只有一个的时候为单个元素数组
```
Array.of(2) // [2]
```
数组实例对象新增方法
- copyWithin
  - 将指定位置的成员复制到其他位置返回当前数组
  - 所需参数
    - target (必要参数) 从该位置开始替换数据如果为负值表示倒数
    - start (可选) 从该位置开始读取数据
    - end(可选) 到该位置前停止读取数据
```
[1,2,3].copyWithin(0,1) //[2,3,3]
```
- find
  - 用于找出第一个符合条件的数组元素
  - 参数接收一个回调函数,第二个参数绑定回调函数的this
  - 参数分别为 value 当前值 index 当前位置 arr原数组
```
[1,2,3].find((value,index,arr)=>{
    return value > 2 // 3
})
```
- findIndex
  - 返回第一个符合条件数组元素的位置
```
[1,2,3].findIndex((value,index,arr)=>{
    return value > 2 // 2
})
```
- fill
  - 使用定值，填充数组
  - 如果填充类型是对象则是浅拷贝
```
[1,2,3].fill(3) // [3,3,3]
```
  - 接收第二个参数和第三个参数用于指定填充的起始位置和结束位置
```
[1,2,3].fill(4,0,1) // [4,2,3]
```
- entries
  - 是对键值对的遍历
```
for(let [index, ele] of ['a','b'].entries()){
    console.log(index,ele) // 0'a' 1'b'
}
```
- keys
  - 对键名遍历
```
for(let index of ['a','b'].keys()){
    console.log(index) //0 1
} 
```
- values
  - 对键值遍历
```
for(let ele of ['a','b'].values()){
    console.log(ele) // 'a'  'b'
}
```
- includes
  - 用于判断数组是否包含给定值
```
[1,2,3].includes(1) // true
[NaN,2,3].includes(NaN)// true
```
  - 方法第二个参数表示搜索的起始位置负数则为倒数
```
[1,2,3].includes(2,2) // false
```
- flat
  - 将数组扁平化处理
  - 返回一个新数组
  - 对原数组没有影响
```
[1,2,3,[3,4]].flat() // [1,2,3,3,4]
```
  - 默认只会拉平一层如果有多层嵌套可加参数
```
// 拉平两层
[1,2,3,[1,2,[1,2],],].flat(2) //[1,2,3,1,2,1,2]
```
- flatMap
  - 对数组每个元素执行map,然后对返回数组进行flat()
  - 第二个参数用来绑定遍历函数里的this
```
[1,2,3].flatMap((x)=>[x,x*2]) // [1,2,2,4,3,6]
```

对象新增方法

属性的简写
- 当键名与值相等的时候可以简写
```
let a = {apple:apple}

// 简写
let a = {apple}
```

方法简写

简写对象方法不能作为构造函数

let fn = {
    method(){
        // do something
    }
}

// 等同于
let fn = {
    method:function(){
        // do something
    }
}

属性名表达式
- 允许字面量定义对象时将表达式放入括号内
- 如果是对象会将对象转化成[object object] 类型
```
let a = 1
let o = {
'b':2,
 a:3
}
o[a] // 3
o['a'] //3
```
- 还可用于定义方法名
```
let fn = {
    ['v'+'ike']() {
        // do something
    }
}

fn.vike()
```

对象新增方法

Object.is
- 严格判断两个值是否相等

Object.is(NaN,NaN) // true
Object.is(+0,-0) // false

Object.assign
- 用于对象的合并属于浅拷贝
- 第一个参数为结果数组其余参数为合并数组

let obj = {a:1,b:2}
let obj2 = {c:3,d:4}
let obj3
Object.assign(obj3,obj,obj2) // {a:1,b:2,c:3,d:4}

Object.getOwnPropertyDescriptors
- 返回指定对象自身属性的描述对象

let obj = {a:1,vike(){return 2}}
Object.getOwnPropertyDescriptors(obj)

/*
a: {value: 1, writable: true, enumerable: true, configurable: true}
vike: {writable: true, enumerable: true, configurable: true, value: ƒ}
*/

Object.setPrototypeOf
- 用来为对象设置一个原型对象

Object.setPrototypeOf(object, prototype)

Object.getPrototypeOf
- 用来读取一个对象的原型对象

Object.getPrototypeOf(obj)

Object.keys
- 返回所有可遍历属性的键名的数组

let obj = {a:1,b:2}
Object.keys(obj) // ['a','b']

Object.values
- 返回所有可遍历属性的键值的数组

let obj = {a:1,b:2}
Object.values(obj) // [1,2]

Object.entries
- 返回所有可遍历属性的键值对的数组

let obj = {a:1,b:2}
Object.entries(obj) // [['a',1],['b',2]]

Object.fromEntries
- 将一个键值对数组转换为对象

let  arr = [['a',1],['b',2]]
Object.fromEntries(arr) // {a:1,b:2}
``

结语

ES6语法还有很多一时更不完下期再更
今日份小知识get~
「欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」