es5原型链的继承 函数默认值 对象简写方式 解构 扩展运算符 set对象 递归

1.目录

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

2.es5 原型链继承

利用代码的能力实现 面向对象的特性 封装 和 继承
一般情况下:自构造函数 会借调 父构造函数

1. 子类strudent 继承了父类 Person的属性

// 父类
function Person(name, height) {
  this.name = name;
  this.height = height;
}

Person.prototype.say = function () {
  console.log(this.name);
  console.log(this.height);
}

// 子类
function Student(grade, name, height) {
  // 借用了父类的构造函数,完成对自己的赋值
  Person.call(this, name, height)
  this.grade = grade;
}

// 赋值了父类原型上的所有的 属性和方法
Student.prototype = Person.prototype;
// 修改之类的指向
Student.prototype.constructor = Student;

// 创建子类的实例
const stu = new Student("一年", "周星星", 170);
stu.say();

需求

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

效果

代码

// 1 负责创建元素  
function Element(nodeName, text) {
  const node = document.createElement(nodeName);
  node.classList.add("element")
  node.innerText = text;
  this.node = node;
}

// 2 原型上挂载 共用的方法
Element.prototype.appendTo = function (selector) {
  const parent = document.querySelector(selector);
  parent.appendChild(this.node);
}

// 3 创建一个实例
const div = new Element("div", "做人开心就好");
// 4 追加到父元素上
div.appendTo("section");

// 5 一个新的构造函数 用来创建图片
function ElementImg(src) {
  // 6 借用了 1 中的构造函数,并且把参数传递了进去
  Element.call(this, "img", "");
  // 7 图片设置路径
  this.node.src = src;
}

// 8 继承了 父亲的构造函数上的原型上的所有 函数
ElementImg.prototype=Element.prototype;			// 修改来原型，也就修改了构造函数
// 9 重新将 constructor 的指向改回来
ElementImg.prototype.constructor=ElementImg;

// 10 创建一个图片实例：注意，实例化代码10不能在8和9之前
const img = new ElementImg("images/01.png");

// 11 创建到父元素上
img.appendTo("section");

3.函数参数默认值

定义函数的同时,可以给形参一个默认值
函数形参默认值: 大概率数据(布尔类型)
特点:有实参默认值无效,没有实参默认值生效

// 定义函数的同时,可以给形参一个默认值
function show(msg = "大家一起快活呀") {
  console.log(msg);
}

show();// 打印 大家一起快活呀
show("搞笑不");// 打印 搞笑不

4.对象简写

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

const name = "悟空";
const skill = "72变";
const say = function () { }
const obj = {
  name, skill, say
}
console.log(obj);// {name:"悟空",skill:"72变",say:function(){}}

对象的方法也可以简写

const obj = {
  say() {
    console.log(this);
  }
}

5.解构

提供更加方便获取数组中元素或者对象中属性的写法
复合数据类型里面的数据 取出来 变成简单数据类型

对象解构 {变量} = 对象 按照属性名取值
对象的变量每次只能是新的

数组解构: [变量] = 数组 按照顺序取值

获取数组中的元素

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

元素交互顺序

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

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

  const obj = {
    name: "悟空",
    skill: "72变",
    say() { }
  }
  const { name, skill,say } = obj;
  console.log(name, skill,say);// 悟空 72变 function(){}

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

通过 …符号来获取剩下的参数
剩余运算:解构 和 形参(获取剩下的实参)
扩展运算:打散 实参数组打散变成简单数据

函数内获取

function show(a, ...all) {		// 只能放最后
  console.log(a);
  console.log(all);
}


show(1);// 1 []
show(1, 2, 3);// 1 [2,3]

数组内获取

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

对象内获取

const obj={
  name:"悟空",
  skill:"72变",
  say(){}
}

const {name,...others}=obj;
console.log(name); // 悟空
console.log(others); // {skill: "72变", say: ƒ}

7.Set

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

可以理解为不重复的数组

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

Set对象转为数组

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

const arr = [...set];// 将set对象转数组
console.log(arr);

8.递归

高级烧脑编程技巧

概念

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

场景

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

语法特点

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

需求

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

1. 数据

   [
     {
       "name": "广东",
       "children": [
         {
           "name": "广州",
           "children": [
             {
               "name": "越秀"
             },
             {
               "name": "天河",
               "children": [
                 {
                   "name": "棠下"
                 }
               ]
             }
           ]
         },
         {
           "name": "深圳",
           "children": [
             {
               "name": "南山"
             }
           ]
         }
       ]
     }
   ]

2. 结构
   

简单粗暴的实现

const list = [{ name: "广东", children: [{ name: "广州", children: [{ name: "越秀" }, { name: "天河", children: [{ name: "棠下" }] }] }, { name: "深圳", children: [{ name: "南山" }] }] }];

let section = document.querySelect('section');
let section = document.querySelector('section');
    list.forEach((v1) => {
        section.innerHTML += `<div>${v1.name}</div>`;
        if (v1.children) {
            v1.children.forEach((v2) => {
                section.innerHTML += `<div>${v2.name}</div>`;
                if (v2.children) {
                    v2.children.forEach(v3 => {
                        section.innerHTML += `<div>${v3.name}</div>`;
                        if (v3.children) {
                            v3.children.forEach(v4 => {
                                section.innerHTML += `<div>${v4.name}</div>`;
                            })
                        }
                    })
                }
            })
        }
    })

使用递归实现

function setHtml(arr) {
  if (arr) {
    arr.forEach(v => {
      section.innerHTML += `<div>${v.name}</div>`;
      setHtml(v.children);
    })
  }
}

setHtml(list);