>[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"); // } ~~~