JavaScrip高级

前端，js

发布日期: 2022-01-01

更新日期: 2022-10-10

文章字数: 6.5k

阅读次数:

一、super 关键字

super 关键字

super调用父类构造函数

super关键字可以让子类的构造函数调用父类的构造函数，变量指向上一级

    class Father {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        sum() {
            console.log(this.x + this.y);

        }
    }
    class Son extends Father {
        constructor(x, y) {
            super(x, y); //调用了父类中的构造函数
         // this.x = x;
         // this.y = y;
        }
    }
        var son = new Son(1, 2);
        var son1 = new Son(11, 22);
        son.sum();
        son1.sum();

在子类构造函数中如果直接写 this.x = x ，那么实例化对象时，调用的是子类的构造函数，父类没有得到x、y。 son 想要调用 father 的sum（）方法，sum方法中的x，y都是父类的，所以sum没有办法相加。

sum中的this.x必须是从sum中构造函数获取的

如果构造函数中有super 那么super必须放在最前面

super调用父类普通方法

    // super 关键字调用父类普通函数
    class Father {
        say() {
            return '我是爸爸';
        }
    }
    class Son extends Father {
        say() {
            // console.log('我是儿子');
            console.log(super.say() + '的儿子');
            // super.say() 就是调用父类中的普通函数 say()
        }
    }
    var son = new Son();
    son.say();
    // 继承中的属性或者方法查找原则: 就近原则
    // 1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
    // 2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)
</script>

在子类中 super.say() 可以直接调用父类的say方法；继承中的属性或者方法查找原则: 就近原则

二、this关键字

this 关键字

在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象.
类里面的共有属性和方法一定要加this使用.
类里面的this指向问题.
constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用

三、构造函数和原型

构造函数和原型

1. 构造函数

在 ES6之前，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。

创建对象可以通过以下三种方式：

对象字面量
new Object()
自定义构造函数

构造函数存在的问题：（内存浪费）

每新建一个构造函数就会开辟一个新的内存空间，同一个函数也会单独开辟新的空间，造成内存浪费。

2.构造函数原型prototype

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。注意这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。
我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

问答？

原型是什么？
一个对象，我们也称为 prototype 为原型对象。
原型的作用是什么？
共享方法。

一般情况下，将公共属性定义到构造函数里，公共方法定义到原型对象上

3. 对象原型proto

    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    Star.prototype.sing = function() {
        console.log('我会唱歌');
    }
    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 19);
    ldh.sing();
    console.log(ldh); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
    console.log(ldh.__proto__ === Star.prototype);
    // 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
    // 如果么有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法

方法的查找规则:

首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
如果么有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法

对象都会有一个属性 proto 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 proto 原型的存在。

__proto__对象原型和原型对象 prototype 是等价的
__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype

4. constructor构造函数

    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
    // Star.prototype.sing = function() {
    //     console.log('我会唱歌');
    // };
    // Star.prototype.movie = function() {
    //     console.log('我会演电影');
    // }
    Star.prototype = {
        // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
        constructor: Star,
        sing: function() {
            console.log('我会唱歌');
        },
        movie: function() {
            console.log('我会演电影');
        }
    }
    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 19);

很多情况( 公共函数很多时 )下，我们需要重写原型对象prototype，这时候需要手动的利用constructor 这个属性指回原来的构造函数，例如上段代码的14行。

5. 构造函数、实例、原型对象三者之间的关系

构造函数是原型对象的父级，原型对象通过构造函数创建出来。

实例对象通过原型对象指向（找到）构造函数ldh.__proto__.constructor

6. 原型链（面试很容易问到）

原型对象prototype也是一个对象，它也有也有对象原型__ proto __，它指向Object原型对象prototype，Object原型对象的原型对象指向空。即Object就是所有类的父类。

面试可能让你画原型链。

JS的成员查找规则：

当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。
如果还没有就查找原型对象的原型（Object的原型对象）。
依此类推一直找到 Object 为止（null）。
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

简而言之，顺着原型链往上找（就近原则）。

原型对象this指向（面试常考问题）：不管是构造函数里面的this还是原型对象里面的this，都指向实例对象。

