第九节：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 它会用转义字符的方式来处理这部分字符而非编码的方式，这样就会正常显示了。

     // uD83DuDE0E  emoji 多字节的一个字符
    console.log(JSON.stringify('uD83DuDE0E')) // 笑脸

    // 如果我们只去其中的一部分  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 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。