1 箭头函数
箭头函数是匿名函数,一般做为参数传递
let test = function (a,b){
let sum = a + b
return sum
}
let test = (参数) => {函数体}
2 箭头函数传递参数
-
如果只传递一个参数,小括号可以省略
-
如果不传递参数或者传递参数大于1个的话,小括号不能省略
3 箭头函数返回值
4 箭头函数返回对象
5 函数参数的默认值
定义函数的同时,可以给形参一个默认值
6 解构
提供更加方便获取数组中元素或者对象中属性的写法
6.1 用解构交换变量
6.2 用解构获取对象中的属性
7 对象的简写
8 拓展运算符 || 剩余运算符
通过 ...符号来获取剩下的参数
8.1 数组内获取
8.2 函数内获取
8.3 对象内获取
在对象里用剩余运算符返回的是一个对象
9 值类型和引用类型
10 数组常用api
10.1 map()
通过指定函数处理数组的每个元素,并返回处理后的数组(通过旧数组改造新的数组,并返回新的数组)
以上代码用箭头函数来写,会更简洁,就一行(因为箭头函数默认会返回,所以不用写return)
10.2 filter()
检测数值元素,并返回符合条件所有元素的数组
10.3 every()
检测数组元素的每个元素是否都符合条件
有一个不满足就直接返回false,不再往后检测了
10.4 some()
检测数组元素中是否有元素符合指定条件,那么它跟every的区别就在于
-
every是全都满足条件,才返回true,否则返回false
-
some是有一个满足条件,就返回true了
10.5 find()
返回符合传入测试(函数)条件的数组元素, find 返回符合条件的数组元素。
-
find 用找满足条件的数组中一个元素,找到了之后 不会再继续往下遍历
-
代码中 找到了 你需要返回true
-
forEach 也可以做遍历 但是 不能被中断 打断 (for循环不一样!! )
-
forEach 做遍历的时候 是不能被打断 中断 break!!!!
-
for 和 foreach有什么区别 1 都是循环 2 for循环可以被中断 但是 foreach不可以!!
10.6 findIndex()
返回符合传入测试(函数)条件的数组元素索引,也就是符合条件的元素的下标
10.7 includes()
10.8 indexOf()
findIndex() 和 indexOf() 都能找到满足条件的元素索引,如果找的元素结构比较复杂,就用 findIndex(),如果找的元素结构比较简单,就用indexOf()
10.9 join()
把数组的所有元素放入一个字符串,传递了参数,参数将数组的每一个元素进行连接
11 Set对象
Set 是一个对象 存放数据 数据永远不会重复(可以用来做数组去重)
把set对象 转成数组
因为Set对象是不会重复的,所以通过set.add()给set对象添加值时,相同的值是加不上去的
set.add()后面只能写一个值
12 创建对象的n种方式
12.1 字面量
12.2 工厂函数
后期无法实现继承
12.3 通过构造函数创建对象
构造函数的工作原理:
- 创建一个空对象,把它的地址赋值给this
- 把一些属性和方法添加到this上
- 把this的proto指向 构造函数的prototype
- 把this指向实例
构造函数 本质 其实也是一个函数 ,它的作用是用来创建对象
以前见过构造函数
- Set 构造函数
- Array 构造函数
- Object
- String
- Number
- Boolean
- Date
只要它被new ,它就是构造函数
13 栈和堆存放不同的数据类型
14 构造函数中的this指向
每一个构造函数中 都存在 有一个 魔鬼 this
构造函数 默认情况下 就是返回了 this
this 等于你所new出来的实例 per
-
只要给构造函数中的this 添加 属性或者方法
-
那么 实例 自然拥有对应的属性和方法
15 构造函数,方法指向同一个
上述代码图解
16 构造函数基本使用
17 不同数据类型使用===判断
两个值类型进行比较
值类型 === 值类型 (判断两个数据的数据类型和数据值是否相同)
两个引用类型进行比较
引用类型 === 引用类型(判断两个数据的数据类型和引用地址是否相同)
18 构造函数+原型
构造函数 + 原型 搭配来使用
原型本质是一个对象,当我们在创建一个构造函数的时候,原型被创建
如果我们在原型对象上增加一个属性或者方法,那么实例 拥有所增加的方法。(一般原型来定义 函数类型的属性)
原型就是DNA, 构造函数就是父亲, 实例就是孩子
小案例练习
需求:点击页面上的按钮,图片放大,再点击页面上的按钮,图片缩小,按钮的文字会对应的变化 (以下是常规的写法和面向对象的写法)
19 再次了解原型
20 原型来实现方法的继承
21 属性的继承
22 对象中的this || call()
23 对象添加属性
obj里的方法add()只是声明了而已,并没有执行,所以对象并没有属性,要通过obj.add()调用该方法执行,来给对象添加属性
24 通过call()动态给对象添加属性
25 构造函数-实例属性的继承
26 实现封装和继承案例
案例需求:
案例实现代码:
案例效果:
27 es6 class
es5 原型链方式实现 面向对象
function Person() {
this.name="悟空";
this.color="黄色";
}
Person.prototype.say=function(){
console.log(this.name,this.color);
}
es6则通过引入class大大简化了写法
注意: 两个方法最终是在实例的原型上的
28 class基本使用-构造器
29 类的方式来实现继承
30 继承的extends和constructor和super的关系
31 检测数据类型
32 全局函数中的this指向
33 箭头函数没有this
箭头函数没有内部的this
当你的函数执行体代码中 , 有出现了this,慎用箭头函数
34 call() apply() bind()三者比较
35 快速将父亲的原型复制到儿子上
36 Promise
在没有出现promise之前,我们在接口调用成功之后,.then里面去继续调用接口,成功之后在.then里面继续去调用接口,这样下去回调层级就会越来越深,不方便维护代码,会形成回调地狱
promise的出现就是为了解决回调地狱,对异步逻辑进行封装,实现链式调用
接口A().then().then().then(),每一个.then()里面都可以写接口,把原来的嵌套调用改为链式调用。
promise有三个状态:
当你创建一个promise的时候,它就是第一个状态,pending待定状态
封装一个promise,代码如下所示:
如果在.then()里又return一个promise的话,下一个.then()要在上一个promise完成之后再执行。
该文件执行结果如下