JS高级---对象特点-继承和ES6对象特点-继承属性继承方法继承 ES6 函数参数默认值对象的简写解构数组解

对象特点-继承

属性继承

      function Father(num, color, age) {
        this.num = num;
        this.color = color;
        this.age = age;
      }

      function Son(num, color, age, name) {
        // 借用上面 Father 方法  this = 实例 = 下面代码的son1
        Father.call(this, num, color, age);
        // 儿子想要复用父亲的某些代码 父亲方法.call(this,形参1，形参2。)
        this.name = name;
      }

      const son1 = new Son(11, "red", 22, "小明");
      console.log(son1); // 输出 {num: 11, color: 'red', age: 22, name: '小明'}

方法继承

      // 方法继承：要继承的子级.prototype.方法 =  被继承的父级.prototype.方法
      function Father(num, color, age) {
        this.num = num;
        this.color = color;
        this.age = age;
      }

      Father.prototype.say = function () {
        console.log(this.color + "是什么颜色");
      };

      Father.prototype.saySomething = function () {
        console.log(this.num + 11);
      };

      function Son(num, color, name, num1) {
        Father.call(this, num, color);
        this.name = name;
        this.num1 = num1;
      }

      // 方法继承  把父亲的行为 也设置到儿子上
      Son.prototype.say = Father.prototype.say;
      Son.prototype.saySomething = Father.prototype.saySomething;

      const son1 = new Son(11, "red", "小明", 22, 33);

      // 调用父亲方法
      son1.say(); // 输出  red是什么颜色
      son1.saySomething(); // 输出  22

ES6

函数参数默认值

      function name(num = "1", age = "222") {
        console.log(num, age);
      }

      name(); // 没有传递参数  输出 1  222
      name(22, 55); // 传参后  输出 22  55

对象的简写

      // 定义的变量名如果和你的对象的属性名一致 可以简写
      const name = "悟空";
      const num = 111;
      const obj = {
        name,
        num,
      };
      console.log(obj); // 输出 {name: "悟空", num: 111}
      console.log(obj.name); // 输出 悟空
      console.log(obj.num); // 输出 111

      // 对象的方法 简写
      const obj1 = {
        say() {
          console.log("say what?");
        },
      };
      console.log(obj1); 
      console.log(obj1.say);

解构

数组解构

      const arr = ["悟空", "八戒", "龙马", "三藏"];
      // 希望 声明四个变量  a = 悟空  b = 八戒 。。。
	  // 对数组解构
       const [a,b,c,d] = arr
       console.log(a,b,c,d); // 输出 悟空 八戒 龙马 三藏

对象解构

       const obj = {
           name: '悟空',
           age: 5000
       }
       // 对 对象解构
      const { name, age } = obj;
      console.log(name, age); // 输出 悟空 5000

解构+默认值

      const arr1 = [1]
      const [a,b] = arr1
      console.log(a,b); // 输出 1 undefined

      const arr2 = [1];
      const [a, b = 100] = arr; // b = 100 是默认值 （你没有，就使用我的，你有，使用你的）
      console.log(a, b); // 输出 1 100

       const obj1 = {
        username: "小明",
        height: 500,
      };
      const { username, height = 200 } = obj;
      console.log(username, height); // 输出 小明 500
      // 因为对象已有 height: 500 所以定义的对象 height = 200 不会被使用

拓展/剩余/延展运算符

获取剩余数组

      const [a,b,...c] = [1,2,3,4,5,6]
      console.log(c); // 输出[3,4,5,6]

      const [a,b,...c] = [1,2]
      console.log(c); // 输出[]

获取剩余对象

      const {a,...c} = {a:1,b:2,c:3}
      console.log(c); // 输出 {b:2,c:3}
      const { a, b, ...c } = { a: 1, b: 2 };
      console.log(c); // 输出 {}

伪数组转真数组

      const lis = document.querySelectorAll("li");
      const newLis = [...lis]; // 转换

获取剩下用在函数的形参上

      function total(...args) {
        let sum = 0;
        // 遍历数组   计算总和
        args.forEach((value) => (sum += value));
      }
      total(1, 2); // 输出 3
      total(1, 2, 3); // 输出 6
      total(1, 2, 3, 4); // 输出 10

数组去重

