常用的ES6以上新语法总结

1、变量定义关键字

        /*
        var: 全局生效，且可以重复定义变量
        let:  只生效在块级作用域
        const: 常量定义，赋值后不可再修改
        */
        //1、let无法重复声明，但是var可以
        var man = '1'
        var man = '2'
        let woman = '3'
        const wowoman = '4'
        //2、 let  生效在块级作用域：代码块{}、if、while语句等
        {
            let m ='1'
            //出了{}就无法打印,但是在函数中的链级作用域可以
        }

2、箭头函数

        // 用箭头代替函数 //二者的区别在于this回调上有区别
         let fu = function(a,b){
           return a+b;
         }
         //等价于
         let fn = (a,b) =>{
            return a+b;
         }
        //调用函数名fn的函数
        let fes = fn(1,2)

3、特殊符号

        //...扩展运算符，可以把一个数组转化为一个分割的参数序列
        const tfboys =['王源','王俊凯','易烊千玺'] 
        console.log(...tfboys)

        //Symbol数据类型
        let s1 = Symbol("wy") //symbol表示独一无二的值
        let s2 = Symbol("wy")
        console.log(s1===s2);//返回false,名字一样但是代表不同的两个人
        let s3 = Symbol(1)
        let res = s3+10   //报错，不能和其他数据进行运算，自己和自己也不行

4、遍历

        // for of 
        const xiyou = ['er','tr','yr']
        for(let v of xiyou){
            console.log(v);
        }

        // for in 区别在于，for in打印的是键值
        for(let v in xiyou){
            console.log(v);
        }

5、模块引用

        //模块导出
        //方式一，分别暴露
        export function f1(){

        }
        export let m = 3;

        //方式二，统一暴露
        function f2(){

        }
        let n = 3;
        export{f2,n}
 
        //方式三，默认暴露
        export default {

        }

        //模块引入

        //方式一：通用导入
        import * as m1 from 'xxx.js';

        //方式二：解构导入
        import {f2 as function2,n} from 'xxx.js';
        
        //默认暴露的引入
        import {default as m3 } from 'xxx.js';
        //or 简便写法
        import m3 from'xxx.js';
        

6、 promise、async、 await（主要用于前后台异步操作）

promise是ES6为了解决异步编程（如文件I/O操作，网络请求等要等待一段时间才能接收到数据）的一个解决方案，使用promise可以封装异步操作，以返回成功或者失败的结果

        //1、先实例化一个promise对象，对象里面有一个异步操作函数，
        //且有两个形参resolve代表成功,reject代表失败
        const p = new Promise(function(resolve,reject)=>{
            setTimeout(() => {
                //在异步操作函数中写一个异步操作假设从后台数据库获得数据
                let data = '从后端获得的数据'
                //假设成功获取，调用成功函数改变promise对象状态：成功
                resolve(data);
                //假设读取失败，调用失败函数改变promise对象状态：失败
                //reject(data)
            }, 1000);        
        });

        //2、调用promise对象的then方法，根据promise对象的状态，
        //若成功则调用第一个函数，失败就调用第二个函数
        p.then(function(value){
            console.log('成功:',value)

        }, function(reason){
            console.error('失败:',reason)
        })
        //当然还可以用catch方法来捕捉错误代替上面的失败调用
        p.catch(function(reason){
           console.error('失败:',reason)
        });

*使用async和await可以实现让异步操作和同步操作一样的效果
使用原则如下：
1、async可单独使用，表示函数是异步函数，但使用await时,必须放在async的异步函数中
2、async函数的返回值为promise对象，且promise对象的结果由async函数的返回值决定（只要返回的不是promise对象，默认是成功的状态）

        //async函数,
        async function fn(){
            //无论返回字符串或空,只要你返回的结果不是一个Promise对象，那么默认就是返回一个成功的
            //即resolved状态的promise     
            //return '1231'
            //return;
            //若是返回的结果是一个Promise对象，那么返回成功与否取决于这个Promise对象成功与否
            return new Promise((resolve,reject)=>{
             resolve(1000);
            });
        }
        const result= fn();
        console.log(result);

3、await右侧表达式也是promise对象，await返回的是promise成功的值，若promise失败了，就会
抛出异常，需要try…catch捕获处理*

      //成功示例：
      const p = new Promise(function(resolve,reject)=>{
          resolve("成功状态");
      });

      //await要放在async函数中
      async function main(){
          let result = await p;
          console.log(result);
      }
      main();


      //失败示例:
      const p = new Promise(function(resolve,reject)=>{
          reject("失败状态");
      });

      //await要放在async函数中
      async function main(){
          try{
              let result = await p;
          console.log(result);
          }catch(e){
              console.log(e);
          }
      }
      main();

现在撰写两个代码示例，可作为以后的开发模板
示例一：不使用await,只利用promise

const getVmMachine = () => {
  const listtt = userDashboardStore.listVms();
  listtt
    .then((result) => {
      vmLists.value = result;
    }) //这里使用catch捕获错误，不用两个函数参数的形式
    .catch((error) => {
      console.error(error);
    });
console.log('------')
  //这里没使用await，所以console.log('------')这行代码可能会先于.then执行,这就是异步的坏处
};

示例二：使用await

const handleSubmit = async () => {
  const validateRet = await formRef.value.validate();
  //这里使用了await，只有const validateRet = await formRef.value.validate();这行代码执行完毕
  //才会继续执行下面的代码，有效的解决了异步时可能出现的问题
  if (validateRet !== undefined) {
    return false;
  }
  try {
    const res = await updatePasswordApi();
    if (res.data === "1") {
         //....
    } else {
        //....
    }
  } catch (error) {
    console.error(error);
  }

};

异步函数的调用

在JavaScript中，当你调用一个标记为 async 的函数时，这个函数将返回一个Promise。因此对于已经定义的异步函数，如果你想调用，有两种方法：

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }

调用方式一：

//如果在另一个 async 函数内部调用 getUser()，
//你可以使用 await 来等待 getUser() 的执行完成，
//这样可以直接得到函数内部处理的结果，而不是一个 Promise 对象。
async function callUser() {
 const res =  await getUser();
}

调用方式二：

//如果在非异步函数中调用 getUser()，
//你不能直接使用 await，因为 await 只能在 async 函数内部使用。
//但你可以使用 .then() 和 .catch() 来处理 Promise
getUser().then(() => {
  console.log('Completed');
}).catch((error) => {
  console.error('Error:', error);
});