个人认为目前比较好用的ECMAScript(16-20)新特性

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&param2=baz'
    const searchParams = new URLSearchParams(paramsString)
    Object.fromEntries(searchParams)

此代码中,查询字符串将传递给**URLSearchParams()构造函数,然后将返回值(即URLSearchParams对象实例)传递给Object.fromEntries()**方法,结果是一个包含每个参数作为属性的对象

trimStart() and trimEnd()
  • trimStart()trimEnd()方法再实现与trimLefttrimRight相同
    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
    }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值