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

【ECMAScript标准规范】

article 2024/12/25 1:56:30

ECMAScript 是一种定义脚本语言核心功能的标准，最常见的实现就是 JavaScript。随着 ECMAScript 标准的不断发展，JavaScript 也引入了许多新的特性，极大提高了开发效率和代码可读性

1. ECMAScript 5 (ES5)

ECMAScript 5（2009年）是一个非常重要的版本，它引入了许多现代 JavaScript 的核心特性。

1.1 严格模式 (`strict mode`)

严格模式通过 'use strict'; 声明启用，作用是禁止一些不安全的操作，减少错误的发生。

示例：严格模式

'use strict';

var obj = {};
obj.foo = 'bar';  // 没问题

foo = 'bar';  // 报错：变量未声明，严格模式下不允许隐式声明变量

1.2 `JSON` 对象

ES5 引入了 JSON 对象，提供了 parse() 和 stringify() 方法，用于处理 JSON 数据。

示例：`JSON.parse()` 和 `JSON.stringify()`

// JSON.stringify：将对象转换为 JSON 字符串
const obj = { name: 'Alice', age: 25 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // '{"name":"Alice","age":25}'

// JSON.parse：将 JSON 字符串转换为对象
const parsedObj = JSON.parse(jsonString);
console.log(parsedObj);  // { name: 'Alice', age: 25 }

1.3 `Array` 方法

ES5 增加了许多数组方法，帮助开发者更高效地操作数组。

示例：`forEach()`, `map()`, `filter()`

const arr = [1, 2, 3, 4, 5];

// forEach：遍历数组
arr.forEach(item => console.log(item));

// map：返回一个新数组，包含原数组中每个元素的平方
const squares = arr.map(x => x * x);
console.log(squares); // [1, 4, 9, 16, 25]

// filter：筛选出大于 3 的元素
const greaterThanThree = arr.filter(x => x > 3);
console.log(greaterThanThree); // [4, 5]

2. ECMAScript 6 (ES6) - 2015年

ECMAScript 6（也叫 ES2015 或 ES6）是 JavaScript 的一次重要升级，新增了大量语言特性，使得 JavaScript 更加现代化。

2.1 `let` 和 `const`

ES6 引入了 let 和 const 来替代 var，提供了块级作用域。

示例：`let` 和 `const`

// let：块级作用域
if (true) {
  let a = 10;
  console.log(a);  // 输出 10
}
// console.log(a);  // 报错：a is not defined

// const：声明常量，不可重新赋值
const b = 20;
b = 30;  // 报错：Assignment to constant variable.

2.2 箭头函数 (`=>`)

箭头函数简化了函数的语法，且 this 的绑定方式不同。

示例：箭头函数

// 普通函数
function sum(a, b) {
  return a + b;
}

// 箭头函数
const sumArrow = (a, b) => a + b;

console.log(sum(1, 2)); // 3
console.log(sumArrow(1, 2)); // 3

2.3 模板字符串（Template Literals）

模板字符串用反引号（`）包裹，可以嵌入变量或表达式。

示例：模板字符串

const name = 'Alice';
const age = 25;
const message = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message);  // "Hello, my name is Alice and I am 25 years old."

2.4 类（Classes）

ES6 引入了类的概念，使得面向对象编程变得更加简洁。

示例：类（Class）

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const alice = new Person('Alice', 25);
alice.greet();  // "Hello, my name is Alice."

2.5 `Promise`

Promise 是用于处理异步操作的新特性，能够使异步代码更加简洁和可读。

示例：`Promise`

const promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("Success!");
  } else {
    reject("Failure!");
  }
});

promise
  .then(result => console.log(result))  // "Success!"
  .catch(error => console.log(error));  // "Failure!"

3. ECMAScript 2017 (ES8)

ECMAScript 2017 引入了一些新的语言特性，最重要的两个特性是 async / await 和 Object.entries()。

3.1 `async` 和 `await`

async 和 await 用于简化异步操作，使得异步代码看起来像同步代码。

示例：`async` 和 `await`

// 异步函数
async function fetchData() {
  const data = await new Promise((resolve) => setTimeout(() => resolve("Data fetched!"), 1000));
  console.log(data);
}

fetchData();  // 输出 "Data fetched!" (1秒后)

3.2 `Object.entries()` 和 `Object.values()`

Object.entries() 返回一个对象的键值对数组，而 Object.values() 返回对象的值数组。

示例：`Object.entries()` 和 `Object.values()`

const person = { name: 'Alice', age: 25 };

// Object.entries：返回键值对数组
const entries = Object.entries(person);
console.log(entries);  // [['name', 'Alice'], ['age', 25]]

// Object.values：返回值数组
const values = Object.values(person);
console.log(values);  // ['Alice', 25]

4. ECMAScript 2019 (ES10)

ES10 引入了几个非常有用的新功能，如 Array.prototype.flat()、Array.prototype.flatMap() 和 Object.fromEntries()。

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

flat() 用于将嵌套的数组扁平化，而 flatMap() 首先对数组进行映射操作，然后扁平化。

示例：`flat()` 和 `flatMap()`

const arr = [1, [2, 3], [4, [5, 6]]];

// flat：将嵌套数组扁平化
console.log(arr.flat());  // [1, 2, 3, 4, [5, 6]]
console.log(arr.flat(2));  // [1, 2, 3, 4, 5, 6]

// flatMap：先映射再扁平化
const mappedArr = arr.flatMap(x => x);
console.log(mappedArr);  // [1, 2, 3, 4, [5, 6]]

4.2 `Object.fromEntries()`

Object.fromEntries() 将一个键值对的数组转换为对象。

示例：`Object.fromEntries()`

const entries = [['name', 'Alice'], ['age', 25]];
const obj = Object.fromEntries(entries);
console.log(obj);  // { name: 'Alice', age: 25 }

5. ECMAScript 2020 (ES11)

ES11 引入了几个重要的新特性，其中包括 BigInt 类型、Nullish Coalescing Operator (??) 和 Optional Chaining (?.)。

5.1 `BigInt`

BigInt 类型允许你表示大于 Number 类型的整数。

示例：`BigInt`

const bigIntNumber = 1234567890123456789012345678901234567890n;  // 后缀 n 表示 BigInt
console.log(bigIntNumber);  // 1234567890123456789012345678901234567890n

5.2 `Nullish Coalescing Operator (??)`

?? 用于判断 null 或 undefined，如果是，则返回默认值。

示例：`??`

const name = null;
const defaultName = name ?? "Default Name";
console.log(defaultName);  // "Default Name"

5.3 `Optional Chaining (?.)`

`?.

允许你在访问深层嵌套的对象属性时避免出现TypeError，如果某个属性为 null或undefined，则返回 undefined`。

示例：`?.`

const person = { name: 'Alice', address: { city: 'Wonderland' } };

// 安全访问深层属性
console.log(person.address?.city);  // "Wonderland"
console.log(person.contact?.phone);  // undefined