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
相关推荐
不会敲代码15 小时前
手写 Mini React:从 JSX 到虚拟 DOM 再到 render,搞懂 React 底层原理
前端·javascript·react.js
kyriewen6 小时前
你的代码仓库变成“毛线团”了?Monorepo 用 Turborepo 拆成“乐高积木”
前端·javascript·面试
身如柳絮随风扬6 小时前
你知道什么是 Ajax 吗?—— 从入门到原理,一篇彻底搞懂
前端·ajax·okhttp
旷世奇才李先生7 小时前
Vue3\+TypeScript 2026实战——企业级前端项目架构搭建与性能优化全指南
前端·架构·typescript
Beginner x_u7 小时前
前端八股整理(工程化 02)|CommonJS/ESM、Webpack Loader/Plugin 与Vite 对比
前端·webpack·node.js·plugin·loader
openKaka_8 小时前
createRoot 到底创建了什么:FiberRootNode 和 HostRootFiber 的初始化过程
前端·javascript·react.js
习明然8 小时前
UniApp开发体验感受总结
前端·uni-app
刀法如飞9 小时前
Claude Code Skills 推荐:2026年最值得安装的10个AI技能
前端·后端·ai编程
Lee川9 小时前
面试手写 KeepAlive:React 组件缓存的实现原理
前端·react.js·面试
墨染天姬10 小时前
【AI】cursor提示词小技巧
前端·数据库·人工智能