四、继承

ES6之前并没有给我们提供 extends 继承。我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承。

1.1借用构造函数继承父类属性

核心原理：通过 call() 把父类型的 this 指向子类型的 this ，这样就可以实现子类型继承父类型的属性。

    // 父类
    function Person(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    }
    // 子类
    function Student(name, age, sex, score) {
      Person.call(this, name, age, sex);  // 此时父类的 this 指向子类的 this，同时调用这个函数
      this.score = score;
    }
    var s1 = new Student('zs', 18, '男', 100);
    console.dir(s1);

1.2借用原型对象继承方法

没太听懂。保留：P14-P15 P5面试重点

2.类的本质

class本质还是function.
类的所有方法都定义在类的prototype属性上
类创建的实例,里面也有__proto__ 指向类的prototype原型对象
所以ES6的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
所以ES6的类其实就是语法糖.

一些个构造函数的特征（类和构造函数特征一样）：

    // (1) 构造函数有原型对象prototype 
    // (2) 构造函数原型对象prototype 里面有constructor 指向构造函数本身
    // (3) 构造函数可以通过原型对象添加方法
    // (4) 构造函数创建的实例对象有__proto__ 原型指向 构造函数的原型对象

五、ES5中新增的方法（数组、字符串、对象方法）

数组：

(1). forEach()遍历整个数组

