实例演示数组，对象，传参解构; 实例演示访问器属性的get,set操作

1.数组解构

①基本数组解构方式

②ES6数组解构方式

大家可以看到ES6的数组解构方式变得很简洁，没有之前版本的解构反思那么多行代码，新ES6解构添加了两个[][]方括号，等号左右边[][]里面的内容数量必须一致。

2.对象解构

①基本对象解构方式

②ES6对象解构方式

大家可以看到，ES6对象解构方式和数组解构方式差不多类似，但是再等号的左边{}一定要用（）包住否则会报错，全部用（）也可以的。

3.参数解构

①数组参数解构

②对象参数解构

大家可以看到，再入参的时候填写的参值是等号右边的内容，而再创建素组或者对象的时候等于是等号左边的内容。这样记忆就非常的清楚了。

代码块

<script>
      // 数组解构
      // 基本数组解构方式
      //   let arr = [(name = "姓名"), (age = "年龄"), (gender = "性别")];
      //   a = arr[0];
      //   b = arr[1];
      //   c = arr[2];
      //   console.table(a, b, c);
      //   新版es6 数组解构方式 等号左右边[][]里面的内容数量必须一致
      //   let [a, b, c] = [(name = "姓名"), (age = "年龄"), (gender = "性别")];
      //   console.log(a, b, c);
      //   对象解构
      //基本对象解构方式
      //   let obj = { money: 5888, name: "电脑" };
      //   let money = obj.money;
      //   let name = obj.name;
      //   console.log(money, name);
      //   新版es6 对象解构方式 再左边的=好{}外一定要加上()否则会报错,或者全部用括号包住也行。
      //   ({ money, name } = { money: 9999, name: "苹果电脑" });
      //   console.log(money, name);
      //参数解构
      //   数组参数解构
      //   let arr = ([a, b, c]) => (a + b) * c;
      //   再[]里入参数
      //   console.log(arr([5, 5, 10]));
      let obj = ({ money, name }) => [money, name];
      console.log(obj({ money: 4999, name: "手机" }));
    </script>

4.访问器属性的get,set操作

属性	含义
get	访问器属性的读取,也叫读操作
set	访问器属性的写，也叫操作

①get访问器

②set访问器

大家可以看到，get访问器可以写方法访问变量对象数组里面的值，也可以求和，set访问器可以修改变量对象数组里面的值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>访问器属性</title>
  </head>
  <body>
    <script>
      const hobby = {
        //   对象成员：属性
        data: [
          { id: 1, name: "旅游", money: 10000 },
          { id: 2, name: "玩游戏", money: 5000 },
          { id: 3, name: "零食", money: 2000 },
        ],
        //   对象成员：方法
        // get：读取访问器
        get total() {
          return this.data.reduce((t, c) => (t += c.money), 0);
        },
        // set：写访问器
        set setHobby(money) {
          this.data[2].money = money;
        },
      };
      console.log("总金额 = %d 元 ", hobby.total);
      hobby.setHobby = 1000;
      console.log(hobby.data[2].money);
    </script>
  </body>
</html>

实例ES6演示数组，对象，传参解构; 实例演示访问器属性的get,set操作

实例演示数组，对象，传参解构; 实例演示访问器属性的get,set操作

1.数组解构

①基本数组解构方式

②ES6数组解构方式

2.对象解构

①基本对象解构方式

②ES6对象解构方式

3.参数解构

①数组参数解构

②对象参数解构

代码块

4.访问器属性的get,set操作

①get访问器

②set访问器

更多相关文章

随机推荐