ES10 -- 新特性 · 前端知识 -- 学习整理

>[success] # ES10 -- Object.fromEntries 1. 方法 **Object.fromEntries()** 把键值对列表转换为**一个对象** ~~~ Object.fromEntries([ ['foo', 1], ['bar', 2] ]) // {foo: 1, bar: 2} ~~~ >[danger] ##### 案例 entries =》 fromEntries ~~~ const obj = { name: 'jimmy', age: 18 } const entries = Object.entries(obj) console.log(entries) // [Array(2), Array(2)] // ES10 const fromEntries = Object.fromEntries(entries) console.log(fromEntries) // {name: "jimmy", age: 18} ~~~ >[danger] ##### 案例 -- Map => Object ~~~ const map = new Map() map.set('name', 'jimmy') map.set('age', 18) console.log(map) // {'name' => 'jimmy', 'age' => 18} const obj = Object.fromEntries(map) console.log(obj) // {name: "jimmy", age: 18} ~~~ >[danger] ##### 案例 -- 过滤将值转数组过滤转会对象 ~~~ 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 } ~~~ >[danger] ##### 案例 -- url的search参数转换 ~~~ // let url = "https://www.baidu.com?name=jimmy&age=18&height=1.88" // queryString 为 window.location.search const queryString = "?name=jimmy&age=18&height=1.88"; const queryParams = new URLSearchParams(queryString) // URLSearchParams const paramObj = Object.fromEntries(queryParams); console.log(paramObj); // { name: 'jimmy', age: '18', height: '1.88' } ~~~ >[success] # ES10 -- flat 1. `flat([depth])` 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 2. **depth 可选** 指定要提取嵌套数组的结构深度，默认值为 1 ~~~ const {log} =console // flat 不会改变原数组 const list2 = [1, [2], [[3], 4], 5] log(list2.flat(Infinity)) // [ 1, 2, 3, 4, 5 ] ~~~ 3. `flat()` 方法会移除数组中的空项 ~~~ var arr5 = [1, 2, , 4, 5]; arr5.flat(); // [1, 2, 4, 5] ~~~ >[success] # ES10 -- flatMap 1. `flatMap`,是先进行map操作，再做flat的操作,flat相当于深度为1 也就是等价**array.map().flat()** ~~~ const arr = [1, 2, 3, 4] const a2 = arr.flatMap((item) => [item * 2]) // 等同写法 const a1 = arr.map((item) => [item * 2]).flat() console.log(a1) //[ 2, 4, 6, 8 ] console.log(a2) // [ 2, 4, 6, 8 ] ~~~ >[danger] ##### 案例 -- flatMap 1. 生成的是二维数组，再用flat 变为一维数组，就可以使用**flatMap** ~~~ et arr = ['今天天气不错', '', '早上好'] arr.map(s => s.split('')).flat() // ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"] arr.flatMap(s => s.split('')) // ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"] ~~~ >[danger] ##### 案例 -- flatMap 作为filter 增强版本使用 1. **flat()** 方法会移除数组中的空项，如果将某些条件限制，返回一个 0 项元素数组以删除该项 2. 可以理解为等同与**filter().map()** ~~~ const ls = [ { id: 1, name: 'ww', age: 20, info: {}, }, { id: 2, name: 'cc', age: 17, info: {}, }, { id: 3, name: 'yy', age: 21, info: {}, }, ] // 要过滤出成年年龄并且形成格式 [{name:'',age: ,id: ,}] const l1 = ls .filter((item) => item.age > 18) .map(({ name, age, id }) => ({ name, age, id })) const l2 = ls.flatMap((item) => { // 因为后续会通过flat 解构所以这里做了一层数组/ 也可以不用 if (item.age > 18) return [{ name: item.name, age: item.age, id: item.id }] else return [] // 返回的空项会flat 过滤掉 }) // [ { name: 'ww', age: 20, id: 1 }, { name: 'yy', age: 21, id: 3 } ] [ { name: 'ww', age: 20, id: 1 }, { name: 'yy', age: 21, id: 3 } ] console.log(l1, l2) ~~~ * mdn 拆数字案例 ~~~ let a = [5, 4, -3, 20, 17, -33, -4, 18] a.flatMap( (n) => (n < 0) ? [] : (n % 2 == 0) ? [n] : [n-1, 1] ) // expected output: [4, 1, 4, 20, 16, 1, 18] ~~~ >[success] # ES10 -- String.prototype.trimStart/trimEnd 1. **trimStart()** 方法从字符串的开头删除空格，**trimLeft()** 是此方法的别名 ~~~ let str = ' foo ' console.log(str.length) // 8 str = str.trimStart() // 或str.trimLeft() console.log(str.length) // 5 ~~~ 2. **trimEnd()** 方法从一个字符串的右端移除空白字符，**trimRight()** 是 trimEnd 的别名。 ~~~ let str = ' foo ' console.log(str.length) // 8 str = str.trimEnd() // 或str.trimRight() console.log(str.length) // 6 ~~~ >[success] # 可选的Catch Binding 1. 以前 **err** 是必须的参数，在 ES10 可以省略这个参数 ~~~ try { // tryCode } catch (err) { // catchCode } ~~~ * es10 ~~~ try { console.log('Foobar') } catch { console.error('Bar') } ~~~ >[success] # ES10 -- Symbol.prototype.description 获取symbol 描述 1. 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 ~~~ 2. 想获取更准确的描述值内容使用 `description `方法获取 `Symbol `的描述 ~~~ const name = Symbol('es') console.log(name.description) // es name.description = "es2" // 只读属性并不能修改描述符 console.log(name.description === 'es') // true // 如果没有描述符输入undefined const s2 = Symbol() console.log(s2.description) // undefined ~~~ >[success] # ES10 --Function.prototype.toString 1. 以前函数的toString方法来自**Object.prototype.toString()**,现在的 **Function.prototype.toString()** 方法返回一个表示当前函数源代码的字符串。以前只会返回这个函数，不包含注释、空格等 ~~~ function foo() { // es10新特性 console.log('imooc') } console.log(foo.toString()) // 打印如下 // function foo() { // // es10新特性 // console.log("imooc"); // } ~~~