array.forEach(function(currentValue, index, arr)

currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身

(2).filter()筛选数组

array.filter(function(currentValue, index, arr))

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组
注意它直接返回一个新数组
currentValue: 数组当前项的值
index：数组当前项的索引
arr：数组对象本身

(3).some()判断数组是否存在某个元素

array.some(function(currentValue, index, arr)

some() 方法用于检测数组中的元素是否满足指定条件. 通俗点查找数组中是否有满足条件的元素
注意它返回值是布尔值, 如果查找到这个元素, 就返回true , 如果查找不到就返回false.
如果找到第一个满足条件的元素,则终止循环. 不在继续查找.
currentValue: 数组当前项的值
index：数组当前项的索引
arr：数组对象本身

字符串

(1).str.trim()去除字符串两端的空格，返回的是一个新的字符串

对象

(1).Object.keys() 用于获取对象自身所有的属性

效果类似 for…in
返回一个由属性名组成的数组

(2).Object.defineProperty() 定义对象中新属性或修改原有的属性。(vue2用来实现响应式)

Object.defineProperty(obj, prop, descriptor)

obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性

Object.defineProperty() 第三个参数 descriptor 说明：以对象形式 { } 书写

value: 设置属性的值默认为undefined
writable: 值是否可以重写。true | false 默认为false
enumerable: 目标属性是否可以被枚举。true | false 默认为 false
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false 默认为false

六、函数进阶

函数进阶

1.函数的定义和调用

函数声明方式 function 关键字 (命名函数)
函数表达式 (匿名函数)
new Function() var fn = new Function('参数1','参数2'..., '函数体')

Function 里面参数都必须是字符串格式
第三种方式执行效率低，也不方便书写，因此较少使用
所有函数都是 Function 的实例(对象)
函数也属于对象

    // 1. 自定义函数(命名函数) 
    function fn() {};

    // 2. 函数表达式 (匿名函数)
    var fun = function() {};

    // 3. 利用 new Function('参数1','参数2', '函数体');
    var f = new Function('a', 'b', 'console.log(a + b)');

2.函数的调用方式

普通函数
对象的方法
构造函数
绑定事件函数
定时器函数
立即执行函数

    // 1. 普通函数
    function fn() {
        console.log('人生的巅峰');
    }
    // fn();   fn.call()
    
    // 2. 对象的方法
    var o = {
        sayHi: function() {
            console.log('人生的巅峰');
        }
    }
    o.sayHi();
    
    // 3. 构造函数
    function Star() {};  // 构造函数首字母习惯大写，构造函数本质和普通函数一样，但是构函需要用new调用。
    new Star();
   
    // 4. 绑定事件函数
    btn.onclick = function() {};   // 点击了按钮就可以调用这个函数
    // 5. 定时器函数
    setInterval(function() {}, 1000);  这个函数是定时器自动1秒钟调用一次
    // 6. 立即执行函数
    (function() {
        console.log('人生的巅峰');
    })();
    // 立即执行函数是自动调用

3.this指向问题

调用方式	this指向
普通函数调用	Windows
构造函数调用	实例对象原型对象里面的方法也指向实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	Windows
立即执行函数	Windows

3.1改变函数内部this指向：

call()方法：fun.call(thisArg, arg1, arg2, ...)

thisArg：在 fun 函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回值就是函数的返回值，因为它就是调用函数
因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承（具体参考7继承）

apply方法：fun.apply(thisArg, [argsArray])
- thisArg：在fun函数运行时指定的 this 值
- argsArray：传递的值，必须包含在数组里面
- 返回值就是函数的返回值，因为它就是调用函数
- 因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值
```
var arr = [1,2,3,5,4]
var max = Math.max.apply(Math,arr); 
```
apply()与call()都是改变this指向，apply常用于数组应用方法。
bind方法：fun.bind(thisArg, arg1, arg2, ...

thisArg：在 fun 函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回由指定的 this 值和初始化参数改造的原函数拷贝
因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind

4.call、aplly、bind总结

相同点:
都可以改变函数内部的this指向

区别点:
call 和 apply 会调用函数, 并且改变函数内部this指向.
call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]
bind 不会调用函数, 可以改变函数内部this指向.

call 经常做继承.
apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

4.严格模式

JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码。
严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。
严格模式对正常的 JavaScript 语义做了一些更改：

消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。
消除代码运行的一些不安全之处，保证代码运行的安全。
提高编译器效率，增加运行速度。
禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class, enum, export, extends, import, super 不能做变量名

4.1严格模式中的变化

变量规定
- 在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用var 命令声明，然后再使用。
- 严禁删除已经声明变量。例如，delete x; 语法是错误的。
严格模式下 this 指向问题

1. 以前在全局作用域函数中的 this 指向 window 对象。
1. 严格模式下全局作用域中函数中的 this 是 undefined。
1. 以前构造函数时不加 new也可以调用,当普通函数，this 指向全局对象
1. 严格模式下,如果构造函数不加new调用, this 指向的是undefined 如果给他赋值则会报错
1. new 实例化的构造函数指向创建的对象实例。
1. 定时器 this 还是指向 window 。
1. 事件、对象还是指向调用者。

七、闭包

1.什么是闭包？

闭包（closure）指有权访问另一个函数作用域中变量的函数。

闭包是一个函数

2.闭包的作用

延伸了变量的作用范围，保存变量防止销毁

<script>
        // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
        // 一个作用域可以访问另外一个函数的局部变量 
        // 我们fn 外面的作用域可以访问fn 内部的局部变量
        // 闭包的主要作用: 延伸了变量的作用范围
        function fn() {
            var num = 10;
        // function fun() {
        //     console.log(num);

        // }
        // return fun;
        return function() {
            console.log(num);
        }
    }
    var f = fn();
    f();
    // 类似于
    // var f = function() {
    //         console.log(num);
    //     }
    // var f =  function fun() {
    //         console.log(num);

    //     }
</script>

3.闭包案例

经典面试题：利用闭包的方式得到当前 li 的索引

// 2. 利用闭包的方式得到当前小li 的索引号
        for (var i = 0; i < lis.length; i++) {
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
            (function(i) {
                // console.log(i);
                lis[i].onclick = function() {
                    console.log(i);

                }
            })(i);

八、深拷贝和浅拷贝

浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用（拷贝地址）.
深拷贝拷贝多层, 每一级别的数据都会拷贝（开辟新的内存空间）.
Object.assign(target, …sources) es6 新增方法可以浅拷贝

九、正则表达式

1. 通过调用 RegExp 对象的构造函数创建
   var 变量名 = new RegExp(/表达式/); 
2. 通过字面量创建
   var 变量名 = /表达式/; 

3.test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。

   regexObj.test(str) 

regexObj 是写的正则表达式
str 我们要测试的文本
就是检测str文本是否符合我们写的正则表达式规范.

1.边界符

2.字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

[] 方括号：

/[abc]/.test('andy') // true

后面的字符串只要包含 abc 中任意一个字符，都返回 true 。

[-] 方括号内部范围符-

/^[a-z]$/.test(c') // true

方括号内部加上 - 表示范围，这里表示 a 到 z 26个英文字母都可以。

[^] 方括号内部取反符^

/[^abc]/.test('andy') // false

方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。注意和边界符 ^ 区别，边界符写到方括号外面。

字符组合

/[a-z1-9]/.test('andy') // true

方括号内部可以使用字符组合，这里表示包含 a 到 z 的26个英文字母和 1 到 9 的数字都可以。

4.量词符

量词符用来设定某个模式出现的次数。

5.预定义类

正则完整符号参考手册：https://jquery.cuishifeng.cn/regexp.html

6.replace替换

replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。

stringObject.replace(regexp/substr,replacement)

第一个参数: 被替换的字符串或者正则表达式
第二个参数: 替换为的字符串
返回值是一个替换完毕的新字符串

正则表达式参数： /表达式/[switch]

switch(也称为修饰符) 按照什么样的模式来匹配. 有三种值：

g：全局匹配
i：忽略大小写
gi：全局匹配 + 忽略大小写

十、let关键字（ES6部分开始）

前景（变量提升）：JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）

另外ES5声明变量只提供了var和function两种形式。

let声明的变量只在所处于的块级有效（块级即花括号内）。

if (true) { 
    let a = 10;
 }
console.log(a) // a is not defined

注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

使用let变量会出现暂时性死区：当在一个块级作用域内使用let声明变量，则let会自动与块{}进行绑定：

 var tmp = 123;
 if (true) { 
     tmp = 'abc';
     let tmp; 
 }

经典面试题：

此时输出为2 2

此时输出为0 1

此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值.

十一、const关键字

作用：声明常量，常量就是值（内存地址）不能变化的量。声明常量时必须赋值。

const也具有块级作用域：

if (true) { 
    const a = 10;
 }
 console.log(a) // a is not defined

值类型数据（栈储存）不可更改，引用类型（对储存）可以更改

（值类型和应用类型储蓄形式：http://www.360doc.com/content/18/1224/18/13328254_804168072.shtml）

 const PI = 3.14;
 PI = 100; // Assignment to constant variable.

 const ary = [100, 200];
 ary[0] = 'a';
 ary[1] = 'b';
 console.log(ary); // ['a', 'b']; 
 ary = ['a', 'b']; // Assignment to constant variable.

十二、解构：数组、对象

十三、箭头函数

ES6中新增的定义函数的方式。

() => {} 
const fn = () => {}

函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

 function sum(num1, num2) { 
     return num1 + num2; 
 }
 const sum = (num1, num2) => num1 + num2;

如果形参只有一个，可以省略小括号

 function fn (v) {
     return v;
 } 
 const fn = v => v;

箭头函数中的this：

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

 const obj = { name: '张三'} 
 function fn () { 
     console.log(this);
     return () => { 
         console.log(this)
     } 
 } 
 const resFn = fn.call(obj); 
 resFn(); //此时输出obj

经典面试题：

注意：定义对象的{}不产生作用域，只有函数才有作用域。

    var age = 100;
    var obj = {
        age: 20,
        say: () => {
            alert(this.age)
        }
    }
    obj.say(); //100

十四、Arrray扩展方法

1、扩展运算符（展开语法）

扩展运算符可以应用于合并数组。

// 方法一 
 let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5];
 let ary3 = [...ary1, ...ary2];
 // 方法二 
 ary1.push(...ary2);

将类数组或可遍历对象转换为真正的数组

let oDivs=document.getElementsByTagName('div'); 
oDivs = [...oDivs];

2、构造函数方法：Array.from()

将类数组或可遍历对象转换为真正的数组

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}; 
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

 let arrayLike = { 
     "0": 1,
     "1": 2,
     "length": 2
 }
 let newAry = Array.from(aryLike, item => item *2)

3、实例方法：find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

 let ary = [{
     id: 1,
     name: '张三‘
 }, { 
     id: 2,
     name: '李四‘
 }]; 
 let target = ary.find((item, index) => item.id == 2);

4、实例方法：findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9); 
console.log(index); // 2

5、实例方法：includes()

表示某个数组是否包含给定的值，返回布尔值。

[1, 2, 3].includes(2) // true 
[1, 2, 3].includes(4) // false

十五、String 的扩展方法

1、模板字符串

ES6新增的创建字符串的方式，使用反引号定义。

 let name = `zhangsan`;

模板字符串中可以解析变量。

 let name = '张三'; 
 let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan

模板字符串中可以换行

 let result = { 
     name: 'zhangsan', 
     age: 20, 
     sex: '男' 
 } 
 let html = ` <div>
     <span>${result.name}</span>
     <span>${result.age}</span>
     <span>${result.sex}</span>
 </div> `;

在模板字符串中可以调用函数。

 const sayHello = function () { 
    return '哈哈哈哈 追不到我吧 我就是这么强大';
 }; 
 let greet = `${sayHello()} 哈哈哈哈`;  console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈

2、实例方法：startsWith() 和 endsWith()

startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

 let str = 'Hello world!';
 str.startsWith('Hello') // true 
 str.endsWith('!')       // true

3、实例方法：repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串。

'x'.repeat(3)      // "xxx" 
'hello'.repeat(2)  // "hellohello"

十六、Set 数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成 Set 数据结构。

const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1, 2, 3, 4, 4]);

