JavaScript高级 ES7-ES13 新特性详解
更新时间：2023年02月06日 14:40:47 作者：ximingx
这篇文章主要介绍了JavaScript高级 ES7-ES13 新特性详解,本文结合实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
1. ES7
1. Array Includes
在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1
在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false
var arr = [1, 23, 4, 4524, 5] console.log(arr.includes(3)); //false console.log(arr.includes(1)); // true
2. 指数exponentiation运算符
在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成
在ES7中，增加了 ** 运算符，可以对数字来计算乘方
console.log(3 ** 2); // 9 console.log(Math.pow(3, 2)); // 9
2. ES8
1. Object values entries
通过 Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组
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. 对对象操作
const entries = Object.entries(obj)
console.log(entries)
for (const entry of entries) {
const [key, value] = entry
console.log(key, value)
}
// 3.2. 对数组/字符串操作(了解)
console.log(Object.entries(["abc", "cba"]))
console.log(Object.entries("Hello"))2. String Padding
某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的
// padStart和padEnd
// 1.应用场景一: 对时间进行格式化
// const minute = "15".padStart(2, "0")
// const second = "6".padStart(2, "0")
// console.log(`${minute}:${second}`)
// 2.应用场景二: 对一些敏感数据格式化
let cardNumber = "132666200001018899"
const sliceNumber = cardNumber.slice(-4)
cardNumber = sliceNumber.padStart(cardNumber.length, "*")
const cardEl = document.querySelector(".card")
cardEl.textContent = cardNumber3. Trailing Commas
在ES8中，我们允许在函数定义和调用时多加一个逗号
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() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
flatMap是先进行map操作，再做flat的操作, flatMap中的flat相当于深度为1
// 1.flat的使用:
// 将一个数组, 按照制定的深度遍历, 将遍历到的元素和子数组中的元素组成一个新的数组, 进行返回
// 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> 对数组中每一个元素应用一次传入的map对应的函数
const messages = [
"Hello World aaaaa",
"Hello ximingx"
]
// 1.for循环的方式:
// const newInfos = []
// for (const item of messages) {
// const infos = item.split(" ")
// for (const info of infos) {
// newInfos.push(info)
// }
// }
// console.log(newInfos)
// 2.先进行map, 再进行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将其转换成对象的操作
// 1.对象
// const obj = {
// name: "why",
// age: 18,
// height: 1.88
// }
// const entries = Object.entries(obj)
// const info = Object.fromEntries(entries)
// console.log(info)
// 2.应用
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的数值，表示的可能是不正确的
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中，引入了新的数据类型BigInt，用于表示大的整数
BitInt的表示方法是在数值的后面加上n
2. Nullish Coalescing Operator
let info = undefined
// info = info || "默认值"
// console.log(info)
// ??: 空值合并运算符
info = info ?? "默认值"
console.log(info)3. Optional Chaining
可选链也是ES11中新增一个特性，主要作用是让我们的代码在进行null和undefined判断时更加清晰和简洁
const obj = {
name: "why",
friend: {
name: "kobe",
// running: function() {
// console.log("running~")
// }
}
}
// 1.直接调用: 非常危险
// obj.friend.running()
// 2.if判断: 麻烦/不够简洁
// if (obj.friend && obj.friend.running) {
// obj.friend.running()
// }
// 3.可选链的用法: ?.
obj?.friend?.running?.()4. Global This
在ES11中对获取全局对象进行了统一的规范：globalThis
5. for…in标准化
在ES11之前，虽然很多浏览器支持for…in来遍历对象类型，但是并没有被ECMA标准化，在ES11中，对其进行了标准化，for…in是用于遍历对象的key的
6. Dynamic Import
7. Promise.allSettled
8. import meta
6. ES12
1. FinalizationRegistry
FinalizationRegistry 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调
你可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象和所含的值
let obj = { name: "why", age: 18 }
let info = { name: "kobe", age: 30 }
const finalRegistry = new FinalizationRegistry((value) => {
console.log("某一个对象被回收了:", value)
})
finalRegistry.register(obj, "why")
finalRegistry.register(info, "kobe")
// obj = null
info = null2. WeakRefs
如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用
如果我们希望是一个弱引用的话，可以使用WeakRef
let info = { name: "why", age: 18 }
let obj = new WeakRef(info)
let obj2 = new WeakRef(info)
const finalRegistry = new FinalizationRegistry(() => {
console.log("对象被回收~")
})
finalRegistry.register(info, "info")
setTimeout(() => {
info = null
}, 2000)
setTimeout(() => {
console.log(obj.deref().name, obj.deref().age)
}, 8000)3. logical assignment operators
// 赋值运算符
// const foo = "foo"
let counter = 100
counter = counter + 100
counter += 50
// 逻辑赋值运算符
function foo(message) {
// 1.||逻辑赋值运算符
// message = message || "默认值"
// message ||= "默认值"
// 2.??逻辑赋值运算符
// message = message ?? "默认值"
message ??= "默认值"
console.log(message)
}
foo("abc")
foo()
// 3.&&逻辑赋值运算符
let obj = {
name: "why",
running: function() {
console.log("running~")
}
}
// 3.1.&&一般的应用场景
// 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)
该方法用于判断一个对象中是否有某个自己的属性
// const obj = {
// name: "why",
// age: 18,
// // 1.和hasOwnProperty的区别一: 防止对象中也有一个自己的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的区别二:
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.实例属性
// 对象属性: public 公共 -> public instance fields
height = 1.88
// 对象属性: private 私有: 程序员之间的约定
// _intro = "name is why"
// ES13对象属性: private 私有: 程序员之间的约定
#intro = "name is why"
// 2.类属性(static)
// 类属性: public
static totalCount = "70亿"
// 类属性: private
static #maleTotalCount = "20亿"
constructor(name, age) {
// 对象中的属性: 在constructor通过this设置
this.name = name
this.age = age
this.address = "广州市"
}
// 3.静态代码块
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)到此这篇关于JavaScript高级 ES7-ES13 新特性的文章就介绍到这了,更多相关js ES7-ES13 新特性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了浅谈webpack对样式的处理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
本篇文章主要分享了canvas实现绘制吃豆鱼效果的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
event.srcElement 可以捕获当前事件作用的对象，如event.srcElement.tagName可以捕获活动标记名称。2009-12-12
这篇文章主要为大家详细介绍了JavaScript实现网页计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
用Javascript轻松制作一套简单的抽奖系统...2006-12-12
使用typeof方法，typeof 返回的是字符串,其中就有一个是undefined，下面是示例代码，大家可以看看2014-09-09
JavaScript中break、continue和return的用法区别实例分析
这篇文章主要介绍了JavaScript中break、continue和return的用法区别,结合实例形式详细对比分析了JavaScript中break、continue和return的基本功能、使用方法、区别与操作注意事项,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了微信小程序按钮巧妙用法,按钮组件功能比 HTML 中的 button 按钮丰富，通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等），需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了javascript实现摄像头拍照预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)，需要的朋友可以参考一下2013-06-06
最新评论