JavaScript高級(jí)?ES7-ES13?新特性詳解
更新時(shí)間：2023年02月06日 14:40:47 作者：ximingx
這篇文章主要介紹了JavaScript高級(jí)?ES7-ES13?新特性詳解,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1. ES7
1. Array Includes
在ES7之前，如果我們想判斷一個(gè)數(shù)組中是否包含某個(gè)元素，需要通過 indexOf 獲取結(jié)果，并且判斷是否為 -1
在ES7中，我們可以通過includes來判斷一個(gè)數(shù)組中是否包含一個(gè)指定的元素，根據(jù)情況，如果包含則返回 true，否則返回false
var arr = [1, 23, 4, 4524, 5] console.log(arr.includes(3)); //false console.log(arr.includes(1)); // true
2. 指數(shù)exponentiation運(yùn)算符
在ES7之前，計(jì)算數(shù)字的乘方需要通過 Math.pow 方法來完成
在ES7中，增加了 ** 運(yùn)算符，可以對(duì)數(shù)字來計(jì)算乘方
console.log(3 ** 2); // 9 console.log(Math.pow(3, 2)); // 9
2. ES8
1. Object values entries
通過 Object.entries 可以獲取到一個(gè)數(shù)組，數(shù)組中會(huì)存放可枚舉屬性的鍵值對(duì)數(shù)組
const obj = {
name: "why",
age: 18,
height: 1.88,
address: "廣州市"
}
// 1.獲取所有的key
const keys = Object.keys(obj)
console.log(keys)
// 2.ES8 Object.values
const values = Object.values(obj)
console.log(values)
// 3.ES8 Object.entries
// 3.1. 對(duì)對(duì)象操作
const entries = Object.entries(obj)
console.log(entries)
for (const entry of entries) {
const [key, value] = entry
console.log(key, value)
}
// 3.2. 對(duì)數(shù)組/字符串操作(了解)
console.log(Object.entries(["abc", "cba"]))
console.log(Object.entries("Hello"))2. String Padding
某些字符串我們需要對(duì)其進(jìn)行前后的填充，來實(shí)現(xiàn)某種格式化效果，ES8中增加了 padStart 和 padEnd 方法，分別是對(duì)字符串的首尾進(jìn)行填充的
// padStart和padEnd
// 1.應(yīng)用場(chǎng)景一: 對(duì)時(shí)間進(jìn)行格式化
// const minute = "15".padStart(2, "0")
// const second = "6".padStart(2, "0")
// console.log(`${minute}:${second}`)
// 2.應(yīng)用場(chǎng)景二: 對(duì)一些敏感數(shù)據(jù)格式化
let cardNumber = "132666200001018899"
const sliceNumber = cardNumber.slice(-4)
cardNumber = sliceNumber.padStart(cardNumber.length, "*")
const cardEl = document.querySelector(".card")
cardEl.textContent = cardNumber3. Trailing Commas
在ES8中，我們?cè)试S在函數(shù)定義和調(diào)用時(shí)多加一個(gè)逗號(hào)
function foo(num1, num2, ) {
console.log(num1, num2)
}
foo(10, 20, )4. Object Descriptors
Object.getOwnPropertyDescriptors
5. async、await
3. ES9
1. Async iterators
2. Object spread operators
3. Promise finally
4. ES10
1. flat flatMap
flat() 方法會(huì)按照一個(gè)可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回
flatMap是先進(jìn)行map操作，再做flat的操作, flatMap中的flat相當(dāng)于深度為1
// 1.flat的使用:
// 將一個(gè)數(shù)組, 按照制定的深度遍歷, 將遍歷到的元素和子數(shù)組中的元素組成一個(gè)新的數(shù)組, 進(jìn)行返回
// const nums = [10, 20, [111, 222], [333, 444], [[123, 321], [231, 312]]]
// const newNums1 = nums.flat(1)
// console.log(newNums1)
// const newNums2 = nums.flat(2)
// console.log(newNums2)
// 2.flatMap的使用:
// 1> 對(duì)數(shù)組中每一個(gè)元素應(yīng)用一次傳入的map對(duì)應(yīng)的函數(shù)
const messages = [
"Hello World aaaaa",
"Hello ximingx"
]
// 1.for循環(huán)的方式:
// const newInfos = []
// for (const item of messages) {
// const infos = item.split(" ")
// for (const info of infos) {
// newInfos.push(info)
// }
// }
// console.log(newInfos)
// 2.先進(jìn)行map, 再進(jìn)行flat操作
// const newMessages = messages.map(item => item.split(" "))
// const finalMessages = newMessages.flat(1)
// console.log(finalMessages)
// 3.flatMap
const finalMessages = messages.flatMap(item => item.split(" "))
console.log(finalMessages)
2. Object fromEntries
ES10提供了 Object.formEntries來完成 entries將其轉(zhuǎn)換成對(duì)象的操作
// 1.對(duì)象
// const obj = {
// name: "why",
// age: 18,
// height: 1.88
// }
// const entries = Object.entries(obj)
// const info = Object.fromEntries(entries)
// console.log(info)
// 2.應(yīng)用
const searchString = "?name=why&age=18&height=1.88"
const params = new URLSearchParams(searchString)
console.log(params.get("name"))
console.log(params.get("age"))
console.log(params.entries())
// for (const item of params.entries()) {
// console.log(item)
// }
const paramObj = Object.fromEntries(params)
console.log(paramObj)3. trimStart trimEnd
const message = " Hello World "
console.log(message.trim())
console.log(message.trimStart())
console.log(message.trimEnd())4. Symbol description
5. Optional catch binding
5. ES11
1. BigInt
大于MAX_SAFE_INTEGER的數(shù)值，表示的可能是不正確的
console.log(Number.MAX_SAFE_INTEGER)
const num1 = 9007199254740992n
const num2 = 9007199254740993n
console.log(num1, num2)
console.log(Number.MAX_SAFE_INTEGER)
const num1 = 9007199254740992n
const num2 = 9007199254740993n
console.log(num1, num2)ES11中，引入了新的數(shù)據(jù)類型BigInt，用于表示大的整數(shù)
BitInt的表示方法是在數(shù)值的后面加上n
2. Nullish Coalescing Operator
let info = undefined
// info = info || "默認(rèn)值"
// console.log(info)
// ??: 空值合并運(yùn)算符
info = info ?? "默認(rèn)值"
console.log(info)3. Optional Chaining
可選鏈也是ES11中新增一個(gè)特性，主要作用是讓我們的代碼在進(jìn)行null和undefined判斷時(shí)更加清晰和簡(jiǎn)潔
const obj = {
name: "why",
friend: {
name: "kobe",
// running: function() {
// console.log("running~")
// }
}
}
// 1.直接調(diào)用: 非常危險(xiǎn)
// obj.friend.running()
// 2.if判斷: 麻煩/不夠簡(jiǎn)潔
// if (obj.friend && obj.friend.running) {
// obj.friend.running()
// }
// 3.可選鏈的用法: ?.
obj?.friend?.running?.()4. Global This
在ES11中對(duì)獲取全局對(duì)象進(jìn)行了統(tǒng)一的規(guī)范：globalThis
5. for…in標(biāo)準(zhǔn)化
在ES11之前，雖然很多瀏覽器支持for…in來遍歷對(duì)象類型，但是并沒有被ECMA標(biāo)準(zhǔn)化，在ES11中，對(duì)其進(jìn)行了標(biāo)準(zhǔn)化，for…in是用于遍歷對(duì)象的key的
6. Dynamic Import
7. Promise.allSettled
8. import meta
6. ES12
1. FinalizationRegistry
FinalizationRegistry 提供了這樣的一種方法：當(dāng)一個(gè)在注冊(cè)表中注冊(cè)的對(duì)象被回收時(shí)，請(qǐng)求在某個(gè)時(shí)間點(diǎn)上調(diào)用一個(gè)清理回調(diào)
你可以通過調(diào)用register方法，注冊(cè)任何你想要清理回調(diào)的對(duì)象，傳入該對(duì)象和所含的值
let obj = { name: "why", age: 18 }
let info = { name: "kobe", age: 30 }
const finalRegistry = new FinalizationRegistry((value) => {
console.log("某一個(gè)對(duì)象被回收了:", value)
})
finalRegistry.register(obj, "why")
finalRegistry.register(info, "kobe")
// obj = null
info = null2. WeakRefs
如果我們默認(rèn)將一個(gè)對(duì)象賦值給另外一個(gè)引用，那么這個(gè)引用是一個(gè)強(qiáng)引用
如果我們希望是一個(gè)弱引用的話，可以使用WeakRef
let info = { name: "why", age: 18 }
let obj = new WeakRef(info)
let obj2 = new WeakRef(info)
const finalRegistry = new FinalizationRegistry(() => {
console.log("對(duì)象被回收~")
})
finalRegistry.register(info, "info")
setTimeout(() => {
info = null
}, 2000)
setTimeout(() => {
console.log(obj.deref().name, obj.deref().age)
}, 8000)3. logical assignment operators
// 賦值運(yùn)算符
// const foo = "foo"
let counter = 100
counter = counter + 100
counter += 50
// 邏輯賦值運(yùn)算符
function foo(message) {
// 1.||邏輯賦值運(yùn)算符
// message = message || "默認(rèn)值"
// message ||= "默認(rèn)值"
// 2.??邏輯賦值運(yùn)算符
// message = message ?? "默認(rèn)值"
message ??= "默認(rèn)值"
console.log(message)
}
foo("abc")
foo()
// 3.&&邏輯賦值運(yùn)算符
let obj = {
name: "why",
running: function() {
console.log("running~")
}
}
// 3.1.&&一般的應(yīng)用場(chǎng)景
// obj && obj.running && obj.running()
// obj = obj && obj.name
obj &&= obj.name
console.log(obj)
7. ES13
1. method .at()
const message = "my name is why, why age is 18"
const newMessage = message.replace("why", "kobe")
const newMessage2 = message.replaceAll("why", "kobe")
console.log(newMessage)
console.log(newMessage2)2. Object.hasOwn(obj, propKey)
該方法用于判斷一個(gè)對(duì)象中是否有某個(gè)自己的屬性
// const obj = {
// name: "why",
// age: 18,
// // 1.和hasOwnProperty的區(qū)別一: 防止對(duì)象中也有一個(gè)自己的hasOwnProperty方法
// hasOwnProperty: function() {
// return "abc"
// },
// __proto__: {
// address: "廣州市"
// }
// }
// console.log(obj.name, obj.age)
// console.log(obj.address)
// console.log(obj.hasOwnProperty("name"))
// console.log(obj.hasOwnProperty("address"))
// console.log(Object.hasOwn(obj, "name"))
// console.log(Object.hasOwn(obj, "address"))
// 2.和hasOwnProperty的區(qū)別二:
const info = Object.create(null)
info.name = "why"
// console.log(info.hasOwnProperty("name"))
console.log(Object.hasOwn(info, "name"))3. New members of classes
在ES13中，新增了定義class類中成員字段（field）的其他方式
class Person {
// 1.實(shí)例屬性
// 對(duì)象屬性: public 公共 -> public instance fields
height = 1.88
// 對(duì)象屬性: private 私有: 程序員之間的約定
// _intro = "name is why"
// ES13對(duì)象屬性: private 私有: 程序員之間的約定
#intro = "name is why"
// 2.類屬性(static)
// 類屬性: public
static totalCount = "70億"
// 類屬性: private
static #maleTotalCount = "20億"
constructor(name, age) {
// 對(duì)象中的屬性: 在constructor通過this設(shè)置
this.name = name
this.age = age
this.address = "廣州市"
}
// 3.靜態(tài)代碼塊
static {
console.log("Hello World")
console.log("Hello Person")
}
}
const p = new Person("why", 18)
console.log(p)
// console.log(p.name, p.age, p.height, p.address, p.#intro)
// console.log(Person.#maleTotalCount)到此這篇關(guān)于JavaScript高級(jí) ES7-ES13 新特性的文章就介紹到這了,更多相關(guān)js ES7-ES13 新特性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了JS算法題解旋轉(zhuǎn)數(shù)組方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
?javascript學(xué)數(shù)組中的foreach方法和some方法
這篇文章主要介紹了?javascript學(xué)數(shù)組中的foreach方法和some方法，文章相關(guān)內(nèi)容和代碼詳細(xì)，具有一定的參考價(jià)值，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-03-03
小程序canvas實(shí)現(xiàn)畫布半圓環(huán)
這篇文章主要為大家詳細(xì)介紹了小程序canvas實(shí)現(xiàn)畫布半圓環(huán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單擲骰子效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
文檔對(duì)象模型 (DOM) 表示 HTML 文檔的結(jié)構(gòu),導(dǎo)航或“遍歷”此結(jié)構(gòu)是 Web 開發(fā)的基本方面,使開發(fā)人員能夠在網(wǎng)頁上選擇、修改、刪除或添加內(nèi)容,本文深入研究了使用 JavaScript 進(jìn)行 DOM 遍歷的藝術(shù),提供了一個(gè)強(qiáng)大的工具包來處理各種遍歷場(chǎng)景2023-09-09
Javascript學(xué)習(xí)筆記-詳解in運(yùn)算符
in運(yùn)算符是javascript語言中比較特殊的一個(gè)，可以單獨(dú)使用作為判斷運(yùn)算符，也常被用于for...in循環(huán)中遍歷對(duì)象屬性2011-09-09
這篇文章主要介紹了源碼分析Django的message組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
JS尾遞歸的實(shí)現(xiàn)方法及代碼優(yōu)化技巧
這篇文章主要介紹了JS尾遞歸的實(shí)現(xiàn)方法及代碼優(yōu)化技巧,結(jié)合實(shí)例形式分析了尾遞歸的原理、JS實(shí)現(xiàn)方法及優(yōu)化技巧,需要的朋友可以參考下2019-01-01
javascript實(shí)現(xiàn)html頁面之間參數(shù)傳遞的四種方法實(shí)例分析
這篇文章主要介紹了javascript實(shí)現(xiàn)html頁面之間參數(shù)傳遞的四種方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript實(shí)現(xiàn)頁面之間參數(shù)傳遞的常用技巧,需要的朋友可以參考下2015-12-12
js將當(dāng)前時(shí)間格式轉(zhuǎn)換成時(shí)間搓(自寫)
將時(shí)間轉(zhuǎn)換成時(shí)間搓的方法有很多，在本文為大家介紹下使用js將當(dāng)前時(shí)間轉(zhuǎn)換成時(shí)間搓 例如2013-09-11 12:12:12，感興趣的朋友可以參考下2013-09-09