ES6-ES11新语法之ES10

对象扩展方法：

　　Object.fromEntries()

　　1、概念：Object.fromEntries() 是 Object.entries() 的逆操作，将二维数组（键值对数组）转为对象

    // Object.fromEntries() 是 Object.entries() 的逆操作，将二维数组（键值对数组）转为对象
    const obj = Object.fromEntries([
      ['name', '吴小明'],
      ['age', 20]
    ])
    console.log(obj) // {name: "吴小明", age: 20}

    // ES8中 Object.entries() 获取对象中的键值对转为二维数组
    const arr = Object.entries({ name: "吴小明", age: 20 })
    console.log(arr) // [["name", "吴小明"], ["age", 20]]

    // 对象到对象的转换
    const person = { name: '张三', age: 100 }
    const p = Object.fromEntries(Object.entries(person))
    console.log(p) // {name:'张三',age:100}

　　2、使用场景

    // 适用于Map结构，例1：将键值对的数据结构还原为对象
    const m = new Map()
    m.set('name', '孙艺珍', 'xiaoming').set('age', 20)
    const result = Object.fromEntries(m)
    console.log(m) // {"name" => "孙艺珍", "age" => 20}
    console.log(result) // {name: "孙艺珍", age: 20}

    // 例2
    const map = new Map([
      ['name', '小红'],
      ['age', 18]
    ])
    const result1 = Object.fromEntries(map)
    console.log(map) // {"name" => "小红", "age" => 18}
    console.log(result1) // {name: "小红", age: 18}

    // 和 new URLSearchParams 搭配获取查询字符串
    Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'))
    let queryStr = 'name=孙艺珍&age=20'
    let url = Object.fromEntries(new URLSearchParams(queryStr))
    console.log(Object.prototype.toString.call(new URLSearchParams())) // [object URLSearchParams]
    for(let item of new URLSearchParams(queryStr)){
      console.log(item) // ["name", "孙艺珍"] ["age", "20"]
    }
    console.log(url) // {name: "孙艺珍", age: "20"}

    // 定义一个函数，这个函数第一个参数为对象，另外接收其他几个参数作为需要保留的属性
    function foo(obj, ...keys) {
      return Object.fromEntries(Object.entries(obj)
        .filter(([key]) => keys.includes(key))
      )
    }
    let obj = {
      name: '小明',
      age: '12',
      sex: '男'
    }
    console.log(foo(obj, 'name', 'age')) // {name: "小明", age: "12"}
    console.table(foo(obj, 'name'))

    // 定义一个函数，传入一个参数为对象，交换其属性和值
    function fn(obj) {
      return Object.fromEntries(Object.entries(obj)
        .map(([key, value]) => [value, key])
      )
    }
    console.log({ name: '小明', age: '12' }) // {name: "小明", age: "12"}
    console.log(fn({ name: '小明', age: '12' })) // {12: "age", 小明: "name"}

    // 操作数据：将数据处理，数组对象中的值转为键值对，可以方便的粘贴到excel和数据库中
    const arr = [{
      name: '小明',
      age: 12
    }, {
      name: '小红',
      age: 14
    }]

    obj = Object.fromEntries(
      arr.map(({ name, age }) => [name, age])
    )

    console.table(obj)
    console.log(obj) // {小明: 12, 小红: 14}

　　3、Object.fromEntries() 的实现

　　function fromEntries(arr) {
      if (!arr) return console.error('你特么倒是传一个数组或Map进来啊！')
      return Array.from(arr).reduce(
        (acc, [key, value]) => Object.assign(acc, { [key]: value }), {}
      )
    }
    console.log(fromEntries([['name', '吴小明'], ['age', 20]])) // {name: "吴小明", age: 20}
    console.log(fromEntries(new Map([['name', '小红'], ['age', 18]]))) // {name: "小红", age: 18}
    // console.log(fromEntries()) // undefined

　　4、几个注意事项

    // 1、键值对数组中如果有多余的值相当于没写
    const obj = Object.fromEntries([
      ['name', '孙艺珍'],
      ['age', '20', '21']
    ])
    console.log(obj) // {name: "孙艺珍", age: "20"}

    // 2、键值对中如果有重复的 key，取最后一个
    const obj1 = Object.fromEntries([
      ['name', '孙艺珍'], 
      ['name', '孙艺珍'],
      ['name', '孙艺珍']
    ])
    console.log(obj1) // {name: "孙艺珍"}

字符串扩展方法：

　　trimStart() 和 trimEnd()：（trim()是ES5的方法）

    let str = '  i love you  '
    console.log(str, str.length)                         // '  i love you  ' 14
    console.log(str.trimStart(), str.trimStart().length) // 'i love you  '   12
    console.log(str.trimEnd(), str.trimEnd().length)     // '  i love you'   12
    console.log(str.trim(), str.trim().length)           // 'i love you'     10
    console.log(str.trimLeft(), str.trimLeft().length)   // 'i love you  '   12
    console.log(str.trimRight(), str.trimRight().length) // '  i love you'   12

数组扩展方法：

　　1、flat()：扁平化数组，参数默认值为1，想要将 n 维数组转换为一维数组，参数值为 n-1

    // 二维数组转一维数组
    const arr = [1, 2, [3, 4], [5, 6]]
    console.log(arr.flat()) // [1, 2, 3, 4, 5, 6]

    // 三维数组转二维数组
    const arr1 = [1, 2, [3, 4, [5, 6]]]
    console.log(arr1.flat()) // [1, 2, 3, 4, [5, 6]]

    // 三维数组转一维数组
    const arr2 = [1, 2, [3, 4, [5, 6]]]
    console.log(arr2.flat(2)) // [1, 2, 3, 4, 5, 6]
    console.log(arr2.flat().flat()) // [1, 2, 3, 4, 5, 6]

　　2、flatMap()

    const arr3 = [1, 2, 3, 4]
    // const result = arr3.map(item => item * 10)
    const result = arr3.flatMap(item => [item * 10]) // 同上，相当于执行完 map 方法后再执行 flat 方法将二维数组转为一维数组
    console.log(result) // [10, 20, 30, 40]

Symbol扩展属性：

　　description：获取 Symbol 属性

    let s = Symbol('你好')

    console.log(s.description) // 你好

x