ES6的一些基础知识点

1、解构赋值

一般时候会这样写，ES5写法：

const obj = {
    a:1,
    b:2,
    c:3,
    d:4
}

取值是下面这样的

const a = obj.a
const b = obj.b
const c = obj.c
const d = obj.d

或者是这样取值的

const e = obj.a + obj.b
const f = obj.c + obj.d

其实，类似这样的写法可以用ES6语法编写，且更加简短，ES6写法：

const {a, b, c, d} = obj

取值是下面这样

const e = a + b,
cosnt f = c + d

假如从服务端返回的数据对象中的属性名并不是自己想要的，那么可以这样取值：

const { a:newA } = obj
console.log(newA) // 1 这个newA的值就是obj对象中的属性a的值

这样就可以轻松的改变自定义自己想要的属性名

注意：

解构赋值解构的对象不能适undefined、null，否则会报错，所以需要在定义的时候给结构的对象一个默认值。

const { a, b, c, d } = obj || {}

2、合并数据

ES5一般会这样写：

定义相关的数据：

const a = [1, 2, 3]
const b = [4, 5, 6]
const obj1 = {a: 1}
const obj2 = {b: 2}
const obj3 = {a: 3, c: 4}

合并数据：

const c = a.concat(b) // [1, 2, 3, 4, 5, 6]
const newObj1 = Object.assign({}, obj1, obj2) // { a:1, b:2 } 

这里需要注意的是，obj1和obj3都有a属性，因为对象的assign方法会合并它的子对象，
如果其中属性有相同的，就会取值最后的子对象的属性值。
const newObj2 = Object.assign({}, obj1, obj2, obj3) // { a:3, b: 2, c:4 }

ES6可以这样写：

const a = [1, 2, 3]
const b = [1, 4, 5]

合并数组可以用扩展运算符...
const c = [...a, ...b] // [1, 2, 3, 1, 4, 5]

如果需要对数组去重可以下面操作：
const d = [...new Set([...a, ...b])] // [1, 2, 3, 4, 5]

const obj1 = { a: 1 }
const obj2 = { b: 2 }
const obj3 = { c：3 }
合并对象，同样可以用扩展运算符：
const newObj = { ...obj1, ...obj2 } // { a:1, b:2 }

3、字符串拼接

一般的用法：

const name = 'Gavin'
const score = 60
let result = ''
if(score >= 60){
    result = `${name}的考试成绩及格`
}else{
    result = `${name}的考试成绩不及格`
}

其实ES6字符串模板可以进行任何的javascript表达式，可以进行运算，以及引用对象属性：

const name = 'Gavin'
const score = 60
const result = `${name}${score >= 60 ? '的成绩及格'：'的成绩不及格'}`

4、关于if的多条件判断，可以使用ES6数组的includes方法

if( str === 'a' || str === 'b' || str === 'c' ){
    console.log(str)
}

可以改成： 

const condition = ['a', 'b', 'c']
if(condition.includes(str)){
    console.log(str)
}

5、关于数组的过滤方法

如果需要精准过滤出一个数组中某个满足特定要求的元素，一般我们会这么写：

const arr = [
    {label: 'a', count: 10},
    {label: 'b', count: 15},
    {label: 'c', count: 28},
    {label: 'd', count: 19}
]
const result = arr.filter(item => item.count > 20)

console.log(result) 
// 如果有满足过滤要求的元素，就会打印出: [{label: 'c', count: 28}]
// 如果没有满足过滤要求的元素， 就会打印出空的数组： []

但是ES6有一个更好的方法：

const arr = [
    {label: 'a', count: 10},
    {label: 'b', count: 15},
    {label: 'c', count: 28},
    {label: 'd', count: 19}
]
const result = arr.find(item => item.count > 20)
console.log(result) // {label: 'c', count: 28}

6、数组的扁平化

const obj = {
    zhangsan:[1, 2, 3],
    lisi: [3, 4, 5],
    wangwu: [4, 5, 6]
}

需要拿到obj所有属性的值，组成一个数组：
let result = []
for(const key in obj){
    if(Array.isArray(obj[key])){
        result.push(obj[key])
    }
}

改进为：

result = Object.values(obj).flat(Infinaty)

Object.Values(obj)方法可以将对象obj的所有属性值提取出来放在同一个数组中
flat方法是对数组进行扁平化处理，接受一个参数，如果是一维数组就填入1， 二维数组就填入2，
这里填入Infinity，无论是几维数组都可以扁平化处理 

flat方法不支持IE浏览器

7、获取对象属性值的问题

如果需要获取一个对象的某个属性值，可以直接用：

const obj = {name: 'Gavin'}

console.log(obj.name)

但是我们不知道这个对象是否有这个属性的时候，再这样获取这个对象的属性值，就会导致报错
console.log(obj.age) //报错，因为没有age这个属性
当然这个时候我们可以进行判断

console.log(obj.age?obj.age: undefined) // undefined

如果用到可选链操作符，就没有这么复杂了，直接这样写：

console.log(obj?.name) // Gavin

console.log(obj?.age) // undefined

注意，很多人在使用可选链操作符的时候会出现编译报错的问题，Module parse failed

因为项目的package.json这个文件里面的一个依赖的版本偏低，

"@vue/cli-plugin-babel": "3.5.3",

将其升级到"@vue/cli-plugin-babel": "~4.5.0",就可以解决问题

8、给对象添加属性

ES6支持给对象添加属性的时候，属性名可以动态的添加，即用表达式的方式：
let obj = {}
let index = 1
obj[`prop${index}`] = '属性一'

 9、输入框空值判断

空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

注意，很多人在使用可选链操作符的时候会出现编译报错的问题，Module parse failed

因为项目的package.json这个文件里面的一个依赖的版本偏低，

"@vue/cli-plugin-babel": "3.5.3",

将其升级到"@vue/cli-plugin-babel": "~4.5.0",就可以解决问题

10、异步函数使用的async await

异步函数获取数据，一般都是通过Promise来实现
const fn1 = () =>{
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1)
        }, 2000)
    })
}

const fn2 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reslove(2)
        }, 4000)
    })
}

const fn = () => {
    fn1().then(res1 => {
        console.log(res1)
        fn2().then(res2 => {
            console.log(res2)
        })
    })
}

看似可以实现，按时如果嵌套太多的话，就会形成回调地狱

这个时候用async await，就不怕形成回调地狱了

const fn = async () => {
    const res1 = await fn1()
    const res2 = await fn2()
    console.log(res1) // 1
    console.log(res2) // 2
}

如果需要并发请求，需要用到Promise.all()

const fn = () => {
    Promise.all([fn1(), fn2()]).then(res => {
        console.log(res)
    })
}

另外一个相关是方法是Promse.race(),就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。