js高级

117 阅读6分钟

1 箭头函数

箭头函数是匿名函数,一般做为参数传递

 let test = function (a,b){
     let sum = a + b 
     return sum
 }
 let test = (参数) => {函数体}

image.png

2 箭头函数传递参数

  • 如果只传递一个参数,小括号可以省略

  • 如果不传递参数或者传递参数大于1个的话,小括号不能省略

image.png

3 箭头函数返回值

image.png

4 箭头函数返回对象

image.png

image.png

5 函数参数的默认值

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

image.png

image.png

6 解构

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

image.png

image.png

6.1 用解构交换变量

image.png

image.png

6.2 用解构获取对象中的属性

image.png

image.png

7 对象的简写

image.png

image.png

8 拓展运算符 || 剩余运算符

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

8.1 数组内获取

image.png

image.png

8.2 函数内获取

image.png

image.png

image.png

image.png

8.3 对象内获取

在对象里用剩余运算符返回的是一个对象

image.png

9 值类型和引用类型

image.png

10 数组常用api

10.1 map()

通过指定函数处理数组的每个元素,并返回处理后的数组(通过旧数组改造新的数组,并返回新的数组)

image.png

image.png

以上代码用箭头函数来写,会更简洁,就一行(因为箭头函数默认会返回,所以不用写return)

image.png

10.2 filter()

检测数值元素,并返回符合条件所有元素的数组

image.png

10.3 every()

检测数组元素的每个元素是否都符合条件

image.png

有一个不满足就直接返回false,不再往后检测了 image.png

10.4 some()

检测数组元素中是否有元素符合指定条件,那么它跟every的区别就在于

  • every是全都满足条件,才返回true,否则返回false

  • some是有一个满足条件,就返回true了

image.png

image.png

10.5 find()

返回符合传入测试(函数)条件的数组元素, find 返回符合条件的数组元素。

  • find 用找满足条件的数组中一个元素,找到了之后 不会再继续往下遍历

  • 代码中 找到了 你需要返回true

  • forEach 也可以做遍历 但是 不能被中断 打断 (for循环不一样!! )

  • forEach 做遍历的时候 是不能被打断 中断 break!!!!

  • for 和 foreach有什么区别 1 都是循环 2 for循环可以被中断 但是 foreach不可以!!

image.png

image.png

10.6 findIndex()

返回符合传入测试(函数)条件的数组元素索引,也就是符合条件的元素的下标

image.png

image.png

10.7 includes()

image.png

image.png

10.8 indexOf()

findIndex() 和 indexOf() 都能找到满足条件的元素索引,如果找的元素结构比较复杂,就用 findIndex(),如果找的元素结构比较简单,就用indexOf()

image.png

image.png

10.9 join()

把数组的所有元素放入一个字符串,传递了参数,参数将数组的每一个元素进行连接

image.png

image.png

11 Set对象

Set 是一个对象 存放数据 数据永远不会重复(可以用来做数组去重)

image.png

把set对象 转成数组

image.png

因为Set对象是不会重复的,所以通过set.add()给set对象添加值时,相同的值是加不上去的

image.png

image.png

set.add()后面只能写一个值

image.png

12 创建对象的n种方式

12.1 字面量

image.png

12.2 工厂函数

后期无法实现继承

image.png

12.3 通过构造函数创建对象

构造函数的工作原理:

  1. 创建一个空对象,把它的地址赋值给this
  2. 把一些属性和方法添加到this上
  3. 把this的proto指向 构造函数的prototype
  4. 把this指向实例

构造函数 本质 其实也是一个函数 ,它的作用是用来创建对象

以前见过构造函数

  • Set 构造函数
  • Array 构造函数
  • Object
  • String
  • Number
  • Boolean
  • Date

只要它被new ,它就是构造函数

image.png

13 栈和堆存放不同的数据类型

92cc4f42b973f6d05db09d9c247eb9e2.jpg

栈,堆图解.png

14 构造函数中的this指向

每一个构造函数中 都存在 有一个 魔鬼 this

构造函数 默认情况下 就是返回了 this

this 等于你所new出来的实例 per

  • 只要给构造函数中的this 添加 属性或者方法

  • 那么 实例 自然拥有对应的属性和方法

image.png

image.png

15 构造函数,方法指向同一个

image.png

上述代码图解

栈,堆图解1.png

image.png

16 构造函数基本使用

image.png

17 不同数据类型使用===判断

两个值类型进行比较

值类型 === 值类型 (判断两个数据的数据类型和数据值是否相同)

两个引用类型进行比较

引用类型 === 引用类型(判断两个数据的数据类型和引用地址是否相同)

18 构造函数+原型

构造函数 + 原型 搭配来使用

原型本质是一个对象,当我们在创建一个构造函数的时候,原型被创建

如果我们在原型对象上增加一个属性或者方法,那么实例 拥有所增加的方法。(一般原型来定义 函数类型的属性)

原型就是DNA, 构造函数就是父亲, 实例就是孩子

小案例练习

需求:点击页面上的按钮,图片放大,再点击页面上的按钮,图片缩小,按钮的文字会对应的变化 (以下是常规的写法和面向对象的写法)

image.png

19 再次了解原型

image.png

image.png

20 原型来实现方法的继承

image.png

21 属性的继承

image.png

image.png

22 对象中的this || call()

image.png

image.png

23 对象添加属性

obj里的方法add()只是声明了而已,并没有执行,所以对象并没有属性,要通过obj.add()调用该方法执行,来给对象添加属性

image.png

image.png

24 通过call()动态给对象添加属性

image.png

image.png

25 构造函数-实例属性的继承

image.png

26 实现封装和继承案例

案例需求:

image.png

案例实现代码:

image.png

image.png

案例效果:

image.png

27 es6 class

es5 原型链方式实现 面向对象


       function Person() {

        this.name="悟空";

        this.color="黄色";

       }

       Person.prototype.say=function(){

         console.log(this.name,this.color);

       }

es6则通过引入class大大简化了写法

image.png

注意: 两个方法最终是在实例的原型上的

image.png

28 class基本使用-构造器

image.png

image.png

29 类的方式来实现继承

image.png

image.png

30 继承的extends和constructor和super的关系

image.png

image.png

31 检测数据类型

image.png

32 全局函数中的this指向

image.png

33 箭头函数没有this

箭头函数没有内部的this

当你的函数执行体代码中 , 有出现了this,慎用箭头函数

image.png

image.png

34 call() apply() bind()三者比较

image.png

image.png image.png

35 快速将父亲的原型复制到儿子上

image.png

36 Promise

在没有出现promise之前,我们在接口调用成功之后,.then里面去继续调用接口,成功之后在.then里面继续去调用接口,这样下去回调层级就会越来越深,不方便维护代码,会形成回调地狱 image.png

promise的出现就是为了解决回调地狱,对异步逻辑进行封装,实现链式调用

接口A().then().then().then(),每一个.then()里面都可以写接口,把原来的嵌套调用改为链式调用

promise有三个状态:

image.png

当你创建一个promise的时候,它就是第一个状态,pending待定状态

封装一个promise,代码如下所示:

image.png image.png

image.png

如果在.then()里又return一个promise的话,下一个.then()要在上一个promise完成之后再执行。

image.png

该文件执行结果如下

image.png

37 async await