class创建一个类,数组与对象解构方法

<!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>Document</title>
  </head>
  <body>
    <script>
      //1. 用class创建一个类, 并实现自有,共享,静态成员的声明与输出
      class Class1 {
        //公共成员
        age = 1;
        constructor(name, email) {
          //自有成员
          this.name = name;
          this.email = email;
        }
        //共享成员
        getInfo() {
          return `${this.name},${this.email}`;
        }
        //静态成员
        static status = "enabled";
      }
      const obj1 = new Class1("ddkk", "eek@ww");
      console.log(obj1);
      console.log(obj1.getInfo());
      console.log(Class1.status);
      //类的继承
      class Class2 extends Class1 {
        constructor(name, email, age) {
          super(name, email);
          this.age = age;
        }
        getInfo() {
          return `${super.getInfo()},${this.age}`;
        }
      }
      const obj2 = new Class2("ieiei", "ek@33", 33);
      console.log(obj2);
      console.log(obj2.getInfo());
    </script>
    <script>
      //2. 实例演示数组与对象解构方法
      //声名定义
      let [name, age, address] = ["jks", 12, "kdjdo"];
      console.log(name, age, address);
      //更新
      [name, age, address] = ["jdnjd", 19, "122"];
      console.log(name, age, address);
      //参数不足，默认值
      [name, age, address = "中国"] = ["dkdk", 13];
      console.log(name, age, address);
      //参数过多，...rest
      [name, ...rest] = ["dd", "33", "333"];
      console.log(name, rest);
      //多用于多数据互换
      let x = 1;
      let y = 2;
      let z = 3;
      [z, y, x] = [x, y, z];
      console.log(x, y, z);
      //对象解构,可用于json数据处理
      //目标是把对象中的属性值保存到对应的，与属性同名的变量中
      let { id, name: productName, num } = { id: 1, name: "dkdk", num: 33 };
      console.log(id, productName, num);
      //更新，用一对大括号，把整个表达式封装起来
      ({ id, name: productName, num } = { id: 2, name: "dkdk", num: 33 });
      console.log(id, productName, num);
      //如果左边模板中的变量存在命名冲突怎么办？起一个别名name:productName
      let { id: itemId, ...arr } = { id: 1, name: "dkdk", num: 33 };
      console.log(`${itemId}`);
      console.log(arr);
    </script>
  </body>
</html>
相关文章
