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
相关推荐
用户新32 分钟前
V8引擎 精品漫游指南--Ignition篇(下 一) 动态执行前的事情
前端·javascript
@PHARAOH2 小时前
WHAT - GitLens vs Fork
前端
yqcoder2 小时前
前端性能优化:如何减少重绘与重排?
前端·性能优化
洋子3 小时前
Yank Note 系列 13 - 让 AI Agent 进入笔记工作流
前端·人工智能
wenzhangli75 小时前
Ooder A2UI 核心架构深度解析:WEB 拦截层的设计与实现
前端·架构
前端百草阁6 小时前
【前端性能优化全链路指南】从开发编写到构建运行的多维度实践
前端·性能优化
神探小白牙6 小时前
eCharts 多系列柱状图增加背景图
javascript·ecmascript·echarts
女生也可以敲代码6 小时前
AI时代下的50道前端开发面试题:从基础到大模型应用
前端·面试
ZhengEnCi6 小时前
M5-markconv自定义CSS样式指南 📝
前端·css·python
IT_陈寒6 小时前
SpringBoot自动配置的坑差点让我加班到天亮
前端·人工智能·后端