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、指数运算，次方运算
const result1 = Math.pow(3, 3)
// ES7: **
const result2 = 3 ** 3
console.log(result1, result2) // 27 27
3、Object补充方法,数组中存放可枚举属性的键值对数组
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 可以获取到一个数组，数组中会存放可枚举属性的键值对数组。
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、数组降维
// flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素//合并为一个新数组返回。
// 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() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
// 注意一：flatMap是先进行map操作，再做flat的操作；
// 注意二：flatMap中的flat相当于深度为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的应用场景
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、数组映射为对象
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的应用场景
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、大整数
// 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函数被调用")
// }
// }
// 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 对象被垃圾回收时请求一个回调
// ES12: FinalizationRegistry类
// FinalizationRegistry 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调
// 用一个清理回调。（清理回调有时被称为 finalizer ）;
// 可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象和所含的值;
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:
// > 如果原对象没有销毁, 那么可以获取到原对象
// > 如果原对象已经销毁, 那么获取到的是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)
