1.0 Es7
01). Array.prototype.includes() : 一个数组中是否含有某个值 ; 返回值 true/false
console.log( ['1','2','3'].includes('1') ) //-----> true
console.log( ['1','2','3'].includes(1) ) //-----> false
注 : es6中 String.prototype.includes() ： 一段字符串中是否含有某个字符串 ; 返回值是true/false
let str = 'qianduan'
console.log(str.includes('q') //---->true
02). 求幂运算
let num = 10
console.log(num**2) // --->10000 10的二次幂
console.log(Math.pow(num,2)) //--->10000
2.0 Es8
01). Async / Await : 比Promise 更优雅的异步
// -Promise
async function foo(){
return Promise.reslove('浪里行舟')
}
foo().then(val=>{
console.log(val) // ----> 浪里行舟
})
// -async
function foo(){
return "我爱前端"
}
foo().then(val=>{
console.log(val) // ----> 我爱前端
})
02). Object.values() : 返回一个数组 数组中的项 是对象中的值 ；
Object.entries( ) : 返回是一个数组 数组里面的每一项是一个数组集合 数组集合中的每一项分别是对象中的键值对 ;
Object.fromEntries() ： 将Object.entries() 对象转化为数组之后在转化为对象{}->[]->{}
Object.keys()
const obj ={
'a' : 1,
'b' : 2,
'c' :3
}
console.log(Object.values(obj)) // [1,2,3]
console.log(Object.entries(obj) // [['a',1],['b',2],['c',3]]
let arr = Object.entries(obj) ；
console.log(Object.fromEntries(arr)) //----> {'a' : 1,'b' : 2,'c' : 3}
/**
for ... in : 遍历对象 返回值 是对象中属性的值 ;
for ... of : 遍历数组 返回值 是数组中的每一项 ;
若用 for...of 遍历对象 要配合Object.keys() 使用
*/
for(const item of Object.keys(obj)){
console.log(`${item}:${obj[item]}` // ---> 'a' : 1 ,'b' :2 ,'c':3
}
03). String Padding
String.prototype.padStart() 和 String.prototype.padEnd() ： 允许将空的字符串或其他字符串添加到原始字符串的结尾或者开头
参数 : String.padStart(targetLength,'padingStr') :targetLength : 当前字符串的目标长度 , 如果新添加的字符串的长度小于目标长度 则返回字符串本身 ; 如果添加字符串的长度大于目标长度 ，则返回目标长度 多余的部分将会被截断 ；padingStr : 填充字符串
// 结尾添加 String.padStart()
'12'.padStart('10','YYYY-MM-DD') // ---> 'YYYY-MM-12'
// 开头添加 String.padEnd()
'A'.padEnd('5','aaaaa') // -----> 'Aaaaa'
04). Object.getOwnPropertyDescriptors() : 返回指定对象的自身属性(非继承)的描述对象 ;
let obj = {
name ： 'H5',
get bar(){
return 'abc'
}
}
console.log(Object.getOwnPropertyDescriptors(obj))
控制台 log 结果 如下 ：
Object.getOwnPropertyDesxriptors()方法 .png
该方法的引入 主要解决Object.assgin() 无法正确拷贝set属性 和 get 属性的问题
let obj = {
name : '前端',
set fn(value) {
console.log(value)
}
get(){
return '我爱前端'
}
}
let target = { },
Object.assgin(target,obj)
console.log(getOwnPropertyDescriptor(target,'fn')
Object.getOwnpropertyDescriptor().png
obj对象的fn属性的值是一个赋值函数，Object.assign方法将这个属性拷贝给target对象，结果该属性的值变成了undefined。这是因为Object.assign方法总是拷贝一个属性的值，而不会拷贝它背后的赋值方法或取值方法
Es5 中 Object.getOwnpropertyDescriptor() : 返回某个对象属性的描述对象 ;这个问题 Es8中 Object.getOwnpropertyDescriptors() 可以解决 代码如下 :
let obj = {
name : '前端',
set fn(value) {
console.log(value)
}，
get(){
return '我爱前端'
}
}
let target = { },
Object.assgin(target,Object.getOwnpropertyDescriptors(obj))
console.log(getOwnPropertyDescriptor(target,'fn')
Object.assgin()利用Object.getOwnpropertyDescriptors()实现拷贝.png
3.0 Es9
01）. for await of
// for....of
function Gen (time){
return new Promise((reslove,reject)=>{
setTimeout(()=>{
reslove(time)
},time)
})
}
async function test(){
let arr =[Gen(2000),Gen(300),Gen(1000)]
for(let item of arr){
console.log(Date.now(),item.then(console.log))
}
}
test()
image.png
由此可见： for of方法不能遍历异步迭代器
// for await of
function Gen (time){
return new Promise((reslove,reject)=>{
setTimeout(()=>{
reslove(time)
},time)
})
}
async function test(){
let arr =[Gen(2000),Gen(300),Gen(1000)]
for await (let item of arr){
console.log(Date.now(),item)
}
}
test()
image.png
由结果可见 ：for await of遍历时，会等待前一个Promise对象的状态改变后，再遍历到下一个成员
02). 数组的拆解
// 1.0 复制
let arr = ['我','爱','前端']
let copy = [...arr]
console.log(copy) // -----> '我爱前端'
// 2.0 合并
let arr1 = ['我']
let arr2 = ['爱','前端']
let arr3 = [...arr1,arr2]
console.log(arr3) // ----> 我爱前端
// 3.0 拆解
let arr4 = [23,4,555,0]
let arr5 = Math.max(...arr4)
console.log(arr5) //---->5555
ES9通过向对象文本添加扩展属性进一步扩展了这种语法。他可以将一个对象的属性拷贝到另一个对象上，参考以下情形:
let input = {
'a':1,
'b':2,
'c':3
}
let output = {
...input ,
'c':33
}
console.log(output) // -----> {'a':1,'b':2,'c':33}
//---> 由此可见 ： 如果存在相同的属性名，只有最后一个会生效;
input.a= 'lyl'
console.log(input,output) // --> {'a':'lyl'},{'a':1,'b':2,'c':33}
// 修改input对象中的值，output并没有改变，说明扩展运算符拷贝一个对象（类似这样obj2 = {...obj1}），实现只是一个对象的浅拷贝
属性的值是一个对象的话，该对象的引用会被拷贝 如下:
let obj = {'x':{'y':'前端'}}
let copy1 = {...obj} ;
let copy2 = {...obj} ;
obj.x.y ="lyl"
console.log(copy1,copy2) // ---->{'x':{'y':'lyl}} ；
console.log(copy1.x === copy2.x) // --->true
03).对象的拆解 :
let obj = {
'a':1,
'b':2,
'c':3
}
let {a,...test} = obj
console.log(a,test) // ----> 1,{'b':2, 'c':3}
//注意 ： ... 始终出现在对象的末尾 ;
Promise.prototype.finally() :方法返回一个Promise，在promise执行结束时，无论结果是fulfilled或者是rejected，在执行then()和catch()后，都会执行finally指定的回调函数。
4.0 Es10
1.0 Array.prototype.flat() ：默认deepth 是 1并将所有元素与遍历到的子数组中的元素合并为一个 新数组 返回
2.0 Array.prototype.flatMap() ：默认deepth 是 1；
let arr = [1,2,3] ;
let newArr1 = arr.map(item=>item*2).flat()
let newArr2 = arr.flatMap(item=>item*2)
console.log(newArr1) // -->[2,4,6]
console.log(newArr2) // -->[2,4,6]
3.0.String.trimStart 和 String.trimEnd :方法从字符串的开头/结尾删除空格
还有一些关于正则的知识 不太想整理了 原文章地址奉上https://mp.weixin.qq.com/s/8bov6788ivV0sHzmwrn5lw
网友评论