平阳县住房和城乡规划建设局网站系统优化的例子

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() 等新特性。

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