ECMAScript

一、ECMAScript 概述

1. 什么是 ECMA

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994年后该组织改名为 Ecma 国际。

2. 什么是 ECMAScript

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。ECMAScript 和 JavaScript 的关系是：前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。

3. ECMA-262 历史

• ES1 (1997): 制定了语言的基本语法

• ES2 (1998): 较小改动

• ES3 (1999): 引入正则、异常处理、格式化输出等

• ES4 (2007): 过于激进，未发布

• ES5 (2009): 引入严格模式、JSON，扩展对象、数组、原型、字符串、日期方法

• ES6/ES2015 (2015): 模块化、面向对象语法、Promise、箭头函数、let、const等

• 从 ES6 开始，每年发布一个版本，版本号比年份最后一位大 1

二、ES6 (ES2015) 核心特性

1. let 和 const 声明

// let 特性
let a = 1;
// 1. 不允许重复声明
// let a = 2; // 报错
// 2. 块级作用域
{
  let b = 2;
}
// console.log(b); // 报错
// 3. 不存在变量提升
// console.log(c); // 报错
let c = 3;

// const 特性
const PI = 3.14;
// PI = 3.1415; // 报错
// 但对于对象和数组，内容可以修改
const obj = {a: 1};
obj.a = 2; // 允许

2. 解构赋值

// 数组解构
let [x, y] = [1, 2];

// 对象解构
let {name, age} = {name: '张三', age: 20};

// 函数参数解构
function foo({x, y}) {
  console.log(x, y);
}
foo({x: 1, y: 2});

3. 模板字符串

let name = '李四';
let str = `你好，${name}！
欢迎来到ES6的世界。`;

4. 箭头函数

// 简化写法
const sum = (a, b) => a + b;

// this 绑定
const obj = {
  value: 1,
  getValue: function() {
    setTimeout(() => {
      console.log(this.value); // 1
    }, 100);
  }
};

5. 函数参数默认值

function greet(name = '匿名') {
  console.log(`你好，${name}`);
}

6. 扩展运算符和 rest 参数

// 扩展运算符
let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// rest 参数
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}

7. Symbol 类型

const sym1 = Symbol('key');
const sym2 = Symbol('key');
console.log(sym1 === sym2); // false

8. Promise

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('成功'), 1000);
});

promise.then(value => console.log(value));

9. Set 和 Map

// Set
let set = new Set([1, 2, 3, 3]);
console.log(set.size); // 3

// Map
let map = new Map();
map.set('name', '张三');

10. Class 类

class Person {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() {
    console.log(`你好，我是${this.name}`);
  }
}

11. 模块化

// math.js
export function add(a, b) { return a + b; }

// app.js
import { add } from './math.js';

三、ES2016 新特性

1. Array.prototype.includes

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

2. 指数运算符

2 ** 3; // 8

四、ES2017 新特性

1. async/await

async function fetchData() {
  const response = await fetch('api/data');
  const data = await response.json();
  return data;
}

2. Object.values/Object.entries

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

五、ES2018 新特性

1. 对象 rest/spread

const obj = {a: 1, b: 2, c: 3};
const {a, ...rest} = obj; // rest = {b: 2, c: 3}
const newObj = {...obj, d: 4};

2. 正则表达式命名捕获组

const re = /(?<year>\d{4})-(?<month>\d{2})/;
const match = re.exec('2023-05');
match.groups.year; // "2023"

六、ES2019 新特性

1. Array.prototype.flat/flatMap

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

2. Object.fromEntries

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

七、ES2020 新特性

1. 可选链操作符

const street = user?.address?.street;

2. 空值合并运算符

const name = user.name ?? '匿名';

3. Promise.allSettled

Promise.allSettled([promise1, promise2])
  .then(results => console.log(results));

八、ES2021 新特性

1. String.prototype.replaceAll

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

2. 逻辑赋值运算符

a ||= b; // a = a || b
a &&= b; // a = a && b
a ??= b; // a = a ?? b

九、ES2022 新特性

1. 顶层 await

// 模块顶层可以直接使用 await
const response = await fetch('api/data');

2. 类静态块

class C {
  static {
    // 类初始化代码
  }
}

十、ES2023 新特性

1. Array.prototype.findLast/findLastIndex

[1, 2, 3, 2].findLast(x => x === 2); // 2

十一、ES2024 新特性

1. 原生数组分组

const groups = Object.groupBy(items, item => item.category);

2. Promise.withResolvers

const { promise, resolve, reject } = Promise.withResolvers();

总结

从 ES6 到 ES2024，JavaScript 语言经历了巨大的变革和发展。这些新特性极大地提升了开发效率、代码可读性和维护性。作为现代 JavaScript 开发者，掌握这些特性是必不可少的技能。建议在实际项目中逐步尝试使用这些新特性，同时注意浏览器和运行环境的兼容性问题。