for循环

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>21-数组去重-for循环</title>
  </head>
  <body>
    <input type="text" />
    <ul></ul>
    <script>
      const input = document.querySelector("input");
      const ul = document.querySelector("ul");
      const arr = ["a", "b"];

      // 渲染页面
      render();

      input.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
          // 定一个变量，表示数组有没有重复的数据
          let isHas = false;
          for (let index = 0; index < arr.length; index++) {
            // 判断数组中的每一个元素 和 当前要输入的值做比较
            // 如果找到了，设置 isHas=true 同时打断循环
            if (arr[index] === this.value) {
              // 找到重复了
              isHas = true;
              break;
            }
          }
          // 判断数据有没有重复
          if (isHas) {
            // 有重复
            console.log("有重复");
          } else {
            // 没有重复 添加
            arr.push(this.value);
            render();
          }
        }
      });

      // 负责渲染页面
      function render() {
        const html = arr.map((value) => `<li>${value}</li>`).join("");
        ul.innerHTML = html;
      }
    </script>
  </body>
</html>

for+splice

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>21-数组去重-for循环+splice</title>
  </head>
  <body>
    <input type="text" />
    <ul></ul>
    <script>
      const input = document.querySelector("input");
      const ul = document.querySelector("ul");
      let arr = ["a", "b"];
      render();

      input.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
          // arr = ["a","b","c"]
          // 先找到 “b” 在我数组的索引 位置
          // 执行 数组 删除元素  arr = [a,c]
          // 然后 再去执行 添加元素的操作

          let i = -1; // -1 表示没有找到
          for (let index = 0; index < arr.length; index++) {
            // this.value =  "b"
            if (arr[index] === this.value) {
              i = index;
              break;
            }
          }

          // 判断 i 等于-1 表示没有相同，直接添加
          //  i 不等于-1 表示有相同，先执行删除 再添加
          if (i === -1) {
            // arr.push(this.value);
          } else {
            // 找到相同 执行删除
            arr.splice(i, 1);
          }
          // 找到不相同 执行添加
          arr.push(this.value);
          // 数组发生改变  重新渲染页面
          render();
        }
      });

      function render() {
        const html = arr.map((value) => `<li>${value}</li>`).join("");
        ul.innerHTML = html;
      }
    </script>
  </body>
</html>

some

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>21-数组去重-some</title>
  </head>
  <body>
    <input type="text" />
    <ul></ul>
    <script>
    // 获取dom元素
      const input = document.querySelector("input");
      const ul = document.querySelector("ul");
      const arr = ["a", "b"];
    // 渲染页面
      render();

      input.addEventListener("keydown", function (event) {
        //判断按下的是不是回车
        if (event.key === "Enter") {
          // console.log(this.value); // 判断事件是否生效

          // some 如果数组中有一项 是返回了true 整个some方法就返回了true
          // 调用some方法的时候，在它的回调函数中 拿数组中的元素和当前要添加的元素 做比较 如果相等就返回true，表示找到了重复
		  // 在我的数组中找到了和你待添加的元素 如果一样的值就返回true
          const isHas = arr.some((value) => value === this.value); 
          if (isHas) {
            // 有重复了 不要再添加
            console.log("有重复了 不要再添加");
          } else {
            // 没有重复 把它添加到数组中
            arr.push(this.value);
            // 数组发生改变 重新调用render方法 来实现页面的渲染
            render();
          }
        }
      });

      // 负责渲染页面
      function render() {
        const html = arr.map((value) => `<li>${value}</li>`).join("");
        ul.innerHTML = html;
      }
    </script>
  </body>
</html>

filter

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>21-数组去重-filter</title>
  </head>
  <body>
    <input type="text" />
    <ul></ul>
    <script>
      const input = document.querySelector('input');
      const ul = document.querySelector('ul');
      let arr = ['a', 'b'];
      render();

      input.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
          // filter 先过滤出  和当前的输入框的值 不相等的 数据
          // 然后再添加
          // 当前输入框的值 "d"
          // 数组 ['a','c','d']
          // 数组过滤 不包含 "d"  => ['a','c']
          // ['a','c'] 再次添加 'd' 进去 就可以了

          // 过滤出不包含 当前输入框的值的数组
          const newArr = arr.filter((value) => value !== this.value);
          // 让我们的旧的数组 等于你过滤后的数组
          arr = newArr;
          arr.push(this.value);
          render();
        }
      });

      function render() {
        const html = arr.map((value) => `<li>${value}</li>`).join('');
        ul.innerHTML = html;
      }
    </script>
  </body>
</html>