当前位置：首页 > news >正文

ES6 及以上版本的新增特性解析

news 2026/6/30 13:27:08

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

const[a,b]=[1,2];console.log(a,b);// 1 2const{name,age}={name:"Alice",age:30};console.log(name,age);// Alice 30

默认参数（Default Parameters）
- 函数参数可以设置默认值，如果调用时未传入参数，则使用默认值。
```
functiongreet(name="Guest"){console.log(`Hello,${name}!`);}greet();// Hello, Guest!greet("Alice");// Hello, Alice!
```

（二）新数据结构

let和const
- let和const提供了块级作用域（block scope），解决了var的作用域提升问题。
- const用于声明常量，声明后不能重新赋值。
```
{letx=1;consty=2;}console.log(x);// ReferenceError: x is not definedconsole.log(y);// ReferenceError: y is not defined
```
Symbol
- Symbol是一种新的原始数据类型，用于创建唯一的标识符。
```
constmySymbol=Symbol("mySymbol");console.log(mySymbol);// Symbol(mySymbol)
```

Map和Set

Map是一个键值对集合，键可以是任意类型。
Set是一个集合，存储唯一的值。

constmyMap=newMap();myMap.set("key1","value1");console.log(myMap.get("key1"));// value1constmySet=newSet([1,2,3,3]);console.log(mySet.size);// 3

（三）类（Classes）

ES6 引入了类语法，用于定义构造函数和方法。

classPerson{constructor(name,age){this.name=name;this.age=age;}greet(){console.log(`Hello, my name is${this.name}and I am${this.age}years old.`);}}constalice=newPerson("Alice",30);alice.greet();// Hello, my name is Alice and I am 30 years old.

（四）模块（Modules）

ES6 引入了模块化支持，允许开发者将代码拆分成多个模块，通过import和export语法进行导入和导出。

// math.jsexportfunctionadd(a,b){returna+b;}exportfunctionsubtract(a,b){returna-b;}// main.jsimport*asMathfrom"./math.js";console.log(Math.add(2,3));// 5console.log(Math.subtract(5,2));// 3

（五）其他特性

Promise

Promise是一个用于异步编程的对象，表示一个尚未完成的操作。

constmyPromise=newPromise((resolve,reject)=>{setTimeout(()=>resolve("Promise resolved!"),1000);});myPromise.then((result)=>console.log(result));// Promise resolved!

for...of和for...in

for...of遍历可迭代对象（如数组、字符串等）的值。
for...in遍历对象的键。

constarr=[1,2,3];for(constvalueofarr){console.log(value);// 1 2 3}constobj={a:1,b:2};for(constkeyinobj){console.log(key);// a b}

二、ES2016（ES7）及以后版本的新增特性

在 ES6 的基础上，ES2016 及以后的版本继续引入了许多新特性，进一步完善了 JavaScript 的功能。以下是一些重要的新增特性：

（一）ES2016（ES7）

指数运算符（Exponentiation Operator）
- 使用**表示指数运算。
```
console.log(2**3);// 8
```

Array.prototype.includes

检查数组是否包含某个值。

constarr=[1,2,3];console.log(arr.includes(2));// trueconsole.log(arr.includes(4));// false

（二）ES2017（ES8）

async和await

async函数用于声明异步函数，await用于等待Promise的结果。

asyncfunctionfetchData(){constresponse=awaitfetch("https://api.example.com/data");constdata=awaitresponse.json();returndata;}fetchData().then((data)=>console.log(data));

Object.values和Object.entries
- Object.values返回对象的值数组。
- Object.entries返回对象的键值对数组。
```
constobj={a:1,b:2};console.log(Object.values(obj));// [1, 2]console.log(Object.entries(obj));// [["a", 1], ["b", 2]]
```
String.prototype.padStart和String.prototype.padEnd
- padStart和padEnd方法用于在字符串的开头或结尾填充指定的字符。
```
conststr="hello";console.log(str.padStart(10," "));// " hello"console.log(str.padEnd(10," "));// "hello "
```

（三）ES2018（ES9）

可选链操作符（Optional Chaining）
- 使用?.访问对象的属性时，如果对象为null或undefined，不会抛出错误，而是返回undefined。
```
constperson={name:"Alice"};console.log(person?.address?.city);// undefined
```

Promise.prototype.finally

finally方法用于在Promise的链式调用中，无论成功或失败，都会执行的回调函数。

fetch("https://api.example.com/data").then((response)=>response.json()).catch((error)=>console.error(error)).finally(()=>console.log("Request finished"));

（四）ES2019（ES10）

Array.prototype.flat和Array.prototype.flatMap
- flat方法用于将多维数组展平为一维数组。
- flatMap方法先对数组的每个元素调用回调函数，然后将结果展平为一维数组。
```
constarr=[1,[2,[3]]];console.log(arr.flat(2));// [1, 2, 3]constarr2=[1,2,3];console.log(arr2.flatMap((x)=>[x,x*2]));// [1, 2, 2, 4, 3, 6]
```

Object.fromEntries

将键值对数组转换为对象。

constentries=[["a",1],["b",2]];console.log(Object.fromEntries(entries));// { a: 1, b: 2 }

（五）ES2020（ES11）

BigInt

BigInt是一种新的数值类型，用于表示大于2^53 - 1的整数。

constbigNumber=BigInt(1234567890123456789012345678901234567890n);console.log(bigNumber);// 1234567890123456789012345678901234567890n

String.prototype.matchAll

使用正则表达式匹配字符串的所有结果，并返回一个迭代器。

constregex=/a/g;conststr="abacada";constmatches=[...str.matchAll(regex)];console.log(matches);// [["a", index: 0, input: "abacada", groups: undefined], ...]

（六）ES2021（ES12）及以后版本

ES2021 及以后的版本继续引入了许多新特性，例如：

逻辑赋值运算符（Logical Assignment Operators）
- &&=、||=和??=用于逻辑赋值。
```
letx;x||=10;// x = 10x&&=20;// x = 10
```

Promise.any

Promise.any方法返回一个Promise，该Promise在传入的多个Promise中任意一个成功时立即成功。

constpromises=[Promise.reject("Error 1"),Promise.resolve("Success")];Promise.any(promises).then((result)=>console.log(result))// Success.catch((error)=>console.error(error));