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

es6+新增特性有哪些

news 来源：原创 2025/5/20 21:57:25

ES6+（ES6及以后版本，如ES7、ES8等）新增了许多特性，主要包括以下几个方面：

1. ES6（2015）新增特性

变量声明

let 和 const（块级作用域）
var（仍可用，但更推荐 let 和 const）

模板字符串

const name = "Tom";
console.log(`Hello, ${name}!`); // Hello, Tom!

解构赋值

const user = { name: "Alice", age: 25 };
const { name, age } = user; 
console.log(name, age); // Alice 25

const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first, second); // 1 2

展开运算符（...）

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

箭头函数

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

默认参数

const greet = (name = "Guest") => `Hello, ${name}!`;
console.log(greet()); // Hello, Guest!

对象字面量增强

const age = 25;
const user = { name, age }; // { name: "Alice", age: 25 }

类（Class）

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}
const p = new Person("Alice");
p.sayHello(); // Hello, I'm Alice

模块（Module）

// a.js
export const greet = () => console.log("Hello");
// b.js
import { greet } from "./a.js";
greet();

Promise

const fetchData = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data loaded"), 1000);
  });

fetchData().then((res) => console.log(res)); // Data loaded

`Set` 和 `Map`

const set = new Set([1, 2, 2, 3]);
console.log(set); // Set { 1, 2, 3 }

const map = new Map();
map.set("key1", "value1");
console.log(map.get("key1")); // value1

`for...of` 循环

const arr = [1, 2, 3];
for (const num of arr) {
  console.log(num);
}

Symbol（唯一值）

const sym = Symbol("unique");
console.log(sym); // Symbol(unique)

2. ES7（2016）新增特性

Array.prototype.includes

console.log([1, 2, 3].includes(2)); // true

指数运算符（``）**

console.log(2 ** 3); // 8

3. ES8（2017）新增特性

`async/await`

const fetchData = async () => {
  return "Data loaded";
};
fetchData().then(console.log); // Data loaded

Object.entries() / Object.values()

const obj = { a: 1, b: 2 };
console.log(Object.entries(obj)); // [['a', 1], ['b', 2]]
console.log(Object.values(obj)); // [1, 2]

字符串填充

console.log("5".padStart(2, "0")); // '05'
console.log("5".padEnd(3, "0")); // '500'

4. ES9（2018）新增特性

对象的展开运算符

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

Promise.prototype.finally

fetchData()
  .then(console.log)
  .catch(console.error)
  .finally(() => console.log("Done"));

5. ES10（2019）新增特性

`Array.prototype.flat()` 和 `flatMap()`

console.log([1, [2, [3, 4]]].flat(2)); // [1, 2, 3, 4]
console.log([1, 2].flatMap(x => [x * 2])); // [2, 4]

`Object.fromEntries()`

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

6. ES11（2020）新增特性

可选链（`?.`）

const user = { profile: { name: "Alice" } };
console.log(user?.profile?.name); // Alice
console.log(user?.address?.street); // undefined

空值合并运算符（`??`）

console.log(null ?? "default"); // "default"
console.log(0 ?? "default"); // 0

`Promise.allSettled()`

Promise.allSettled([Promise.resolve(1), Promise.reject("error")])
  .then(console.log);

7. ES12（2021）新增特性

`String.prototype.replaceAll()`

console.log("hello world".replaceAll("l", "L")); // "heLLo worLd"

`Promise.any()`

Promise.any([
  Promise.reject("error"),
  Promise.resolve("success"),
]).then(console.log); // "success"

`WeakRef`（弱引用）

const obj = new WeakRef({ name: "Alice" });

8. ES13（2022）新增特性

`Object.hasOwn()`

console.log(Object.hasOwn({ a: 1 }, "a")); // true

顶层 `await`

const data = await fetch("https://api.example.com/data").then(res => res.json());
console.log(data);

总结

ES6+ 带来了大量新特性，其中 ES6 是最大的一次更新，引入了 let、const、箭头函数、解构赋值、类、模块化等。后续版本（ES7+）继续增加了 async/await、可选链（?.）、Promise.allSettled()、Object.hasOwn() 等新特性。

你最关注哪些特性？可以针对某个特性深入探讨！ 😊