文章目录 一、ES2016(ES7):[Array.prototype.includes,Exponentiation Operator] 1、Array.prototype.includes=》`includes()`方法 2、Exponentiation Operator幂运算:幂运算符`**`,相当于Math.pow() 二、ES2017(ES8):[Async functions,Object.entries,Object.values,Object.getOwnPropertyDescriptors,Trailing commas] 1、Async functions 2、Object.entries 3、Object.values 4、Object.getOwnPropertyDescriptors 5、Trailing commas 尾后逗号 6、String.prototype.padStart() 7、String.prototype.padEnd() 三、ES2018(ES9):[ Async iterators,Object rest properties ,Object spread properties ,Promise.prototype.finally] 1、Async iterators 异步迭代器 2、Object rest properties 剩余属性 3、Object spread properties 扩展属性 4、Promise.prototype.finally 四、ES2019(ES10):[Array.prototype.{flat, flatMap},Object.fromEntries,String.prototype.{trimStart, trimEnd},Symbol.prototype.description,Optional catch binding,Array.prototype.sort() is now required to be stable] 1、Array.prototype.{flat, flatMap} 扁平化嵌套数组 2、Object.fromEntries 3、String.prototype.{trimStart, trimEnd} 4、Symbol.prototype.description 5、Optional catch binding 6、JSON.stringify() 的增强力 7、修订 Function.prototype.toString() 五、ES2020(ES11):[Nullish coalescing Operator,Optional chaining,globalThis,BigInt,String.prototype.matchAll(),Promise.allSettled(),Dynamic import] 1、空值合并运算符(Nullish coalescing Operator) 2、可选链 Optional chaining 3、globalThis 4、BigInt 5、String.prototype.matchAll() 6、Promise.allSettled() 7、Dynamic import(按需 import) 六、ES 2021(ES12):[&&=,||=,??=,String.prototype.replaceAll(),数字分隔符,Promise.any] 1、逻辑运算符和赋值表达式(&&=,||=,??=) 2、String.prototype.replaceAll() 3、数字分隔符 4、Promise.any
一、ES2016(ES7):[Array.prototype.includes,Exponentiation Operator]
1、Array.prototype.includes=》includes()方法
includes( ) 方法用来判断一个数组或字符串中是否包含一个指定的值
返回值: 如果包含返回true,否则返回false。
let arr = [ 1 , 2 , 3 , 4 ] ;
arr.includes( 3 ) ; // true
arr.includes( 5 ) ; // false
arr.includes( 3 , 1 ) ; // true
arr.includes( 3 , 3 ) ; // false
arr.includes( 3 , 20 ) ; // false
arr.includes( 3 , -100) ; // true
arr.includes( 3 , -1) ; // false
2、Exponentiation Operator幂运算:幂运算符**,相当于Math.pow()
5 ** 2 // 25
Math.pow( 5 , 2 ) // 25
二、ES2017(ES8):[Async functions,Object.entries,Object.values,Object.getOwnPropertyDescriptors,Trailing commas]
1、Async functions
Async functions 是 async 声明的函数,async 函数是 AsyncFunction 构造函数的实例,其中允许使用 await 关键字。
async function name( [ param[ , param[ , .. .param] ] ] ) { // statements
}
一个Promise
const promise = ( ) = > { console.log( '1' ) ; return new Promise(( resolve, reject) = > { resolve( '2' ) ; } ) ;
} ; const asyncFun = async( ) = > { console.log( '3' ) ; const test = await promise( ) ; console.log( '4' , test ) ;
} asyncFun( ) ; // 3 1 4 2
2、Object.entries
Object.entries( ) 方法返回一个给定对象自身可枚举属性的键值对数组
Object.entries( obj) ;
let obj = { a: 1 , b: 2 } ;
Object.entries( obj) ; // [ [ 'a' , 1 ] , [ 'b' , 2 ] ]
3、Object.values
Object.values( ) 方法返回一个给定对象自身可枚举属性值的数组
Object.values( obj) ;
let obj = { a: 1 , b: 2 } ;
Object.values( obj) ; // [ 1 , 2 ]
4、Object.getOwnPropertyDescriptors
Object.getOwnPropertyDescriptors( ) 方法用来获取一个对象的所有自身属性的描述符
Object.getOwnPropertyDescriptors( obj) ;
let obj = { a: 1 , b: 2 } ;
Object.getOwnPropertyDescriptors( obj) ;
// [ a: { configurable: true, enumerable: true, value: 1 , writable: true} ,
// b: { configurable: true, enumerable: true, value: 2 , writable: true} ]
5、Trailing commas 尾后逗号
如果你想要添加新的属性,并且在上一行已经使用了尾后逗号,你可以仅仅添加新的一行,而不需要修改上一行
JSON 不允许尾后逗号
数组: let arr = [ 1 , 2 ]
对象:let obj = { a: 1 , b: 2 }
function( x, y) { }
function( x, y,) { }
( x, y) = > { }
( x, y,) = > { }
fun( x, y)
fun( x, y,)
function( ,) { }
( ,) = > { }
fn( ,)
function( .. .arg,) { }
( .. .arg,) = > { }
let [ a, b,] = [ 1 , 2 ] ;
let { x, y} = { x: 1 , y: 2 } ;
JSON.parse( "[1, 2, 3,]" ) // ❌
JSON.parse( '{"a": 1,}' ) // ❌
JSON.parse( "[1, 2, 3]" ) // ✅
JSON.parse( '{"a": 1}' ) // ✅
6、String.prototype.padStart()
padStart( ) 用另一个字符串填充当前字符串。
在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。
str.padStart( targetLength) ;
str.padStart( targetLength, padString) ;
targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。
padString(可选):填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断。此参数的默认值为 " " 。
'abc' .padStart( 10 ) ; // " abc"
'abc' .padStart( 10 , "foo" ) ; // "foofoofabc"
'abc' .padStart( 6 ,"123465" ) ; // "123abc"
'abc' .padStart( 8 , "0" ) ; // "00000abc"
'abc' .padStart( 1 ) ; // "abc"
7、String.prototype.padEnd()
padEnd( ) 方法会用一个字符串填充当前字符串(如果需要的话则重复填充)。
返回在原字符串末尾填充指定的填充字符串直到目标长度所形成的新字符串。
str.padEnd( targetLength)
str.padEnd( targetLength, padString)
targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。
padString(可选):填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断。此参数的缺省值为 " " 。
'abc' .padEnd( 10 ) ; // "abc "
'abc' .padEnd( 10 , "foo" ) ; // "abcfoofoof"
'abc' .padEnd( 6 , "123456" ) ; // "abc123"
'abc' .padEnd( 1 ) ; // "abc"
三、ES2018(ES9):[ Async iterators,Object rest properties ,Object spread properties ,Promise.prototype.finally]
1、Async iterators 异步迭代器
Async iterator 对象的 next( ) 方法返回一个 Promise,这个 Promise 的返回值可以被解析成 { value, done} 的格式,
iterator.next( ) .then(( {value, done}) = > {}) ; #1.3 举例
const asyncIterator = ( ) = > {const array = [1 , 2 ]; return {next: function( ) {if( array.length) {return Promise.resolve( {value: array.shift( ) , done: false}) ; }return Promise.resolve( {done: true}) ; }}
}
let iterator = asyncIterator( ) ;
const test = async( ) = > {await iterator.next( ) .then( console.log) ; / / {value: 1 , done: false}await iterator.next( ) .then( console.log) ; / / {value: 2 , done: false}await iterator.next( ) .then( console.log) ; / / {done: true}
}
test( ) ; #1.4 可以使用 for- await- of 在循环中异步调用函数
const promises = [new Promise(( resolve) = > resolve( 1 )) ,new Promise(( resolve) = > resolve( 2 )) ,new Promise(( resolve) = > resolve( 3 )) ,
] ; const test = async( ) = > { for await ( const p of promises) { console.log( 'p' , p) ; }
} ; test( ) ;
2、Object rest properties 剩余属性
let test = { a: 1 , b: 2 ,c: 3 , d: 4 }
let { a, b, .. .rest} = test ;
console.log( a) ; // 1
console.log( b) ; // 2
console.log( rest) ; // { c: 3 , d: 4 }
null 不能使用扩展运算符
let { a, b, .. .rest} = null; // ❌
3、Object spread properties 扩展属性
let test = { a: 1 ,b: 2 }
let result = { c: 3 , .. .test} ;
console.log( result) ; // { c: 3 , a: 1 , b: 2 }
let test = null;
let result = { c: 3 , .. .test} ; // { c: 3 }
4、Promise.prototype.finally
在Promise结束的时候,不管是结果是resolved还是rejected,都会调用finally中的方法
finally中的回调函数不接受任何参数
一个Promise
const promise = new Promise(( resolve, reject) = > { resolve( 'resolved' ) ; reject( 'rejectd' ) ;
} )
promise.then(( res) = > { console.log( res) ;
} ) .finally(( ) = > { console.log( 'finally' )
} ) ;
const promise = new Promise(( resolve, reject) = > { resolve( 1 ) ; reject( 2 ) ;
} ) ;
const test = ( ) = > { console.log( 3 ) ; promise.then(( res) = > { console.log( 4 , res) ; } ) .catch( err = > { console.log( 5 , err) ; } ) .finally(( ) = > { console.log( 6 ) ; } ) ;
} ; test( ) ; // 3 4 1 6
四、ES2019(ES10):[Array.prototype.{flat, flatMap},Object.fromEntries,String.prototype.{trimStart, trimEnd},Symbol.prototype.description,Optional catch binding,Array.prototype.sort() is now required to be stable]
1、Array.prototype.{flat, flatMap} 扁平化嵌套数组
flat( ) 方法会按照一个可指定的深度遍历递归数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
arr.flat( [ depth] ) ;
depth 是数组遍历的深度,默认是1。
一个新数组,不会改变旧数组。
const arr = [ 1 , 2 , [ [ [ [ 3 , 4 ] ] ] ] ] ;
arr.flat( ) ; // [ 1 , 2 , [ [ [ 3 , 4 ] ] ] ]
arr.flat( 3 ) ; // [ 1 , 2 , [ 3 , 4 ] ]
arr.flat( -1) ; // [ 1 , 2 , [ [ [ [ 3 , 4 ] ] ] ] ]
arr.flat( Infinity) ; // [ 1 , 2 , 3 , 4 ]
flat( ) 会移除数组中的空项
let arr = [ 1 , 2 , , , 3 ] ;
arr.flat( ) ; // [ 1 , 2 , 3 ]
reduce与contact
let arr = [ 1 , 2 , [ 3 , 4 ] ] ;
arr.reduce(( arr, val) = > arr.concat( val) , []) ;
... 扩展运算符与contact
let arr = [1 , 2 , [3 , 4 ]];
[].contact( ...arr) ;
更多替换方式请查看 MDN ( https: / / developer.mozilla.org/ zh- CN/ docs/ Web/ JavaScript/ Reference/ Global_Objects/ Array/ flat ) #1.2 Array.prototype.flatMap
#1.2 .1 定义
flatMap( ) 方法首先使用映射函数映射数组(深度值为1 )的每个元素,然后将结果压缩成一个新数组。
#1.2 .2 返回值
一个新数组,并且每个元素都是回调函数的结果。
#1.2 .3 语法
arr.flatMap( function callback( currentVal[, index[, array]]) {}[, thisArg])
callback: 可以生成一个新数组所调用的函数
currentVal: 当前数组在处理的元素
index: 可选,正在处理的元素索引
array: 可选,被调用的数组
thisArg: 执行callback函数时使用的this值
#1.2 .4 举例
let arr = ['My name', 'is', '', 'Lisa'];
let newArr1 = arr.flatMap( cur = > cur.split( ' ')) ;
let newArr2 = arr.map( cur = > cur.split( ' ' )) ;
console.log( newArr1) ; // [ "My" , "name" , "is" , "" , "Lisa" ]
console.log( newArr2) ; // [ [ "My" , "name" ] , [ "is" ] , [ "" ] , [ "Lisa" ] ]
2、Object.fromEntries
fromEntries( ) 方法会把键值对列表转换成一个对象
一个新的对象
Object.fromEntries( iterable)
iterable: Array、Map等可迭代对象
let map = new Map( [ [ 'a' , 1 ] , [ 'b' , 2 ] ] ) ;
let mapToObj = Object.fromEntries( map) ;
console.log( mapToObj) ; // { a: 1 , b: 2 } let arr = [ [ 'a' , 1 ] , [ 'b' , 2 ] ] ;
let arrToObj = Object.fromEntries( arr) ;
console.log( arrToObj) ; // { a: 1 , b: 2 } let obj = { a: 1 , b: 2 } ;
let newObj = Object.fromEntries( Object.entries( obj) .map( ( [ key, val] ) = > [ key, val * 2 ] )
) ;
console.log( newObj) ; // { a: 2 , b: 4 }
3、String.prototype.{trimStart, trimEnd}
trimStart( ) 方法用来删除字符串的开头的空白字符。
trimLeft( ) 是它的别名。
一个新的字符串,这个字符串左边的空格已经被去除掉了。
str.trimStart( ) ;
str.trimLeft( ) ;
let str = ' a b cd ' ;
str.trimStart( ) ; // 'a b cd '
str.trimLeft( ) ; // 'a b cd '
trimEnd( ) 方法用来删除字符串末尾的空白字符。 trimRight( ) 是它的别名
一个新的字符串,这个字符串右边的空格已经被去除了
str.trimEnd( )
str.trimRight( )
let str = ' a b cd ' ;
str.trimEnd( ) ; // ' a b cd'
str.trimRight( ) ; // ' a b cd'
4、Symbol.prototype.description
description 是一个只读属性
它返回Symbol对象的可选描述的字符串
Symbol( 'myDescription' ) .description;
Symbol.iterator.description;
Symbol.for( 'foo' ) .description;
Symbol( 'foo' ) .description; // 'foo'
Symbol( ) .description; // undefined
Symbol.for( 'foo' ) .description; // 'foo'
5、Optional catch binding
try { } catch( err) { console.log( 'err' , err) ;
}
try { } catch { }
6、JSON.stringify() 的增强力
JSON.stringify( ) 在 ES10 修复了对于一些超出范围的 Unicode 展示错误的问题,所以遇到 0xD800-0xDFF 之内的字符会因为无法编码成 UTF-8 进而导致显示错误。在 ES10 它会用转义字符的方式来处理这部分字符而非编码的方式,这样就会正常显示了。JSON.stringify( '😊' ) ; // '"😊"'
7、修订 Function.prototype.toString()
以前的 toString 方法来自 Object.prototype.toString( ) ,现在 的 Function.prototype.toString( ) 方法返回一个表示当前函数源代码的字符串。以前只会返回这个函数,不会包含空格、注释等。function foo ( ) { // es10新特性console.log( 'imooc' )
}
console.log( foo.toString( )) ;
// function foo ( ) {
// // es10新特性
// console.log( 'imooc' )
// }
五、ES2020(ES11):[Nullish coalescing Operator,Optional chaining,globalThis,BigInt,String.prototype.matchAll(),Promise.allSettled(),Dynamic import]
1、空值合并运算符(Nullish coalescing Operator)
空值合并操作符(??)是一个逻辑操作符,当左边的操作数为 null 或 undefined 的时候,返回其右侧操作符,否则返回左侧操作符。
undefined ?? 'foo' // 'foo'
null ?? 'foo' // 'foo'
'foo' ?? 'bar' // 'foo'
逻辑或操作符(|| ),会在左侧操作数为假值时返回右侧操作数,也就是说如果使用 || 来为某些变量设置默认值,可能会出现意料之外的情况。比如 0 、'' 、NaN、false:
0 || 1 // 1
0 ?? 1 // 0
'' || 'bar' // 'bar'
'' ?? 'bar' // ''
NaN || 1 // 1
NaN ?? 1 // NaN
false || 'bar' // 'bar'
false ?? 'bar' // false
不可以将 ?? 与 AND(&& )OR(|| )一起使用,会报错。
null || undefined ?? "foo" ; // 抛出 SyntaxError
true || undefined ?? "foo" ; // 抛出 SyntaxError
2、可选链 Optional chaining
可选链操作符(?.)允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用都是否有效。?. 操作符的功能类似于.链式操作符,不同之处在于,在引用为 null 或 undefined 时不会报错,该链路表达式返回值为 undefined。
const street = user && user.address && user.address.street;
const num = user && user.address && user.address.getNum && user.address.getNum( ) ;
console.log( street, num) ;
const street2 = user?.address?.street;
const num2 = user?.address?.getNum?.( ) ;
console.log( street2, num2) ;
let object = { } ;
object?.property = 1 ; // Uncaught SyntaxError: Invalid left-hand side in assignment
3、globalThis
const getGlobal = ( ) = > { if ( typeof self != = 'undefined' ) { return self} if ( typeof window != = 'undefined' ) { return window} if ( typeof global != = 'undefined' ) { return global} throw new Error( '无法找到全局对象' )
}
const globals = getGlobal( )
console.log( globals)
4、BigInt
0n == = 0 // false
0n == 0 // true
2n > 2 // false
2n > 1 // true
const mixed = [ 4n, 6 , -12n, 10 , 4 , 0 , 0n] ;
mixed.sort( ) ; // [ -12n, 0 , 0n, 10 , 4n, 4 , 6 ]
0n == = Object( 0n) ; // false
Object( 0n) == = Object( 0n) ; // false
const o = Object( 0n) ;
o == = o // true
将 BigInt 值转换为一个 -2^( width-1) 与 2 ^( width-1) - 1 之间的有符号整数。
将一个 BigInt 值转换为 0 与 2 ^( width) - 1 之间的无符号整数。
返回此数字的 language-sensitive 形式的字符串。覆盖 Object.prototype.toLocaleString( ) 方法。
返回以指定基数 ( base) 表示指定数字的字符串。覆盖 Object.prototype.toString( ) 方法。
返回指定对象的基元值。覆盖 Object.prototype.valueOf( ) 方法。
5、String.prototype.matchAll()
const regexp = /t( e) ( st( d?)) /g;
const str = 'test1test2' ; const array = [ .. .str.matchAll( regexp) ] ;
console.log( array[ 0 ] ) ; // [ "test1" , "e" , "st1" , "1" ]
console.log( array[ 1 ] ) ; // [ "test2" , "e" , "st2" , "2" ]
6、Promise.allSettled()
Promise.allSettled( [ Promise.resolve( 33 ) ,new Promise(( resolve) = > setTimeout(( ) = > resolve( 66 ) , 0 )) ,99 ,Promise.reject( new Error( "an error" )) ,
] ) .then(( values) = > console.log( values)) ; // [
// { status: 'fulfilled' , value: 33 } ,
// { status: 'fulfilled' , value: 66 } ,
// { status: 'fulfilled' , value: 99 } ,
// { status: 'rejected' , reason: Error: an error }
// ]
7、Dynamic import(按需 import)
button.addEventListener( 'click' , event = > { import( './dialogBox.js' ) .then( dialogBox = > { dialogBox.open( ) ; } ) .catch( error = > { /* Error handling */} )
} ) ;
六、ES 2021(ES12):[&&=,||=,??=,String.prototype.replaceAll(),数字分隔符,Promise.any]
1、逻辑运算符和赋值表达式(&&=,||=,??=)
let a = 1 ;
let b = 0 ;
a && = 2 ;
console.log( a) ; // 2
b && = 2 ;
console.log( b) ; // 0
const a = { duration: 50 , title: '' } ;
a.duration || = 10 ;
console.log( a.duration) ; // 50
a.title || = 'title is empty.' ;
console.log( a.title) ; // "title is empty"
const a = { duration: 50 } ;
a.duration ??= 10 ;
console.log( a.duration) ; // 50
a.speed ??= 25 ;
console.log( a.speed) ; // 25
2、String.prototype.replaceAll()
'aabbcc' .replaceAll( 'b' , '.' ) ; // 'aa..cc'
'aabbcc' .replaceAll( /b/, '.' ) ; // TypeError: replaceAll must be called with a global RegExp
'aabbcc' .replaceAll( /b/g, '.' ) ; // "aa..cc"
3、数字分隔符
123_00
0 .1_23
1e10_00
不能放在数值的最前面和最后面;
不能将两个及两个以上的分隔符连在一起;
小数点的前后不能有分隔符;
科学记数法里,e 或 E 前后不能有分隔符。
4、Promise.any
const promise1 = ( ) = > { return new Promise(( resolve, reject) = > { setTimeout(( ) = > { resolve( "promise1" ) ; // reject( "error promise1 " ) ; } , 3000 ) ; } ) ;
} ;
const promise2 = ( ) = > { return new Promise(( resolve, reject) = > { setTimeout(( ) = > { resolve( "promise2" ) ; // reject( "error promise2 " ) ; } , 1000 ) ; } ) ;
} ;
const promise3 = ( ) = > { return new Promise(( resolve, reject) = > { setTimeout(( ) = > { resolve( "promise3" ) ; // reject( "error promise3 " ) ; } , 2000 ) ; } ) ;
} ;
Promise.any( [ promise1( ) , promise2( ) , promise3( ) ] ) .then(( first) = > { // 只要有一个请求成功 就会返回第一个请求成功的console.log( first) ; // 会返回promise2} ) .catch(( error) = > { // 所有三个全部请求失败 才会来到这里console.log( "error" , error) ; } ) ;
Promise.any( [ promise1( ) , promise2( ) , promise3( ) ] ) .then(( first) = > { // 只要有一个请求成功 就会返回第一个请求成功的console.log( first) ; // 会返回promise2} ) .catch(( error) = > { // 所有三个全部请求失败 才会来到这里console.log( "error" , error) ; } ) ;
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】 进行投诉反馈!