1探遵、包含判斷includes方法
ES7
const names = ["abc", "cba", "nba", "mba", NaN]
if (names.indexOf("cba") !== -1) {
console.log("包含abc元素")
}
// ES7 ES2016
if (names.includes("cba", 2)) {
console.log("包含abc元素")
}
if (names.indexOf(NaN) !== -1) {
console.log("包含NaN")
}
if (names.includes(NaN)) {
console.log("包含NaN")
}
2窟赏、指數(shù)運(yùn)算，次方運(yùn)算
const result1 = Math.pow(3, 3)
// ES7: **
const result2 = 3 ** 3
console.log(result1, result2) // 27 27
3箱季、Object補(bǔ)充方法,數(shù)組中存放可枚舉屬性的鍵值對(duì)數(shù)組
const obj = {
name: "why",
age: 18
}
console.log(Object.keys(obj)) // [ 'name', 'age' ]
console.log(Object.values(obj)) // [ 'why', 18 ]
// 用的非常少
console.log(Object.values(["abc", "cba", "nba"])) // [ 'abc', 'cba', 'nba' ]
console.log(Object.values("abc")) // [ 'a', 'b', 'c' ]
// 通過Object.entries 可以獲取到一個(gè)數(shù)組涯穷，數(shù)組中會(huì)存放可枚舉屬性的鍵值對(duì)數(shù)組。
const obj = {
name: "why",
age: 18
}
console.log(Object.entries(obj)) // [ [ 'name', 'why' ], [ 'age', 18 ] ]
const objEntries = Object.entries(obj)
objEntries.forEach(item => {
console.log(item[0], item[1]) // name:why age:18
})
console.log(Object.entries(["abc", "cba", "nba"])) // [ [ '0', 'abc' ], [ '1', 'cba' ], [ '2', 'nba' ] ]
console.log(Object.entries("abc")) // [ [ '0', 'a' ], [ '1', 'b' ], [ '2', 'c' ] ]
4藏雏、字符串填充
const message = "Hello World"
const newMessage = message.padStart(15, "*").padEnd(20, "-")
console.log(newMessage) // ****Hello World-----
// 案例
const cardNumber = "321324234242342342341312"
const lastFourCard = cardNumber.slice(-4)
const finalCard = lastFourCard.padStart(cardNumber.length, "*")
console.log(finalCard) // ********************1312
5拷况、數(shù)組降維
// flat() 方法會(huì)按照一個(gè)可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素//合并為一個(gè)新數(shù)組返回掘殴。
// 1.flat的使用
const nums = [10, 20, [2, 9], [[30, 40], [10, 45]], 78, [55, 88]]
const newNums = nums.flat()
console.log(newNums) // [ 10, 20, 2, 9, [ 30, 40 ], [ 10, 45 ], 78, 55, 88 ]
const newNums2 = nums.flat(2)
console.log(newNums2)
// [
// 10, 20, 2, 9, 30,
// 40, 10, 45, 78, 55,
// 88
// ]
// flatMap() 方法首先使用映射函數(shù)映射每個(gè)元素赚瘦，然后將結(jié)果壓縮成一個(gè)新數(shù)組。
// 注意一：flatMap是先進(jìn)行map操作奏寨，再做flat的操作起意；
// 注意二：flatMap中的flat相當(dāng)于深度為1；
// 2.flatMap的使用
const nums2 = [10, 20, 30]
const newNums3 = nums2.flatMap(item => {
return item * 2
})
const newNums4 = nums2.map(item => {
return item * 2
})
console.log(newNums3) // [ 20, 40, 60 ]
console.log(newNums4) // [ 20, 40, 60 ]
// 3.flatMap的應(yīng)用場(chǎng)景
const messages = ["Hello World", "hello lyh", "my name is coderwhy"]
const words = messages.flatMap(item => {
return item.split(" ")
})
console.log(words)
// [
// 'Hello', 'World',
// 'hello', 'lyh',
// 'my', 'name',
// 'is', 'coderwhy'
// ]
5病瞳、數(shù)組映射為對(duì)象
const obj = {
name: "why",
age: 18,
height: 1.88
}
const entries = Object.entries(obj)
console.log(entries) // [ [ 'name', 'why' ], [ 'age', 18 ], [ 'height', 1.88 ] ]
let newObj = {}
for (const entry of entries) {
newObj[entry[0]] = entry[1]
}
// 1.ES10中新增了Object.fromEntries方法
newObj = Object.fromEntries(entries)
console.log(newObj) // { name: 'why', age: 18, height: 1.88 }
// 2.Object.fromEntries的應(yīng)用場(chǎng)景
const queryString = 'name=why&age=18&height=1.88'
const queryParams = new URLSearchParams(queryString)
for (const param of queryParams) {
console.log(param)
// [ 'name', 'why' ]
// [ 'age', '18' ]
// [ 'height', '1.88' ]
}
const paramObj = Object.fromEntries(queryParams)
console.log(paramObj) // { name: 'why', age: '18', height: '1.88' }
6揽咕、單獨(dú)去除一個(gè)字符串首和尾的空格
const message = " Hello World "
console.log(message.trim()) // Hello World
console.log(message.trimStart()) // Hello World
console.log(message.trimEnd()) // Hello World
7、大整數(shù)
// ES11之前 max_safe_integer
const maxInt = Number.MAX_SAFE_INTEGER
console.log(maxInt) // 9007199254740991
console.log(maxInt + 1) // 9007199254740992
console.log(maxInt + 2) // 9007199254740992 (錯(cuò)誤)
// ES11之后: BigInt
const bigInt = 900719925474099100n
console.log(bigInt + 10n) // 900719925474099110n
const num = 100
console.log(bigInt + BigInt(num)) // 900719925474099200n
const smallNum = Number(bigInt)
console.log(smallNum) // 900719925474099100
8套菜、空值運(yùn)算和可選鏈
// ES11: 空值合并運(yùn)算 ??
const foo = undefined
// const bar = foo || "default value"
const bar = foo ?? "defualt value"
console.log(bar) // defualt value
// 可選鏈
const info = {
name: "why",
// friend: {
// girlFriend: {
// name: "hmm"
// }
// }
}
// console.log(info.friend.girlFriend.name)
// if (info && info.friend && info.friend.girlFriend) {
// console.log(info.friend.girlFriend.name)
// }
// ES11提供了可選鏈(Optional Chainling)
console.log(info.friend?.girlFriend?.name)
console.log('其他的代碼邏輯')
// 1.||= 邏輯或賦值運(yùn)算
// let message = "hello world"
// message = message || "default value"
// message ||= "default value"
// console.log(message)
// 2.&&= 邏輯與賦值運(yùn)算
// &&
// const obj = {
// name: "why",
// foo: function() {
// console.log("foo函數(shù)被調(diào)用")
// }
// }
// obj.foo && obj.foo()
// &&=
// let info = {
// name: "why"
// }
// // 1.判斷info
// // 2.有值的情況下, 取出info.name
// // info = info && info.name
// info &&= info.name
// console.log(info)
// 3.??= 邏輯空賦值運(yùn)算
let message = 0
message ??= "default value"
console.log(message)
9心褐、全局屬性
// 在瀏覽器下
console.log(window)
console.log(this)
// 在node下
console.log(global)
// ES11
console.log(globalThis)
10、FinalizationRegistry 對(duì)象被垃圾回收時(shí)請(qǐng)求一個(gè)回調(diào)
// ES12: FinalizationRegistry類
// FinalizationRegistry 提供了這樣的一種方法：當(dāng)一個(gè)在注冊(cè)表中注冊(cè)的對(duì)象被回收時(shí)笼踩，請(qǐng)求在某個(gè)時(shí)間點(diǎn)上調(diào)
// 用一個(gè)清理回調(diào)逗爹。（清理回調(diào)有時(shí)被稱為 finalizer ）;
// 可以通過調(diào)用register方法，注冊(cè)任何你想要清理回調(diào)的對(duì)象，傳入該對(duì)象和所含的值;
const finalRegistry = new FinalizationRegistry((value) => {
console.log("注冊(cè)在finalRegistry的對(duì)象, 某一個(gè)被銷毀", value)
})
let obj = { name: "why" }
let info = { age: 18 }
finalRegistry.register(obj, "obj")
finalRegistry.register(info, "value")
obj = null
info = null
11掘而、對(duì)象賦值的弱引用
// ES12: WeakRef類
// WeakRef.prototype.deref:
// > 如果原對(duì)象沒有銷毀, 那么可以獲取到原對(duì)象
// > 如果原對(duì)象已經(jīng)銷毀, 那么獲取到的是undefined
const finalRegistry = new FinalizationRegistry((value) => {
console.log("注冊(cè)在finalRegistry的對(duì)象, 某一個(gè)被銷毀", value)
})
let obj = { name: "why" }
let info = new WeakRef(obj)
finalRegistry.register(obj, "obj")
obj = null
setTimeout(() => {
console.log(info.deref()?.name)
console.log(info.deref() && info.deref().name)
}, 10000)
