1-ES7新特性
indexof如果没有就返回-1,有就返回索引
如果仅仅查找数据是否在数组中,建议使用includes,如果是查找数据的索引位置,建议使用indexOf更好一些
2-ES8-async和await
所有的需要异步处理的Promise对象都写在async中await等待结果
async、await
使异步操作变得更加方便
await后面可以接 非promise对象返回该对象的结果 或者 promise对象返回对应的值
await会等待ajax执行完再执行下一步,
1. async返回值是非promise对象,fulfilled,then
2. async返回的是promise对象,fulfilled or rejected ,then or catch, */
异步编程的成功和失败两种捕获错误方式
Promise、try catch
function ajax1(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log("data-111");
resolve("data-111")
},1000)
})
}
function ajax2(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log("data-111");
resolve("data-111")
},1000)
})
}
async function test(){
// await会等待ajax执行完再执行下一步,如果没有await由于延时器延时1s会先打印出res再打印出ajax里面的
let res1=await ajax1()
console.log(res);
let res2=await ajax2(res1)
// 渲染页面
}
test().then(res=>{
console.log(res);
// 渲染页面
}).catch(err=>{
console.log("err",err);
// 处理错误
})
try{
let res1=await ajax1()
console.log(res);
let res2=await ajax2(res1)
// 渲染页面
console.log("渲染页面");
}catch(error){
//处理错误
console.log("err",error);
}
3-对象方法扩展
getOwnPropertyDescriptors
不仅能克隆属性,还能克隆get、set这种拦截的东西
obj ={
name:"kerwin",
age:100
}
console.log(Object.values(obj));
console.log(Object.entries(obj));
let m=new Map(Object.entries(obj))
let obj1={}
// Object.assign(obj1,obj)这种复制丢三落四,
console.log(Object.getOwnPropertyDescriptors(obj));
// defineProperties可以设置某个对象的所有属性,defineProperty每次只能设置一个
Object.defineProperties(obj1,Object.getOwnPropertyDescriptors(obj))
4-字符串填充padStart()、padEnd()
padStart()、padEnd()方法可以使得字符串达到固定长度,有两个参数,字符串目标长度和填充内容。
// 01 02 03 04...12
let list=[]
for(let i=1;i<13;i++){
list.push(String(i).padStart(2,"0"))//i是一个数字,后面添加的0是字符串,i需要转化为字符串
}
5-ES9-rest与扩展运算符
对象的剩余参数:传参和赋值的时候都可以把剩余的属性和属性值放在一个新的对象中
function ajax(options){
// 默认属性
const defaultOptions={
methods:"get",
async:true,
}
options={...defaultOptions,...options}//把defaultOptions写前面防止后面加入相同的没法覆盖
}
ajax({
url:"/api",
methods:"post"
})
// 复制克隆
let obj5={
name:"kerwin",
age:100
}
let obj6={...obj5}
6-正则表达式命名捕获组
7-Promise.finally()
里面写成功和失败以后都想做的一件事
function ajax(){
return new Promise((resoLve,reject)=>{
//resolve("data-1111");
reject("err-11111")
})
}
//显示loading
ajax().then((data)=>{
console.log(data)
}).catch(err=>{
console.log("err",err)
}).finally(()=>{
// 写成功和失败之后都想做的一件事
console.log("finally");
//比如:隐藏1oading
})
8-异步迭代
异步遍历器生成函数
面试题:几个异步任务放在一个数组中,写一个方法用for循环按照任务顺序依次执行(浏览器中用的少,node,js中用的多)
:先写异步生成器把9个任务放到yield后,再写一个异步方法,里面for循环9次调用g.next()后在for await里按照顺序依次执行
两种写法:
1…then().then()链式调用
2.async和for await循环配合使用
// 简单理解就是yield返回的是一个遍历器对象,所以用for of遍历的时候由于await,就等元素自己遍历完,再下一个元素,就是异步了
// function timer(t){
// return new Promise(resolve=>{
// setTimeout(()=>{
// resolve("data-"+t)
// },t)
// })
// }
// function test(){
// // 放在数组中,只要for循环一开始就会进行并发任务,同时执行
// let arr=[timer(1000),timer(2000),timer(3000)]
// // 上一步的end和下一步的start是同时出现的,达不到一个timer(1000)结束timer(2000)再开始的效果
// for(let item of test){
// console.log("start-",Date.now());
// console.log( item);
// console.log("end-",Date.now());
// }
// }
function timer(t){
return new Promise(resolve=>{
setTimeout(()=>{
resolve("data-"+t)
},t)
})
}
// 异步生成器
async function *gen(){
yield timer(1000)
yield timer(2000)
yield timer(3000)
}
1. async function test(){
// g就是一个异步遍历器
let g=gen();
let arr=[g.next(),g.next(),g.next()]
// for await就是为了异步遍历器依次进行遍历的一种写法
// 上面写的let arr=[timer(1000),timer(2000),timer(3000)]只是一个普通数组,里面的三个任务是同时开始的
for await(let item of arr){
console.log("start-",Date.now());
console.log( item);
console.log("end-",Date.now());
}
}
2. // let g=gen();
// g.next().then(res=>{
// console.log(res);
// // 这里必须return下一个才能调用
// return g.next();
// }).then(res=>{
// console.log(res);
// })
}
test()
9-ES10
Object.fromEntries
把对象转换为另一种对象
trimStart与trimEnd()去首尾空格
10-其他新增
数组的flat flatMap
Symbol对象 description属性
(取出Symbol里面的值)
let s1=Symbol("name")
console.log(s1.description)
try catch(error){};
(error)不需要参数可写可不写