es6~ 常用语法总结

  1. 声明多个变量并解构赋值

    • 解构:将对象或数组,变为多个变量
    js 复制代码
    //1. 数组解构
    let [a, b, c] = [1, 2, 3]; // 相当于 let a=1;let b=2;let c=3
    let [a, ...b] = [1, 2, 3]    //相当于 let a=1;let b=[2,3];
    let [a, b, c] = 'hel';    //相当于 let a=1;let b=2;let c=3,字符串本身是字符数组
     //2. 对象解构
    let { a, b } = { a: 'a', b: 'b' }     // 相当于 let a='a';let b= 'b';
    let {a, ...b}={a: 10, b: 20, c: 30};   //相当于 let a=10;let b={b: 20, c: 30};  
  2. 简写

    js 复制代码
        //属性简写
        const age = 12; 
        const name = "Amy";
        const person = {age, name};//相当于  const person ={age: 12, name: "Amy"}
      
      //函数和函数对象参数简写
      let person={
          getName({a}){
             console.log(a);
          };
      }
  3. 函数

    1. 箭头函数 : (a,b)=>{},单变量简写 a=>{}
    2. 函数参数: ...args,用来代替arguments
  4. ...运算符

    js 复制代码
    //1. 函数参数
    function a(...param){
          console.log(param);//参数数组     
    }
    //2.剩余变量
    let [a, ...b] = [1, 2, 3]//相当于 let a=1;let b=[2,3];
    let {a, ...b}={a: 10, b: 20, c: 30};  //相当于 let a=10;let b={b: 20, c: 30};
    
    //3.解构且合并数组
    let arr1 = [1, 2]; 
    let arr2 = [3, 4];
    let arr = [...arr1, ...arr2];//相当于let arr=[1,2,3,4]
    
      //4.解构且合并对象
      let age = {age: 15}; 
      let name = {name: "Amy"}; 
      let person = {...age, ...name};//相当于  let person ={age: 15, name: "Amy"}
      
      //解构传参
     let fun= function(a,b,c){}  
     let param=[1,2,3]
     fun(...param)
  5. 默认值

    js 复制代码
    //1.函数参数默认值
    function f(b,c=1){
       console.log(c)
    };
    f(2)//结果:1
    //2.解构默认值
    let {a=1,b}={b:2};//a=1,b=2
    let [a,b=2]=[1];//a=1,b=2
  6. 引入了Map和Set对象

  7. n次方操作符:**,eg. 2**3=8

  8. Array.includes:是否包含某元素

  9. async、await

    js 复制代码
    //异步函数
    async function a(){
    //await 必须在 async下使用
    await ajax();//等待完成
    await ajax2();
    
    }
  10. flat和flatMap

    js 复制代码
    [1,2,[3,4]].flat(1) // 变为1维数组,结果:[1,2,3,4]]

    flatMap是map和flat的结合,下面的两个操作是等价的:

    js 复制代码
    arr.flatMap(func)
     arr.map(func).flat(1)
  11. import () 方法:动态导入

  12. String.prototype.replaceAll

    js 复制代码
        const str = "hello world";
         // 之前
         str.replace(/o/g, "a")// "hella warld"
         // 现在
         str.replaceAll("o", "a")// "hella warld"
  13. ?? 运算符

    js 复制代码
        let a=b||'1' //b=null或undefined或0时,结果为1
        let a=b??'1' //b=null或undefined时,结果为1
  14. ??= 空值赋值运算

    js 复制代码
        let a=2;
        a??=1 //a=null或undefined,结果为1
        console.log(a)//结果为2
  15. ?. 对象为空时,获取其属性不报错,而获取到undefined值

    js 复制代码
       let a;
       let d=a?.b //a=null或undefined时不会报错,a.b返回undefined
相关推荐
ywf12151 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
恋猫de小郭1 小时前
2026,Android Compose 终于支持 Hot Reload 了,但是收费
android·前端·flutter
hpoenixf7 小时前
2026 年前端面试问什么
前端·面试
还是大剑师兰特7 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
泯泷7 小时前
阶段一:从 0 看懂 JSVMP 架构,先在脑子里搭出一台最小 JSVM
前端·javascript·架构
mengchanmian8 小时前
前端node常用配置
前端
华洛8 小时前
利好打工人,openclaw不是企业提效工具,而是个人助理
前端·javascript·产品经理
xkxnq8 小时前
第六阶段:Vue生态高级整合与优化(第93天)Element Plus进阶:自定义主题(变量覆盖)+ 全局配置与组件按需加载优化
前端·javascript·vue.js
A黄俊辉A9 小时前
vue css中 :global的使用
前端·javascript·vue.js
小码哥_常10 小时前
被EdgeToEdge适配折磨疯了,谁懂!
前端