第九节：ES10之Object、String、Array、Function、可选Catch、JSON、Symbol扩展
一. Object扩展
1. Object.fromEntries()
方法 Object.fromEntries() 把键值对列表转换为一个对象，这个方法是和 Object.entries() 相对的。
Object.fromEntries([ ['foo', 1], ['bar', 2] ]) // {foo: 1, bar: 2}
2. 场景1-Object转换
const obj = { name: 'imooc', course: 'es' } const entries = Object.entries(obj) console.log(entries) // [ [ 'name', 'imooc' ], [ 'course', 'es' ] ] // ES10 const fromEntries = Object.fromEntries(entries) console.log(fromEntries) // {name: "imooc", course: "es"}
3. 场景2-Map转Object
const map = new Map() map.set('name', 'imooc') map.set('course', 'es') console.log(map) const obj = Object.fromEntries(map) console.log(obj) // {name: "imooc", course: "es"}
4. 场景3-过滤
course表示所有课程，想请求课程分数大于80的课程组成的对象
const course = { math: 80, english: 85, chinese: 90 } const res = Object.entries(course).filter(([key, val]) => val > 80) console.log(res) //[ [ 'english', 85 ], [ 'chinese', 90 ] ] console.log(Object.fromEntries(res)) //{ english: 85, chinese: 90 }
二. String扩展
1. trimStart()
trimStart() 方法从字符串的开头删除空格，trimLeft()是此方法的别名，二者等价。
let str = ' foo ' console.log(str.length) // 8 str = str.trimStart() console.log(str.length) // 5
2.trimEnd()
trimEnd() 方法从一个字符串的右端移除空白字符，trimRight 是 trimEnd 的别名，二者等价。
let str = ' foo ' console.log(str.length) // 8 str = str.trimEnd() console.log(str.length) // 6
三. Array扩展
1. flat
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
代码分享：
const numbers = [1, 2, [3, 4, [5, 6]]] console.log(numbers.flat()) // [1, 2, 3, 4, [5, 6]]
PS：此时 flat 的参数没有设置，取默认值 1，也就是说只扁平化向下一级，遇到 [3, 4, [5, 6]] 这个数组会扁平会处理，不会再继续遍历内部的元素是否还有数组
const numbers = [1, 2, [3, 4, [5, 6]]] console.log(numbers.flat(2)) // [1, 2, 3, 4, 5, 6]
PS：当 flat 的参数大于等于 2，返回值就是 [1, 2, 3, 4, 5, 6] 了。
2. flatMap
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。从方法的名字上也可以看出来它包含两部分功能一个是 map，一个是 flat（深度为1）。
代码分享：
const numbers = [1, 2, 3] numbers.map(x => [x * 2]) // [[2], [4], [6]] numbers.flatMap(x => [x * 2]) // [2, 4, 6]
let arr = ['今天天气不错', '', '早上好'] arr.map(s => s.split('')) // [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]] arr.flatMap(s => s.split('')) // ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]
四. Function扩展
修订 Function.prototype.toString()
函数是对象，并且每个对象都有一个 .toString() 方法，因为它最初存在于Object.prototype.toString() 上。所有对象（包括函数）都是通过基于原型的类继承从它继承的。这意味着我们以前已经有 funcion.toString() 方法了。
Function.prototype.toString() 方法返回一个表示当前函数源代码的字符串。
这意味着还将返回注释、空格和语法详细信息。
function foo() { // es10新特性 console.log('imooc') } console.log(foo.toString()) // 直接在方法名toString() console.log(Number.parseInt.toString())
运行结果：
五. 可选的catch binding
ES10之前
try { // tryCode } catch (err) { // catchCode }
ES10
ES10可以省略catch后面的参数
try { console.log('Foobar') } catch { console.error('Bar') }
六. JSON扩展
JSON.stringify 在 ES10 修复了对于一些超出范围的 Unicode 展示错误的问题。因为 JSON 都是被编码成 UTF-8，所以遇到 0xD800–0xDFFF 之内的字符会因为无法编码成 UTF-8 进而导致显示错误。在 ES10 它会用转义字符的方式来处理这部分字符而非编码的方式，这样就会正常显示了。
// \uD83D\uDE0E emoji 多字节的一个字符 console.log(JSON.stringify('\uD83D\uDE0E')) // 笑脸 // 如果我们只去其中的一部分 \uD83D 这其实是个无效的字符串 // 之前的版本 ，这些字符将替换为特殊字符，而现在将未配对的代理代码点表示为JSON转义序列 console.log(JSON.stringify('\uD83D')) // "\ud83d"
七. Symbol扩展
Symbol.prototype.description
我们知道，Symbol 的描述只被存储在内部的 Description ，没有直接对外暴露，我们只有调用 Symbol 的 toString() 时才可以读取这个属性：
const name = Symbol('es')
console.log(name.toString()) // Symbol(es)
console.log(name) // Symbol(es)
console.log(name === 'Symbol(es)') // false
console.log(name.toString() === 'Symbol(es)') // true
现在可以通过 description 方法获取 Symbol 的描述:
const name = Symbol('es')
console.log(name.description) // es
console.log(name.description === 'es') // true
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
