01-JavaScript 高级进阶 第四天

1.今日目标

  1. es5 原型链继承
  2. 函数默认值
  3. 对象简写
  4. 解构!!!
  5. 拓展运算符 || 剩余运算符
  6. set对象
  7. 递归(recursive)

2.es5 原型链继承

利用代码的能力实现 面向对象的特性 封装 和 继承

初体验

  1. 子类strudent 继承了父类 Person的属性
  1.     // 父类
  2.     function Person(name, height) {
  3.       this.name = name;
  4.       this.height = height;
  5.     }
  7.     Person.prototype.say = function () {
  8.       console.log(this.name);
  9.       console.log(this.height);
  10.     }
  12.     // 子类
  13.     function Student(grade, name, height) {
  14.       // 借用了父类的构造函数,完成对自己的赋值
  15.       Person.call(this, name, height)
  16.       this.grade = grade;
  17.     }
  19.     // 赋值了父类原型上的所有的 属性和方法
  20.     Student.prototype = Person.prototype;
  21.     // 修改之类的指向
  22.     Student.prototype.constructor = Student;
  24.     // 创建子类的实例
  25.     const stu = new Student("一年", "周星星", 170);
  26.     stu.say();

需求

  1. 有一个负责创建元素的构造函数 A
  2. 有一个负责创建图片的构造函数 B
  3. 构造函数 B 可以使用 构造函数 A 的原型上的所有的功能 实现继承

效果

day04 - 图1

代码

  1.     // 1 负责创建元素  
  2.     function Element(nodeName, text) {
  3.       const node = document.createElement(nodeName);
  4.       node.classList.add("element")
  5.       node.innerText = text;
  6.       this.node = node;
  7.     }
  9.     // 2 原型上挂载 共用的方法
  10.     Element.prototype.appendTo = function (selector) {
  11.       const parent = document.querySelector(selector);
  12.       parent.appendChild(this.node);
  13.     }
  15.     // 3 创建一个实例
  16.     const div = new Element("div", "做人开心就好");
  17.     // 4 追加到父元素上
  18.     div.appendTo("section");
  20.     // 5 一个新的构造函数 用来创建图片
  21.     function ElementImg(src) {
  22.       // 6 借用了 1 中的构造函数,并且把参数传递了进去
  23.       Element.call(this, "img", "");
  24.       // 7 图片设置路径
  25.       this.node.src = src;
  26.     }
  28.     // 8 继承了 父亲的构造函数上的原型上的所有 函数
  29.     ElementImg.prototype=Element.prototype;            // 修改来原型，也就修改了构造函数
  30.     // 9 重新将 constructor 的指向改回来
  31.     ElementImg.prototype.constructor=ElementImg;
  33.     // 10 创建一个图片实例：注意，实例化代码10不能在8和9之前
  34.     const img = new ElementImg("images/01.png");
  36.     // 11 创建到父元素上
  37.     img.appendTo("section");

3.函数参数默认值

定义函数的同时,可以给形参一个默认值

  1.     // 定义函数的同时,可以给形参一个默认值
  2.     function show(msg = "大家一起快活呀") {
  3.       console.log(msg);
  4.     }
  6.     show();// 打印 大家一起快活呀
  7.     show("搞笑不");// 打印 搞笑不

4.对象简写

在定义对象的时候,如果属性名和变量名一直,那么可以实现简写

  1.     const name = "悟空";
  2.     const skill = "72变";
  3.     const say = function () { }
  4.     const obj = {
  5.       name, skill, say
  6.     }
  7.     console.log(obj);// {name:"悟空",skill:"72变",say:function(){}}

对象的方法也可以简写

  1.     const obj = {
  2.       say() {
  3.         console.log(this);
  4.       }
  5.     }

5.解构

提供更加方便获取数组中元素或者对象中属性的写法

获取数组中的元素

  1.       const [a, b, c, d] = [1, 2, 3, 4];
  2.       console.log(a, b, c, d);// 1,2,3,4

元素交互顺序

  1.     let a = 1111;
  2.     let b = 2222;
  3.     [b, a] = [a, b];
  4.     console.log(a, b);// 2222 1111

