小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
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], , 4,5].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.trimStart 和 String.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' }
点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。
往期精彩推荐
Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM
Git 相关推荐
面试相关推荐
更多精彩详见:个人主页