前端基础知识-ES6解构赋值（将数组内元素、字符串内字符、对象内属性值快速赋值给其他变量）

先知demons2024-05-12 20:54

前言：

将数组、字符串、对象进行展开，并将展开的数据赋值给指定变量，以达到语法简化的目的，日常开发中可以大大提升我们的效率。

主要语法：

一、[变量1,变量2。。。]=目标数组

将数组里面的内容赋给其他变量

场景1：

javascript 复制代码

      let arr = ["1", "2", "3"];
      let [a, b, c] = arr;
      console.log(a, b, c);

控制台输出：

场景2：

将数组内部分值赋值给其他变量

javascript 复制代码

      let arr = ["1", "2", "3"];
      let [, , c] = arr;
      console.log(c);

控制台输出：

场景3：

与扩展运算符搭配使用，赋值指定变量，将余下的元素赋值指定数组

javascript 复制代码

      let arr = ["1", "2", "3"];
      let [a, ...demo] = arr;
      console.log(a, demo);

控制台输出：

二、[变量1,变量2。。。]=目标字符串

场景1：

赋值全部字符串

javascript 复制代码

      let str = "1234567";
      let[a,b,c,d,e,f,g]=str;
      console.log(a,b,c,d,e,f,g);

控制台输出：

场景2：

赋值部分字符

javascript 复制代码

      let str = "1234567";
      let [a, b, c] = str;
      console.log(a, b, c);
      let [, , , , , , g] = str;
      console.log(g);

控制台输出：

场景3：

与扩展运算符搭配使用，赋值指定变量，将余下的字符赋值指定数组

javascript 复制代码

      let str = "1234567";
      let [a, ...demo] = str;
      console.log(a, demo);

控制台输出：

三、{变量1，变量2}=目标对象

场景1：

赋值全部属性值

javascript 复制代码

      let obj = {
        id: 1,
        name: "admin",
        age: 22,
      };
      let { name, id, age } = obj;
      console.log(name, id, age);

控制台输出：

场景2：

赋值部分属性值

javascript 复制代码

      let obj = {
        id: 1,
        name: "admin",
        age: 22,
      };
      let { name, age } = obj;
      console.log(name, age);
      let { id } = obj;
      console.log(id);

控制台输出：

四、 {属性名称1:变量名称1}=目标对象

场景1：

赋值部分属性

javascript 复制代码

      let obj = {
        id: 1,
        name: "admin",
        age: 22,
      };
      let { name: sname } = obj;
      console.log(sname);