set去重：

const s3 = new Set(["a","a","b","b"]);
console.log(s3.size)
const ary = [...s3];

1、实例方法：

add(value)：添加某个值，返回 Set 结构本身
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
has(value)：返回一个布尔值，表示该值是否为 Set 的成员
clear()：清除所有成员，没有返回值

 const s = new Set();
 s.add(1).add(2).add(3); // 向 set 结构中添加值 
 s.delete(2)             // 删除 set 结构中的2值 
 s.has(1)                // 表示 set 结构中是否有1这个值 返回布尔值 
 s.clear()               // 清除 set 结构中的所有值

2、遍历

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值

s.forEach(value => console.log(value))

十七、同步和异步

答案：24573186

错：24573816

Yuukyou

http://yuukyou-chan.github.io/2022/01/01/JavaScrip/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Yuukyou !

前端，js

VUE头条后台项目总结

2022-04-12 Yuukyou

js vue

H5实训笔记

2021-09-07 Yuukyou

JS H5 CSS3

一、super 关键字

super 关键字

二、this关键字

this 关键字

三、构造函数和原型

构造函数和原型

1. 构造函数

2.构造函数原型prototype

3. 对象原型__proto__

4. constructor构造函数

5. 构造函数、实例、原型对象三者之间的关系

6. 原型链（面试很容易问到）

四、继承

1.1借用构造函数继承父类属性

1.2借用原型对象继承方法

2.类的本质

五、ES5中新增的方法（数组、字符串、对象方法）

六、函数进阶

函数进阶

1.函数的定义和调用

2.函数的调用方式

3.this指向问题

4.严格模式

4.1严格模式中的变化

七、闭包

1.什么是闭包？

2.闭包的作用

3.闭包案例

八、深拷贝和浅拷贝

九、正则表达式

1.边界符

2.字符类

4.量词符

5.预定义类

6.replace替换

十、let关键字（ES6部分开始）

十一、const关键字

十二、解构：数组、对象

十三、箭头函数

十四、Arrray扩展方法

1、扩展运算符（展开语法）

2、构造函数方法：Array.from()

3、实例方法：find()

4、实例方法：findIndex()

5、实例方法：includes()

十五、String 的扩展方法

1、模板字符串

2、实例方法：startsWith() 和 endsWith()

3、实例方法：repeat()

十六、Set 数据结构

1、实例方法：

2、遍历

十七、同步和异步

如果觉得还不错的话，可不可以给博主买一片西瓜🍉 😋

3. 对象原型proto