ES6及以上常用语法

Merry He 2/13/2023

# 一、 import * as xxx from "yyy"

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

export const videoOptions = [
    {
        label: '免费',
        value: '0'
    }
]
//方法
export const publicMethods = () => {
    console.log('ES6')
}

引入：import * as configObj from "文件路径"
使用：configObj.videoOptions / configObj.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和records和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)
            //或reject("10086")
        },1000)
    })
    console.log(3)
}
//调用异步函数
fun()  // 1 2   Promise状态未被处理,await以下的代码不会执行，因此 3不输出

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

//Promise处理成功，进入成功态(fulfilled) 返回结果
async function fun(){
    console.log(1)
    const result = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log(2)
            resolve("10086")
        },1000)
    })
    console.log(result)
}
//调用异步函数
fun() // 1 2  10086

//Promise处理异常，进入失败状态(rejected)，捕获异常
async function func2(){
    try{
        const r = await new Promise((resolve,reject)=>{
            setTimeout(()=>{
                reject("异常10086")
            },1000)
        })
    }catch(err){
        console.log(err) // 异常10086
    }
}
func2()

前端项目中通常使用 async/await 来代替 Promise 的链式调用，看起来更简洁

getData(){
    try{
        const params = {}
        const res = await myAPI(params)//接口请求
        if(res.code === 1000){
         //do something
        }else{
         //do something
        }
    }catch(err){
        //捕获接口请求错误信息
    }   
}

Merry He's Blogs

Choose mode