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

递归"/>

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);