ES6及以上常用

一、import * as xxx from "yyy"

import * as xxx from "yyy"会把 "yyy"文件里导出的所有内容包裹在一个xxx对象里，以达到简化引入的目的，如：

//yyy路径下的文件
//状态
export const videoOptions = [
    {
        label: '免费',
        value: '0'
    },
    {
        label: '商用',
        value: '1'
    }
]
//方法
export const publicMethods = () => {
    console.log('ES6')
}

引入：import * as myObj from "文件路径"

使用：myObj.videoOptions 或者myObj.publicMethods()

二、扩展运算符

合并对象、数组等

const baseParams = {
    page:1,
    rows:20
}
const searchForm = {
    id:10086,
    name:"张三"
}
//合并参数(属性名重复的话，后者覆盖前者)  
const params = {...searchForm,...baseParams} //此时的baseParams为后者

//Object.assign()也可以合并对象,第一个参数为目标对象，第二个及后面的对象的属性都会加到目标对象中去，目标对象即为合并后的结果（属性名重复的话，后者覆盖前者）
const obj1 = Object.assign(baseParams,searchForm)//会改变baseParams的值
//console.log(obj1 === baseParams) //true
const obj2 = Object.assign({},baseParams,searchForm)//不会改变baseParams的值

三、解构赋值

//对象解构（根据对象的属性名解构，不受顺序影响）
const res = {
    code:1000,
    data:[{status:1,public:"已发布"}],
    totalCount:100
}
const {code,data = [],totalCount = 0} = res 

//数组解构(按顺序解构，受解构顺序影响)
const list = [
    {name:"一二",age:18},
    {name:"布布",age:19}
]
const [a,b] = list
//a  {name:"一二",age:18}    b {name:"布布",age:19}
//结合扩展运算符解构数组
const myList = [
    {name:"一二",age:18},
    {name:"布布",age:19},
    {name:"樱樱",age:17}
]
const [c,...d] = myList
//console.log(c)  {name:"一二",age:18}
//console.log(d)  [ {name:"布布",age:19},{name:"樱樱",age:17}]

四、模板字符串

//模板字符串相比普通字符串更加灵活，用``号，变量书写在${}里
const myName = "一二"
const str = `my name is ${myName}`
//console.log(str)  my name is 一二

五、可选链操作符（?.）

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，可选链操作符在引用为空 (null 或者 undefined) 的情况下不会抛出错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

通俗来讲 就是如果要获取到数据层级较深的某个值时，使用可选链可以简化判断。存在即返回对应的值，不存在则返回undefined。

const res = {
    code:1000,
    data:{
        records:{
            userList:[1,2,3]
        },
        getName:()=>{
            console.log(this)
        }
    }
}
//假设此处的data和recordsh和getName()不确定，有可能为null或者undefined
//想要使用userlist属性 以前的写法：
if( res.data && res.data.records ){
    console.log(res.data.records.userList)
}
//可选链操作符写法,向深处取值时在可能为null或者undefined的属性后面加?号
if(res.data?.records?.userList){
    console.log(res.data.records.userList)
}
//使用getName()方法
res.data?.getName?.()

六、空值合并运算符（??）

读取对象属性的时候，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值。

const text = response.data.text || "hello world"
const time = response.data.time || 100
const isPbulic = response.data.isPublic || true
//本意是只要属性的值为null或undefined，默认值就会生效，但是属性的值如果为空字符串或0或false，默认值也会生效，显然是不对的。
//使用空值合并运算符（??）就不会出现这种情况，它的行为类似||，但是只有左侧读取属性的值为null或undefined的时候才会使用??运算符后面的默认值
const hasPermission = response.data.permission ?? true //若左侧为false则使用false,此时默认值不生效

七、ES7之async/await

async用于声明一个异步函数,表示该函数的执行不会阻塞函数体外的代码；

await可理解为 "等待"，await用于等待一个promise实例对象，需要注意的是await必须在async声明的异步函数内使用，否则会报错。

await会暂停当前异步函数内部await表达式以下语句的执行，只有await等待的promise实例对象返回结果后才会执行await以下的代码,若不返回结果，await以下的语句将不会执行。

async function fun(){
    console.log(1)
    const result = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log(2)
            //resolve("10086")
        },1000)
    })
    console.log(3)
}
//调用异步函数
fun()  // 1 2   promise实例对象里未返回结果,因此 3不输出

若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function，若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出，使用try/catch来捕获异常。如果 await 操作符后的表达式的值不是一个 Promise实例对象，那么该值将被转换为一个已正常处理的 Promise。

async function func(){
    const res = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("正常")
        },1000)
    })
    console.log(res)  // 正常
}
func()

//捕获异常
async function func2(){
    try{
        const r = await new Promise((resolve,reject)=>{
            setTimeout(()=>{
                reject("异常")
            },1000)
        })
    }catch(err){
        console.log(err) // 异常
    }
}

通常使用async/await来代替 promise的链式调用，看起来更简洁

myMethod(){
    try{
        const params = {}
        const res = await myAPI(params)//接口请求
        if(res.code === 1000){
         //code
        }else{
         //提示后台返回的错误信息
        }
    }catch(err){
        //捕获接口请求错误信息
    }    
}