获取对象中的属性（重点）

  1.       const obj = {
  2.         name: "悟空",
  3.         skill: "72变",
  4.         say() { }
  5.       }
  6.       const { name, skill,say } = obj;
  7.       console.log(name, skill,say);// 悟空 72变 function(){}

6.拓展运算符 || 剩余运算符

通过 ...符号来获取剩下的参数

函数内获取

  1.     function show(a, ...all) {        // 只能放最后
  2.       console.log(a);
  3.       console.log(all);
  4.     }
  7.     show(1);// 1 []
  8.     show(1, 2, 3);// 1 [2,3]

数组内获取

  1.     const [a, ...rest] = [1, 2, 3, 4, 5];
  2.     console.log(a); // 1
  3.     console.log(rest);// [2, 3, 4, 5]

对象内获取

  1.     const obj={
  2.       name:"悟空",
  3.       skill:"72变",
  4.       say(){}
  5.     }
  7.     const {name,...others}=obj;
  8.     console.log(name); // 悟空
  9.     console.log(others); // {skill: "72变", say: ƒ}

7.Set

永远不会有重复元素的对象

可以理解为不重复的数组

  1.     const set = new Set([1, 5, 3, 4]);
  2.     set.add(5);
  3.     set.add(5);
  4.     console.log(set);

Set对象转为数组

  1.     const set = new Set([1, 5, 3, 4]);
  2.     set.add(5);
  3.     set.add(5);
  4.     console.log(set);
  6.     const arr = [...set];// 将set对象转数组
  7.     console.log(arr);

8.递归

高级烧脑编程技巧

概念

一种函数,自己调用自己,就是递归

场景

  1. 1 工作人员调查一个范围的人有没有新冠肺炎
  2. 2 如果 A 患病了,那么就调查 A 的 邻居 B
  3. 4 如果 B 患病了,那么就调查 B 的 邻居 C 
  4. 5 如果 c 患病了,那么就调查 C 的 邻居 D
  5. 6 如果 .....

语法特点

  1. 嵌套的层级是未知 或者 是很多层的
  2. 递归中比出现 if 结构

需求

根据数据,生成类似页面结构

  1. 数据
    1. [
    2. {
    3.  "name": "广东",
    4.  "children": [
    5.    {
    6.      "name": "广州",
    7.      "children": [
    8.        {
    9.          "name": "越秀"
    10.        },
    11.        {
    12.          "name": "天河",
    13.          "children": [
    14.            {
    15.              "name": "吉山"
    16.            }
    17.          ]
    18.        }
    19.      ]
    20.    },
    21.    {
    22.      "name": "深圳",
    23.      "children": [
    24.        {
    25.          "name": "南山"
    26.        }
    27.      ]
    28.    }
    29.  ]
    30. }
    31. ]
  1. 结构
    day04 - 图2

简单粗暴的实现

  1.     const list = [{ name: "广东", children: [{ name: "广州", children: [{ name: "越秀" }, { name: "天河", children: [{ name: "吉山" }] }] }, { name: "深圳", children: [{ name: "南山" }] }] }];
  3.     let section = document.querySelect('section');
  4.     let section = document.querySelector('section');
  5.         list.forEach((v1) => {
  6.             section.innerHTML += `<div>${v1.name}</div>`;
  7.             if (v1.children) {
  8.                 v1.children.forEach((v2) => {
  9.                     section.innerHTML += `<div>${v2.name}</div>`;
  10.                     if (v2.children) {
  11.                         v2.children.forEach(v3 => {
  12.                             section.innerHTML += `<div>${v3.name}</div>`;
  13.                             if (v3.children) {
  14.                                 v3.children.forEach(v4 => {
  15.                                     section.innerHTML += `<div>${v4.name}</div>`;
  16.                                 })
  17.                             }
  18.                         })
  19.                     }
  20.                 })
  21.             }
  22.         })

使用递归实现

  1.     function setHtml(arr) {
  2.       if (arr) {
  3.         arr.forEach(v => {
  4.           section.innerHTML += `<div>${v.name}</div>`;
  5.           setHtml(v.children);
  6.         })
  7.       }
  8.     }
  10.     setHtml(list);