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ù)運算，次方運算
const result1 = Math.pow(3, 3)
// ES7: **
const result2 = 3 ** 3
console.log(result1, result2) // 27 27
3、Object補充方法,數(shù)組中存放可枚舉屬性的鍵值對數(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 可以獲取到一個數(shù)組，數(shù)組中會存放可枚舉屬性的鍵值對數(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() 方法會按照一個可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素//合并為一個新數(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ù)映射每個元素，然后將結(jié)果壓縮成一個新數(shù)組。
// 注意一：flatMap是先進行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)用場景
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ù)組映射為對象
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)用場景
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、單獨去除一個字符串首和尾的空格
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 (錯誤)
// 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、空值運算和可選鏈
// ES11: 空值合并運算 ??
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.||= 邏輯或賦值運算
// let message = "hello world"
// message = message || "default value"
// message ||= "default value"
// console.log(message)
// 2.&&= 邏輯與賦值運算
// &&
// 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.??= 邏輯空賦值運算
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 對象被垃圾回收時請求一個回調(diào)
// ES12: FinalizationRegistry類
// FinalizationRegistry 提供了這樣的一種方法：當(dāng)一個在注冊表中注冊的對象被回收時，請求在某個時間點上調(diào)
// 用一個清理回調(diào)。（清理回調(diào)有時被稱為 finalizer ）;
// 可以通過調(diào)用register方法，注冊任何你想要清理回調(diào)的對象，傳入該對象和所含的值;
const finalRegistry = new FinalizationRegistry((value) => {
console.log("注冊在finalRegistry的對象, 某一個被銷毀", value)
})
let obj = { name: "why" }
let info = { age: 18 }
finalRegistry.register(obj, "obj")
finalRegistry.register(info, "value")
obj = null
info = null
11、對象賦值的弱引用
// ES12: WeakRef類
// WeakRef.prototype.deref:
// > 如果原對象沒有銷毀, 那么可以獲取到原對象
// > 如果原對象已經(jīng)銷毀, 那么獲取到的是undefined
const finalRegistry = new FinalizationRegistry((value) => {
console.log("注冊在finalRegistry的對象, 某一個被銷毀", 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)
