对象扩展方法：
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
