文章目录
ES6
内容
-
语法
- 定义变量 const let
- 结构解析
-
增强
-
字符串增强
-
模板字符串
-
repeat()
-
padEnd() padStart()
- length 参数
- str 参数
-
trim()
-
for of
-
includes
-
startsWith() endsWith()
-
-
数组增强
-
函数增强
-
1 语法
- 定义变量
- 结构解析
1.1 定义变量
- 块级作用域 作用的范围
- 优点
- 具有块级作用域
- 防止变量全局污染
- 防止变量提升带来的问题
1.1.1 let 定义
- 在for循环中可以使用
- 可以不赋值,只定义
let a = 10
let b
1.1.2 const 定义
- 需要定义并且赋值
- 在闭包或者函数中使用较多
const b = 10
1.2 结构解析
- 取值比较方便
- 又称结构赋值
- 开发中调用接口取值的时候使用较多
1.2.1 使用
let a = {
data: {
message: [1,3,4]
}
}
let res = { data: { message: } }
2 增强
2.1 字符串增强
- trim()
- includes()
- startsWith() 和endsWith()
- padEnd() 和 padStart() ES7
- repeat()
2.1.1 trim()
- 去掉字符串前后空白
2.1.2 includes()
- 判断字符是否存在
- 返回值为boolean类型
2.1.3 startsWith() 和 endsWith()
- 判断第一个字符或者最后一个字符是否为参数
- 返回值为boolean类型
2.1.4 padEnd() 和 padStart()
-
ES7语法
-
以第二个参数填充
-
两个参数
-
第一个参数为:length 填充后的字符长度
-
第二个参数为:str 要填充的字符
let str= "hello" console.log( str.padStart(9,'0')) // 0000hello
-
2.1.5 repeat()
- 重复
2.1.6 模板字符串*
${}
- 在开发中使用较多
2.2 数组增强
2.2.1 ES5的高阶函数
some
-
无返回值 boolean
-
可以写一些业务逻辑
-
只要有满足的就返回true
let res3= obj.some((el,index)=>{ if(el.id===2){ return true } }) console.log(res3)// true
filter
- 有返回值 返回一个新的数组 并且每一项不能修改
let res= arr.filter((el,index)=>{
if(el > 4){
return true
}
})
console.log(res)// [5, 7]
every
map
- 有返回值 返回一个新的数组 并且每一项可以修改
let a =arr.map((el,index)=>{
if(el > 4) {
return el + 1
}
})
console.log(a) // [undefined, undefined, 6, 8]
forEach
- 无返回值
- 不会终止函数
let arr = [1,3,5,7]
arr.forEach((el,index)=>{
console.log(el)
})
2.2.2 ES5 的其他函数
indexOf 和 lastIndexOf
indexOf
lastIndexOf
reduce 和 reduceRight
reduce
reduceRight
find 和 findIndex
find
-
返回查找的结果
-
有返回值
let res=obj.find((el,index)=>{ if(el.id===1){ return true } }) console.log(res) // {id: 1, name: "lay"}
findIndex
-
返回查找结果的索引
-
有返回值
let res2=obj.findIndex((el,index)=>{ if(el.id===1){ return true } }) console.log(res2)// 1
2.2.3 ES6数组方法
includes
- 与字符串的方法用法相同
fill
-
填充 将字符串的所有元素都替换(初始化数组)
-
可以传参 —>第一个参数是填充的元素 第二个参数是被填充元素的起始位置,第三个参数是结束位置
-
会改变原来数组
let arr = [1,3,2] arr.fill(7) console.log(arr) // [7,7,7] let arrs = [1,3,2,2] arrs.fill(7,2,3) console.log(arrs)//[1, 3, 7, 2]
2.2.4 伪数组的处理
Array.from
- 将伪数组变成数组,从而可以使用数组的方法
Array.from(arr)
Array.of
-
将元素合并成为一个数组
Array.of(1,2,3)// [1,2,3]
2.3 对象增强
简化
键和值相同时可以合并
可以直接写方法和函数
键可以放拼接的值(包裹)
['a'+'b']:"拼接"
- 常量可以包裹
方法
Object.is() 严格相等===
- 对象为引用类型 不全等
Object.assign() 拷贝
Object.assign({},obj1,obj2)
- 将对象的赋给第一个对象上面 会改变原来的对象
2.4 函数增强
默认参数
普通默认参数
test(x=1){}
结构解析默认参数
test({x,y=1}){}
不定参数
ES5
- 在ES5当中用arguments(伪数组),但是不能使用数组方法
ES6
-
reset参数+扩展运算符
let arr = [1,3,2,5,2] function test (...reset){ let res=0 reset.forEach((el)=>{ res+=el }) return res } let [ , ,...newArr]= arr console.log(test(...newArr)) //9 后三项和为9
箭头函数
- 箭头函数使函数看起来更加简单
3 ES6模块化
3.1 Number
- 减少全局属性的方法
- 属于Number方法的挂载到Number的原型上,使其模块化
3.1.1 isFinite()
- 判断是不是无限数
3.1.2 isNaN()
- 判断是否是一个数
3.1.3 parseInt()
- 取整 一般可以去掉单位方便计算
3.1.4 parseFloat()
- 取小数
3.1.5 EPSILON
- 精确浮点数
3.2 Math
3.2.1 trunc()
- 去除一个数的小数部分
3.2.2 sign()
- 判断一个数是正数 负数 0
3.2.3 cbrt()
- cbrt() 计算一个数的立方根
3.2.4 ** 指数
-
计算一个数的指数
2 ** 2 = 4
3.3 全局
- isInteger()
- isSafeInteger()
4 遍历
4.1 ES6前
4.1.1 遍历对象
for in
let obj= {
id:0,
name:'sheep'
}
for ( let el in obj){
console.log(el,obj[el])
}
// id 0
// name sheep
4.1.2 遍历数组
for
forEach
4.2 ES6
for of
- 可以遍历对象
- 可以遍历数组
- 遍历索引(keys) 遍历值(value) 遍历索引和值(entries)
遍历对象
let obj= {
id:0,
name:'sheep'
}
for ( let el of Object.entries(obj)){
console.log(el)//["id", 0] ["name", "sheep"]
}
遍历数组
let arr = [1]
for (let el of Object.entries(arr)){
console.log(el)// ["0", 1]
}
5 新增类的继承
ES5继承
- ES5中没有类的概念
- ES5 组合继承
- 冒充继承(call)
- 原型继承(子类的原型指向父类的实例)
原生继承
- 子类可以继承父类的属性
- 子类不能继承父类的方法
- 子类以冒充的形式继承(call)
实现
// 父类
function Person(name,age){
this.name=name
this.age=age
}
//子类
function Son(name,age){
Person.call(this,name,age) // 继承
}
// 使用
let son=new Son("lay",12);
console.log(son)//Son{name: "lay", age: 12}
原生继承+原型继承
- 子类可以继承父类的属性
- 子类可以继承父类的方法
- 子类原型指向父类的实例
实现
-
子类的原型=父类的实例
// 父类 function Person(name,age){ this.name=name this.age=age } Person.prototype.say=()=>{ console.log("hhhh") } //子类 function Son(name,age){ Person.call(this,name,age) // 继承 } // 原型继承 Son.prototype= new Person() // 使用 let son=new Son("lay",12); console.log(son)//Son{name: "lay", age: 12} son.say() // hhhh
ES6 类继承
- 关键字 extends super class constructor
实现
// 父类
class Person{
constructor(name,age) {
this.name=name
this.age=age
}
say(){
console.log('hello')
}
}
// 子类
class Son extends Person{
constructor(name,age,hobby) {
super(name,age);
this.hobby=hobby
}
}
// 实例化
let son = new Son('lay',12,'sing')
console.log(son)//Son{name: "lay", age: 12}
console.log(son.hobby)// sing
son.say()// hello
6 异步处理promise
-
背景
- 原因:解决回调地狱问题(函数的嵌套)
- ES5前:会出现回调地狱,如果想要实现异步的话,需要进行函数嵌套
- 维护性差
- 可读性差
- 代码冗余
- ES6后: 出现promise 这个对象,使异步像同步那样,解决回调地狱
- ES5前:会出现回调地狱,如果想要实现异步的话,需要进行函数嵌套
- 原因:解决回调地狱问题(函数的嵌套)
-
概念
-
理解: promise 承诺的意思 在此语法中可以理解为承诺做某些事情
-
明确:
- 同步: 逐个去执行每一个事件,容易发生阻塞,如果一个事件出错,后面的就不执行了
- 就像排队买东西,如果这个人没有带钱,收银台不结账,一直等他取到钱后再进行计算下一个人的结算
- 异步:可以不立即返回结果,不容易发生阻塞
- 就像排队买东西,如果这个人没有带钱,他可以回家去取,在此之间,收银员会继续下一个的计算收银
- 同步: 逐个去执行每一个事件,容易发生阻塞,如果一个事件出错,后面的就不执行了
-
作用: promise 可以承诺去完成某个事件,但不会立即反馈结果,使得异步像同步那样操作
-
-
类型
- 是一个对象
-
参数
- 参数是两个回调函数
- resolve() 异步成功的回调函数
- reject() 异步失败的回调函数
- 参数是两个回调函数
-
状态
- unfulfilled —>未完成
- fulfilled ---->完成
- failed ---->失败
6.1 类型
6.1.1 promise是一个对象
6.1.2 创建
let promise = new Promise(function(resolve, reject){
resolve();
});
6.2 参数
6.2.1 resolve
- 执行完毕后触发.then---->一般和ajax一起使用时 在次可以获取返回的数据
- 可以嵌套
- resolve可以传promise对象,先执行完成该promise对象后再执行resolve的实例
let promise = new Promise(function(resolve, reject){
resolve(promise);
});
6.2.2 reject
- 执行完毕后触发.catch
let promise = new Promise(function(resolve, reject){
reject(promise);
});
6.3 状态
6.3.1 unfulfilled 未完成
6.3.2 fulfilled 完成
6.3.3 failed 失败
6.4 方法
6.4.1 promise.all()
- 所有实例都执行
- 参数是promise对象组成的数组
let promise = Promise.all([p1, p2, p3])
6.4.2 promise.race()
- 优先执行实例
- 参数是promise对象组成的数组
let promise = Promise.race([p1, p2, p3])
6.5 回调函数
6.5.1 then
- 成功触发的回调
- 一般在ajax请求中,接收返回值(数据)
6.5.2 catch
- 失败触发的回调
6.5.3 finally
- 无论成功还是失败都触发的回调
6.5 缺点
- promise一旦执行,无法中途取消
- promise的错误无法在外部被捕捉到,只能在内部进行预判处理
- promise的内如何执行,监测起来很难
- promise的状态一旦改变不可逆
7 ES7 async+await
7.1 背景
- promise 一旦执行无法中途取消----->无法中断
- promise 支持链式编程 ---->代码可读性差,并且异常抛出后不能向下执行
- promise 在内部执行,错误无法捕获到
7.2 作用
- 解决promise无法中断问题
- 解决链式编程不能向下执行问题
- 解决无法捕获的问题
7.3 使用
7.3.1 使用
- async 本质上返回的是一个promise对象
async test (){
const res = await function () {
}
}
7.3.2 中断问题
- return
async test (){
const res = await function () {
}
return
}
7.3.3 捕获问题
- try catch 解决
async test () {
try{
const res = await function () {
}
}catch(error){
console.log(error)
}
}