ES6知识总结 — 上篇(思维导图版)
发布日期:2022-02-22 16:04:49 浏览次数:15 分类:技术文章

本文共 2615 字,大约阅读时间需要 8 分钟。

一、块作用域

块级作用域

二、解构赋值

规则

  1. 只要等号右边的值不是对象或数组,就先将其转为对象。
  2. 由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错。

2.1 数组的解构赋值

数组的解构赋值

2.2 对象的解构赋值

对象的解构赋值

2.3 函数参数的解构赋值

函数参数的解构赋值

2.4 字符串的解构赋值

  • 字符串被转换成一个类似字符数组的对象
  • 还可以对字符串的length属性解构赋值

2.5 圆括号问题

在这里插入图片描述

注意:扩展运算符的解构赋值,不能复制继承自原型对象的属性。

三、扩展运算符

在这里插入图片描述

四、Object

4.1 对象属性的简写

  • key:value值一致时可以简写;对象中的方法名可以省略
  • 简写的对象方法不能用作构造函数,会报错!

4.2 属性名表达式

在这里插入图片描述

4.3 方法的name属性

在这里插入图片描述

4.4 属性描述符

在这里插入图片描述

4.5 对象属性的遍历

在这里插入图片描述

4.6 super

  • 关键字super,只能用在对象的方法之中 指向当前对象的原型对象。

4.7 新增方法

在这里插入图片描述
在这里插入图片描述

4.8 对象代理proxy

在这里插入图片描述

五、Array

在这里插入图片描述

六、Map

6.1 Map

在这里插入图片描述

6.2 WeakMap

在这里插入图片描述

七、 Set

7.1 Set

在这里插入图片描述

7.2 WeakSet

在这里插入图片描述

八、 class

8.1 类的声明

ES5:用函数描写类,继承:在原型上书写公有属性和方法,父类修改后子类自动修改。
ES6:class 定义类 (语法糖)

class Animal{
   
//构造函数
constructor(type){    //传参
this.type = type;//对象私有的属性
}
//共有的方法
eat(){
console.log('I am eat food'); }}let dog = new Animal('dog');let monkey = new Animal('monkey')

二者关联:
Animal 的类型都是function,class只是 ES5用原型链声明的类的语法糖(语法不同,本质相同)

8.2 getter,setter 读写属性

//不要求所有属性必须放在构造函数里面,允许把属性放在类的最顶层(指在构造函数外面),放在顶层前面要加 get/set//有get/set 关键字时,age是属性,可以通过 对象.age的方式读取get age(){

// age是一个私有属性,只读,不能写
// 可以设置读取的条件,满足条件才能读取该属性
return 4; // 在外部对age赋值,不报错,但也不生效,始终是4}set age(val){    
//可以用if语句设置修改的条件
//this.age = val; 给age赋值会触发set造成死循环
this.realAge = val;}

8.3 实例方法和静态方法

  • 实例方法:实例对象或原型链上的方法 对象名.方法名()调用
  • 静态方法:不属于对象实例,属于类,对象不能调用该方法 类名.方法名()调用

ES5:

//类(构造函数)的声明let Animal = function(type){
   
this.type = type;
this.run = function(){    } //实例方法}//实例方法Animal.prototype.eat = function(){    
Animal.walk();//类名.方法名()调用
console.log('I am eat food');}//静态方法Animal.walk = function(){    
console.log('I am walking');}let dog = new Animal('dog')dog.eat();//dog.walk();报错

ES6

class Animal{
   
//构造函数
constructor(type){    //传参
this.type = type;//对象私有的属性
this.run = function(){    } //实例方法
}
//实例方法
eat(){
Animal.walk(); //类名.方法名()调用
console.log('I am eat food'); 
}
//static 声明静态方法
static walk(){
console.log('I am walking'); }}let dog = new Animal('dog')dog.eat();

方法依赖于对象的属性或方法,要引用实例对象的信息,使用实例方法
方法内部没有涉及实例对象的信息,使用静态方法。类的静态方法拿不到当前的对象。

8.4 类的继承

ES5:原型链继承 等多种继承方式

  1. 子类构造函数中执行父类构造函数:
let Animal = function(type){

this.type = type }
let Dog = function(){
Animal.call(this,'dog');//实现一部分父类的继承}
//实现原型的继承
Dog.prototype = Animal.prototype;//子类的原型指向父类的原型

ES6

class Animal{
   
//构造函数
constructor(type){    //传参
this.type = type;//对象私有的属性
this.run = function(){    } //实例方法
}
//实例方法
eat(){
Animal.walk(); //类名.方法名()调用
console.log('I am eat food'); 
}
//static 声明静态方法
static walk(){
console.log('I am walking'); }}//extends 实现继承class Dog extends Animal{    
constructor(type){    //传参
super(type);// super() 执行父类的构造方法
,必须写在第一行
}
// 子类构造函数中只调用了父类构造,没有自己的属性和方法,可以忽略不写,系统默认提供
}let dog = new Animal('dog')dog.eat();

九、Function

9.1 函数参数和属性

在这里插入图片描述

9.2 函数作用域和箭头函数

在这里插入图片描述

9.3 尾递归和尾调用

在这里插入图片描述

感谢观看,下篇更新中~

转载地址:https://blog.csdn.net/Conradine_Lian/article/details/108431774 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:CSS布局之float + 负margin的使用
下一篇:快速上手echarts

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.67.49.189]2022年09月30日 08时05分34秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章