詳解ECMAScript2019/ES10新屬性
每年都有一些新的屬性進入ECMA262標準，今年發(fā)布的ECMAScript2019/ES10同樣也有很多新的特性，本文將會挑選一些普通開發(fā)者會用到的新屬性進行深入的解讀。
Array.prototype.flat()
The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. -- MDN
簡單來說flat這個函數(shù)就是按照一定的深度depth將一個深層次嵌套的數(shù)組拍扁, 例子:
const nestedArr = [1, 2, [3, 4, [5, 6, [7, [8], 9]]], 10] console.log(nestedArr.flat()) // [1, 2, 3, 4, [5, 6, [7, [8], 9]], 10] console.log(nestedArr.flat(2)) // [1, 2, 3, 4, 5, 6, [7, [8], 9], 10] console.log(nestedArr.flat(3)) // [1, 2, 3, 4, 5, 6, 7, [8], 9, 10] console.log(nestedArr.flat(4)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] console.log(nestedArr.flat(Infinity)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
由上面的例子可以看出flat會按照指定的深度depth將一個數(shù)組扁平化，如果需要將數(shù)組完全拍扁變成一維數(shù)組，則指定depth為無限大，即是Infinity，相反如果不指定深度，其默認值是1。
Array.prototype.flatMap()
The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map() followed by a flat() of depth 1, but flatMap() is often quite useful, as merging both into one method is slightly more efficient. -- MDN
簡單來說flatMap等于一個數(shù)組先調(diào)用完map函數(shù)再調(diào)用flat函數(shù)將其扁平化，扁平化的深度固定為1，先通過一個簡單的例子感受一下:
const myArr = [1, 2, 3] myArr .map(n => [n * n]) // [[1], [4], [9]] .flat() // [1, 4, 9] // 用flatMap可以一步到位 myArr.flatMap(n => [n * n]) // [1, 4, 9]
從上面的例子來看flatMap如果只是將flat和map做了一個簡單的組合好像可有可無，其實不然，flatMap有個強大的功能是可以在map的時候添加和刪除元素，這個無論是map還是filter都沒有這個功能。
要想刪除某一個元素只需要在mapper函數(shù)里面返回一個空的數(shù)組[], 而增加元素只需在mapper函數(shù)里面返回一個長度大于1的數(shù)組，具體可以看下面的例子：
// 假如我們想要刪除掉原數(shù)組里面所有的負數(shù)，同時將單數(shù)轉(zhuǎn)換為一個復數(shù)和1
const a = [5, 4, -3, 20, 17, -33, -4, 18]
// |\ \ x | | \ x x |
// [4,1, 4, 20, 16,1, 18]
a.flatMap(n =>
(n < 0) ? []: // 刪除負數(shù)
(n % 2 == 0) ? [n] : // 保留復數(shù)
[n - 1, 1] // 單數(shù)變?yōu)橐粋€復數(shù)和1
)
// [4, 1, 4, 20, 20, 16, 1, 18]
Object.fromEntries()
The Object.fromEntries() method transforms a list of key-value pairs into an object. --MDN
fromEntries方法將一個iterable對象返回的一系列鍵值對(key-value pairs)轉(zhuǎn)換為一個object。先看一個簡單的例子理解一下:
// key-value pairs數(shù)組
const entriesArr = [['k1', 1], ['k2', 2]]
console.log(Object.fromEntries(entriesArr)
// {k1: 1, k2: 2}
const entriesMap = new Map([
['k1', 1],
['k2', 2]
]) // {"k1" => 1, "k2" => 2}
console.log(Object.fromEntries(entriesMap))
// {k1: 1, k2: 2}
再來看一個自定義的iterable對象例子深入理解一下:
const iteratorObj = {
[Symbol.iterator]: function () {
const entries = [['k1', 1], ['k2', 2]]
let cursor = 0
return {
next() {
const done = entries.length === cursor
return {
value: done ? undefined : entries[cursor++],
done
}
}
}
}
}
Object.fromEntries(iteratorObj) // {k1: 1, k2: 2}
這個方法有一個用途就是對object的key進行filter，舉個例子:
const studentMap = {
student1: {grade: 80},
student2: {grade: 50},
student3: {grade: 100}
}
const goodStudentMap = Object.fromEntries(
Object
.entries(studentMap)
.filter(([_, meta]) => meta.grade >= 60)
)
console.log(goodStudentMap)
// {student1: {grade: 80}, student3: {grade: 100}}
String.prototype.trimStart
這個方法很簡單，就是返回一個將原字符串開頭的空格字符去掉的新的字符串，例子:
const greeting = ' Hello world! ' console.log(greeting.trimStart()) // 'Hello world! '
這個方法還有一個別名函數(shù)，叫做trimLeft，它們具有一樣的功能。
String.prototype.trimEnd
這個方法和trimStart類似，只不過是將原字符串結(jié)尾的空格字符去掉，例子:
const greeting = ' Hello world! ' console.log(greeting.trimEnd()) // ' Hello world!'
這個方法也有一個別名函數(shù)，叫做trimRight, 它們也具有一樣的功能。
Symbol.prototype.description
The read-only description property is a string returning the optional description of Symbol objects. -- MDN
ECMAScript2019給Symbol對象添加了一個可選的description屬性，這個屬性是個只讀屬性，看看例子:
console.log(Symbol('desc').description)
// desc
console.log(Symbol.for('desc').description)
// desc
// 一些內(nèi)置的Symbol也有這個屬性
console.log(Symbol.iterator.description)
// Symbol.iterator
// 如果初始化時沒有帶description，這個屬性會返回一個undefined，因為這樣才說這個屬性是可選的
console.log(Symbol().description)
// undefined
// 這個屬性是只讀的，不能被設置
Symbol.iterator.description = 'mess it'
console.log(Symbol.iterator.description)
// Symbol.iterator
這個新的屬性只要是為了方便開發(fā)者調(diào)試，不能通過比較兩個Symbol對象的description來確定這兩個Symbol是不是同一個Symbol:
var s1 = Symbol("desc")
var s2 = Symbol("desc")
console.log(s1.description === s2.description)
// true
console.log(s1 === s2)
// false
try catch optional binding
ECMAScript2019之后，你寫try...catch時如果沒必要時可以不用聲明error：
// ECMAScript2019之前，你一定要在catch里面聲明error，否則會報錯
try {
...
} catch (error) {
}
// 可是有時候，你確實用不到這個error對象，于是你會寫這樣的代碼
try {
...
} catch (_) {
...
}
// ECMAScript2019后，你可以直接這樣寫了
try {
...
} catch {
...
}
雖然這個新屬性可以讓你省略掉error，可是我覺得開發(fā)者應該避免使用這個屬性，因為在我看來所有的錯誤都應該被處理，至少應該被console.error出來，否則可能會有一些潛在的bug，舉個例子：
let testJSONObj
try {
testJSONObj = JSON.prase(testStr)
} catch {
testJSONObj = {}
}
console.log(testJSONObj)
以上代碼中無論testStr是不是一個合法的JSON字符串，testJSONObj永遠都是一個空對象，因為JSON.parse函數(shù)名寫錯了，而你又忽略了錯誤處理，所以你永遠不會知道這個typo。
穩(wěn)定的排序 Array.prototype.sort
ECMAScript2019后Array.sort一定是個穩(wěn)定的排序。什么是穩(wěn)定排序？所謂的穩(wěn)定排序就是：假如沒排序之前有兩個相同數(shù)值的元素a[i]和a[j]，而且i在j前面，即i < j，經(jīng)過排序后元素a[i]依然排在a[j]元素的前面，也就是說穩(wěn)定的排序不會改變原來數(shù)組里面相同數(shù)值的元素的先后關(guān)系?？磦€例子：
var users = [
{name: 'Sean', rating: 14},
{name: 'Ken', rating: 14},
{name: 'Jeremy', rating: 13}
]
users.sort((a, b) => a.rating - b.rating)
// 非穩(wěn)定的排序結(jié)果可能是
// [
// {name: 'Jeremy', rating: 13},
// {name: 'Ken', rating: 14},
// {name: 'Sean', rating: 14}
// ]
// 雖然Sean和Ken具有同樣的rating，可是非穩(wěn)定的排序不能保證他們兩個的順序在排序后保持不變
// ECMAScript2019后，Array.sort將是一個穩(wěn)定的排序，也就是說它可以保證Sean和Ken兩個人的順序在排序后不變
// [
// {name: 'Jeremy', rating: 13},
// {name: 'Sean', rating: 14},
// {name: 'Ken', rating: 14}
// ]
改進Function.prototype.toString()
ECMAScript2019之前，調(diào)用function的toString方法會將方法體里面的空格字符省略掉，例如:
function hello() {
console.log('hello word')
}
console.log(hello.toString())
//'function hello() {\nconsole.log('hello word')\n}'
ECMAScript2019之后，要求一定要返回函數(shù)源代碼（保留空格字符）或者一個標準的占位符例如native code，所以ECMAScript2019之后，以上的輸出會變?yōu)椋?br />
console.log(hello.toString())
//"function hello() {
// console.log('hello word')
//}"
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
最近客戶在使用我們的流量監(jiān)測系統(tǒng)以及GA時發(fā)現(xiàn)了一個問題，我們統(tǒng)計到的數(shù)據(jù)比GA的要多很多倍，而且我們統(tǒng)計到的數(shù)據(jù)中，跳出率非常高，高達99%左右。2010-09-09
這篇文章主要介紹了js設計模式之單例模式原理與用法,結(jié)合實例形式詳細分析了javascript單例模式的概念、原理、用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-08-08
下面小編就為大家?guī)硪黄狫S當前頁面登錄注冊框,固定DIV,底層陰影的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要給大家介紹了關(guān)于在組件外(.js文件)中使用pinia的解決方法, pinia是Vue的最新一代的輕量級狀態(tài)管理插件,它允許跨組件/頁面共享狀態(tài),需要的朋友可以參考下2024-06-06
現(xiàn)在微博都有一個不錯的效果就是會實時的動態(tài)滾動并顯示最新的信息了，下面我來給大家介紹仿新浪微博大廳首頁滾動效果,希望此方法對大家會有幫助。2015-10-10
下面小編就為大家?guī)硪黄钊肜斫鈐s數(shù)組的sort排序。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
JavaScript的Array對象有一個sort方法，用于實現(xiàn)對數(shù)組元素的排序，該方法默認按照數(shù)組項ASCII 字符順序升序排列。這篇文章重點給大家介紹js模擬實現(xiàn)Array的sort方法，一起看看吧2007-12-12
這篇文章主要介紹了js實現(xiàn)按鈕加背景圖片常用方法,羅列了js事件觸發(fā)控制背景圖片、css樣式控制以及圖片按鈕三種方法,非常具有實用價值,需要的朋友可以參考下2014-11-11
按照W3C的說明，String對象的replace方法調(diào)用方式是stringObject.replace(regexp/substr,replacement)。2011-12-12
JavaScript語言中的Literal Syntax特性分析
JavaScript語言中的Literal Syntax特性分析...2007-03-03