ES系列总结(五)

2,027 阅读4分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

1. Array.prototype.flat

1.1 简介

ES2019对数组的扁平化处理提供了方法。flat 方法会按一个指定的深度去递归地遍历数组,并将遍历到的元素和其子数组中的元素合并到一个新数组中返回。

flat 接收一个整数作为参数, 默认值为 1.

1.2 基本使用

[1, 2, [3, [4, [5]]]].flat()
// [1, 2, 3, [4, [5]]]
[1, 2, [3, [4, [5]]]].flat(2)
// [1, 2, 3, 4, [5]]
// 若原数组存在空格, 则 flat 方法会忽略该空格

[1, 2, [3], , 45].flat()
// [1, 2, 3, 4, 5]
// 若无论多少层级都希望扁平化数组,那么可以传入参数 Infinity

[1, 2, [3, [4, [5]]]].flat(Infinity)
// [1, 2, 3, 4, 5]
// 我们也可以用正则表达式实现一个 flat(Infinity)

const myFlat = (arr) => JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']')
myFlat([1,2,[3,4,[5]]) // [1, 2, 3, 4, 5]

2. Array.prototype.flatMap

2.1 简介

flatMap 方法先对数组做map函数的映射处理,然后再为每个元素调用flat方法以扁平化处理。

MDN上对该方法的描述是:“它与 map 连着深度值为1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。”

2.2 基本使用

const arr = [1, 2, 3, 4]
const mapArr = arr.flatMap(item => [item * 2]) // [[2], [4], [6], [8]]
const flatMapArr = arr.flatMap(item => [item * 2]) // [2, 4, 6, 8]

3. Function.prototype.toString

3.1 简介

ES2019 对函数的原型方法 toString 做了修订,原先该方法返回函数源代码,并省略注释和空格

function /* test */ fn() {}
fn.toString() // function fn() {}
修订后的toString方法, 将保留原代码中的注释、空格等。

function /* test */ fn() {}
fn.toString() // function /* test */ fn() {}

4. JSON SuperSet

JSON 超集

4.1 简介

ES2019 对JSON字符串的解析进行修订,ES2019前若JSON字符串中有 行分隔符\u2028 和 段落分隔符\u2029, 则解析时会报错

JSON.parse('"\u2028"') // Syntax Error
// ES2019修订后

JSON.parse('"\u2028"') // ''

5. Well Formed Stringify

更友好的Stringify

5.1 简介

ES2019 对于一些超出范围的 Unicode 字符串, 为其输出转义序列,使其成为有效的 Unicode


before

JSON.stringify('"\uD800"') // "�"
after

JSON.stringify('"\uD800"') // "\ud800"

6. Optional Catch Binding

可选的catch参数

6.1 简介

ES2019前,JavaScript的 try-catch 语法中的 catch 被要求带上参数err

before

try {
 
} catch(err) {
  ...
}
after
ES2019后, 为保证语法正确,依然必须写 catch。 但考虑到一些场景 catch 块不会用到参数,修订后可参略参数

try {
 
} catch {
  ...
}

7. String Left Right Trim

String.prototype.trimStartString.prototype.trimEnd

7.1 简介

ES2019 对字符串实例新增了 trimStart 和 trimEnd 方法,他们的行为和 trim 一致,用于消除字符串头部和尾部的空格,返回一个新的字符串。

7.2 基本使用

const s = '  string  '
s.trim() // 'string'
s.trimStart() // 'string  '
s.trimEnd() // '  string'

7.3 更多

  • 除了消除字符串的空格,上述两个方法对字符串头部(尾部)的不可见空白符号如 tab、 换行符等也有效

  • 为了与String.prototype.padStart / String.prototype.padEnd 保持一致, 标准方法命名为 trimStart 和 trimEnd, 但出于 Web 兼容性原因,浏览器还部署了额外的两个方法,trimLeft() 是 trimStart() 的别名,trimRight() 是 trimEnd() 的别名。

8. Object.fromEntries

8.1 简介

ES2019提供了, Object.fromEntries 方法, 是Object.entries 的逆方法,接收一个实现了 iterable 的对象, 并将其转化为Object

8.2 基本使用

const arr = [['name', 'alice'], ['age', '19']]
const object = Object.fromEntries(arr) // { name: 'alice', age: '19' }

8.3 更多

  • 对象的转换:可以通过 Object.fromEntries Object.entries 来转换对象

    const obj = { value1: 11, value2: 22, value3: 33 }
    const res = Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, value * 2])) // { value1: 22, value2: 44, value3: 66 }
    
  • 可用 Object.fromEntries 结合 URLSearchParams 对象,将查询字符串转对象

    Object.fromEntries(new URLSearchParams('name=alice&age=21')) // { name: 'alice', age: '21' }
    

点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。

11.png

往期精彩推荐

前端常用的几种加密方法

canvas 爬坑路【方法篇】

不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化

canvas 爬坑路【属性篇】

【实战篇】微信小程序开发指南和优化实践

聊一聊移动端适配

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见:个人主页