ECMAScript(16、17、18、19)新特性
Array.prototype.includes
- includes 是数组上的简单实例方法,可以轻松查找到数组中是否包含指定内容(包括NaN)
- 返回布尔值
const arr = [1, 2, 3, 4, 5, NaN]
if (arr.indexOf(3) >= 0) {
console.log(true)
}
if (arr.includes(3)) {
console.log(true)
}
arr.includes(NaN) // true
arr.indexOf(NaN) // -1
Object.values()
- **Object.values()是类似于Object.Keys()**的新函数,但返回对象自身属性的所有值,
不包括原型链中的任何值
const cars = { BMW: 3, Tesla: 2, Toyota: 1 }
const vals = Object.keys(cars).map(key => cars[key])
console.log(vals) // [3, 2, 1]
const values = Object.values(cars)
console.log(values) // [3, 2, 1]
Object.entries()
- Object.entries()与Object.keys 类似,但它不是仅返回键,而是以
数组方式返回键和值
, 这使得在循环中使用对象或将对象转换为映射等操作变得非常简单.
const cars = { BMW: 3, Tesla: 2, Toyota: 1 }
Object.keys(cars).forEach(key => {
console.log('key: ' + key + ' value: ' + cars[key])
})
for(let [key, value] of Object.entries(cars)) {
console.log(`key: ${key} value: ${value}`)
}
const cars = { BMW: 3, Tesla: 2, Toyota: 1 }
const map1 = new Map()
Object.keys(cars).forEach(key => {
map1.set(key,cars[key])
})
const map = new Map(Object.entries(cars)) // map {BMW: 3, Tesla: 2, Toyota: 1}
异步迭代(Asynchronous Iteration)
- 这是一个及其好用的新特性,让我们能够非常容易的创建异步循环代码
const promise = [
new Promise(resolve => resolve(1)),
new Promise(resolve => resolve(2)),
new Promise(resolve => resolve(3)),
]
// 使用 for-of 遍历不会等待每一个Promise resolve
async test1() => {
for(const obj of promise) {
console.log(obj) // promise promise promise
}
}
// 使用 for-await-of 遍历会等待每一个Promise resolve之后,进入下次循环
async test2() => {
for await (const obj of promise) {
console.log(obj) // 1, 2, 3
}
}
test1()
test2()
Object.fromEntries()
- 在JavaScript中,将数据从一种格式转换为另一种格式非常常见,为了便于将对象转换为数组,ES2017引入了**Object.entries()方法. 此方法将对象作为参数,并以[key,value]**的形式返回对象自己可枚举字符串键控属性对的数组
const obj = {one: 1, two: 2, three: 3};
console.log(Object.entries(obj));
// [["one", 1], ["two", 2], ["three", 3]]
- 如果我想要做相反的事情并将键值对列表转换为对象呢? ES2019引入**Object.fromEntries()**方法,此静态方法允许你轻松的将键值对列表转换为对象
const myArray = [['one', 1], ['two', 2], ['three', 3],]
const obj = Object.fromEntries(myArray)
console.log(obj) // {'one': 1, 'two': 2, 'three': 3,}
PS: 传递给Object.fromEntries()的参数可以是实现迭代协议的任何对象,只要它返回一个两元素,类似于数组的对象即可
例如: **Object.fromEntries()**将Map对象作为参数,并创建一个新对象,其键和对应值有Map中的对给出:
const map = new Map()
map.set('one', 1)
map.set('two', 2)
map.set('three', 3)
const obj = Object.fromEntries(map)
console.log(obj)
- 使用**Object.fromEntries()**的另一种情况是处理URL的查询字符串
const paramsString = 'param1=foo¶m2=baz'
const searchParams = new URLSearchParams(paramsString)
Object.fromEntries(searchParams)
此代码中,查询字符串将传递给**URLSearchParams()构造函数,然后将返回值(即URLSearchParams对象实例)传递给Object.fromEntries()**方法,结果是一个包含每个参数作为属性的对象
trimStart() and trimEnd()
- trimStart()和trimEnd()方法再实现与trimLeft和trimRight相同
const str = " string "
// ES2019
console.log(str.trimStart()) // "string "
console.log(str.trimEnd()) // " string"
flat() and flatMap()
- **flat()**方法可以将多维数组展平一维数组
const arr = ['a', 'b', 'c', ['d', 'e',]]
const flattened = arr.flat()
console.log(flattened)
- 以前经常使用的是**reduce()或者concat()**来展平多维数组
const arr = ['a', 'b', 'c', ['d', 'e',]]
const flattened1 = [].concat.apply([], arr)
// 或者
const flattened2 = [].concat(...arr)
- 数组存在空值展平时将被丢弃
const arr = ['a', '', '', 'b', ['c', 'd']]
const fattened = arr.flat()
console.log(fattened)
- **flat()**还接受一个可选参数,该参数指定嵌套数组应该被展平的级别数,如果未提供参数,则将使用默认值
1
const arr = [10, [20, [30]]]
console.log(arr.flat()) // [10, 20, [30]]
console.log(arr.flat(1)) // [10, 20, [30]]
console.log(arr.flat(2)) // [10, 20, 30]
- **flatMap()方法是将map()和flat()**组合成一个方法.首先使用提供的函数的返回值创建一个新数组,然后连接该数组的所有子数组元素
const arr = [4.25, 19.99, 25.5]
console.log(arr.map(value => [Math.round(value)])) // [[4], [20], [26]]
console.log(arr.flatMap(value => [Math.round(value)])) // [4, 20, 26]
- 数组将被展平的深度级别为
1
,如果要从结果中删除项目,只需返回一个空数组
const arr = [[7.1], [8.1], [9.1], [10.1], [11.1]]
arr.flatMap(value => {
if(value >= 10) {
return [] // 删除大于10的
} else {
return Math.round(value)
}
})
// [7, 8, 9]
PS: 除了正在处理的当前元素外,回调函数还将接收元素的索引和数组本身的引用
Symbol对象的description属性
- 在创建Symbol时,可以为调试目的向其添加description(描述).有时候,能够直接访问代码中的description是很有用的
- Symbol对象添加了只读属性description,该对象返回包含Symbol描述的字符串
let sym = Symbol('foo')
console.log(sym.description) // foo
sym = Symbol()
console.log(sym.description) // undefined
sym = Symbol.for('bar')
console.log(sym.description) // bar
可选的catch
- try catch语句中的catch有时候并没有用
try {
// 使用浏览器可能尚未实现的功能
} catch (unused) {
// 这里回调函数已经帮我们处理还的错误
}
- 上述代码中catch回调的信息并没有用处,但这样写是为了避免SyntaxError错误,ES2019可以省略catch周围的括号
try {
// huhu
} catch {
// lala
}