从ES6到ES2023 带你深入了解什么是ES

本文链接：https://blog.csdn.net/m0_61118741/article/details/141992774

前言：

“大家应该都听过 JavaScript 这个名字，甚至可能也听过“ES6”，但 ES 到底是什么？其实，ES 就是 ECMAScript 的缩写，它是 JavaScript 的标准。每年，ECMAScript 都会推出新版本，不断给 JavaScript 增添新功能。今天，我们来聊聊从 ES6 到最新的 ES2023 之间的那些重要新特性，顺便看看现在的浏览器都支持到什么程度了。”

1. ECMAScript 是啥？跟 JavaScript 什么关系？

很多人第一次听到 ECMAScript 可能会一头雾水，其实它就是 JavaScript 的标准化版本。JavaScript 是我们平时用的语言，而 ECMAScript 是它背后的“规矩”。每年标准都会更新，往里加入一些新功能，让我们写代码的体验更好。

2. 浏览器支持 ECMAScript 到哪个版本了？

好消息是，现在主流浏览器像 Chrome、Firefox、Safari 和 Edge 基本上都已经支持到最新的 ECMAScript 标准（ES2023）。所以，不用担心特性不能用，基本上都是无缝衔接。

3. 从 ES6 到 ES2023 的新特性——一网打尽

ES6 (2015) —— JavaScript 的大改革

let 和 const：让变量和常量更安全
```
let a = 10;
const b = 20;
a = 15; // OK
b = 25; // 报错，const 不能重新赋值
```
- 要点：用 let 声明的变量作用域是块级的，不像 var 是全局的。const 声明的是常量，不能再修改。
箭头函数：写函数更简洁
```
const sum = (x, y) => x + y;
console.log(sum(5, 10)); // 15
```
- 要点：箭头函数不仅简洁，还自动绑定 this，解决了传统函数里 this 的困扰。
模板字符串：字符串也可以拼模板
```
const name = "Alice";
const message = `Hello, ${name}!`;
console.log(message); // Hello, Alice!
```
- 要点：不用再手动拼字符串，直接嵌入变量，方便又直观。
解构赋值：让数组和对象操作更简单
```
const person = { name: 'Bob', age: 30 };
const { name, age } = person;
console.log(name, age); // Bob 30
```
- 要点：用解构赋值可以轻松从对象或数组中取值，再也不用手动一个个取了。

类：面向对象编程变简单

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}
const dog = new Animal('Dog');
dog.speak(); // Dog makes a sound.

ES7 (2016) —— 小而实用

Array.prototype.includes：判断数组里有没有这个元素

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

指数运算符 **：计算幂次方更优雅
```
console.log(2 ** 3); // 8
```

ES8 (2017) —— 异步编程福音

async / await：让异步操作变得像同步一样

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
};
fetchData();

要点：async / await 大大简化了处理异步代码的方式，不用再担心回调地狱。

ES9 (2018) —— 让异步操作更顺滑

异步迭代器：异步处理数据流

const asyncIterable = {
  async *[Symbol.asyncIterator]() {
    yield await Promise.resolve(1);
    yield await Promise.resolve(2);
  }
};
(async () => {
  for await (const value of asyncIterable) {
    console.log(value); // 1, 然后 2
  }
})();

ES10 (2019) —— 数组操作新技能

Array.prototype.flat：扁平化数组

const arr = [1, [2, [3, [4]]]];
console.log(arr.flat(2)); // [1, 2, 3, [4]]

ES11 (2020) —— 可选链和空值合并

可选链操作符 ?.：不用担心取不到值

const user = { name: "John" };
console.log(user.address?.city); // undefined，不会抛出错误

空值合并操作符 ??：给空值一个默认值

const value = null ?? 'default';
console.log(value); // 'default'

ES12 (2021) —— 更多字符串和数组功能

replaceAll：一次性替换所有匹配的子字符串

const str = 'foo bar foo';
console.log(str.replaceAll('foo', 'baz')); // baz bar baz

ES13 (2022) —— 新增的正则表达式改进

顶层 await：模块顶层也能用 await，异步代码写法更简单

const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);

ES14 (2023) —— 最新特性来了！

Array.prototype.findLast 和 findLastIndex：从数组末尾开始查找元素

const arr = [1, 2, 3, 4];
console.log(arr.findLast(x => x % 2 === 0)); // 4

4. 浏览器支持情况

大部分主流浏览器像 Chrome、Firefox、Safari 和 Edge 都已经支持了 ES6 到 ES13 的大部分功能，最新的 ES14 也在逐步实现。你可以通过 Can I use 查查看具体的特性支持情况，了解当前浏览器是否已经支持你想用的 ECMAScript 新功能。

5. 结尾

总之，从 ES6 开始，JavaScript 变得越来越强大，特别是这些新特性极大地提升了开发效率。如果你还没尝试过这些功能，现在就是时候了！浏览器支持也越来越全面，赶快试试看吧！