JavaScript ES7至ES13核心新特性完整指南
本文系统梳理JavaScript从ES7到ES13的核心更新。涵盖Array.includes、指数运算符**、async/await异步编程、Object.entries/values、String Padding、flat/flatMap数组扁平化、BigInt大整数、Optional Chaining可选链、globalThis全局对象、FinalizationRegistry终结注册表、WeakRefs弱引用、Logical Assignment逻辑赋值、.at()访问器及Object.hasOwn等关键特性，帮助开发者掌握现代JS语法演进。
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)); // true2. 指数exponentiation运算符
在ES7之前，计算数值的乘方运算需调用Math.pow函数来实现。
ES7新增了**运算符，支持直接对数字执行乘方计算，简化了数学运算语法。
console.log(3 ** 2); // 9
console.log(Math.pow(3, 2)); // 92. ES8
1. Object values entries
使用Object.entries方法可获取一个包含对象所有可枚举属性键值对的数组，每个元素为[key, value]形式的子数组。
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两种操作：先对数组元素执行map映射，再执行深度为1的flat扁平化操作。
// 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.fromEntries方法，用于将键值对数组（如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限制时，JavaScript的传统Number类型可能无法精确表示该数值。
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数据类型，专门用于表示任意精度的大整数。
BigInt的语法表示方式是在整数末尾添加字母n。
2. Nullish Coalescing Operator
let info = undefined
// info = info || "默认值"
// console.log(info)
// ??: 空值合并运算符
info = info ?? "默认值"
console.log(info)3. Optional Chaining
可选链（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新增了定义类成员字段（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 新特性内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18