Ecmascript(ES)标准
ECMAScript(通常简称为 ES)是一种标准化的脚本语言,由 Ecma International 通过 ECMA-262 标准定义。ECMAScript 是 JavaScript 的规范版本,几乎所有的现代浏览器和许多服务器端环境(如 Node.js)都支持 ECMAScript。
ECMAScript 的历史
- ES1 (1997):首个版本,奠定了 JavaScript 的基础。
- ES2 (1998):对 ES1 的小修正。
- ES3 (1999):增加了正则表达式、错误处理等特性。
- ES4 (未发布):计划引入许多新特性,但由于过于激进,最终没有发布。
- ES5 (2009):增加了严格模式、JSON 支持、数组和对象的新方法等。
- ES6 / ES2015 (2015):引入了许多重要特性,如模块、类、箭头函数、解构赋值、模板字符串等。
- ES2016 (2016) :增加了
Array.prototype.includes
和指数运算符**
。 - ES2017 (2017):增加了异步函数、共享内存和原子操作等。
- ES2018 (2018):增加了异步迭代、正则表达式改进、REST 参数和展开运算符等。
- ES2019 (2019) :增加了
flat
和flatMap
方法、Object.fromEntries
、可选的 catch 绑定等。 - ES2020 (2020) :增加了
BigInt
、Promise.allSettled
、空值合并运算符??
等。 - ES2021 (2021) :增加了逻辑赋值运算符、
String.prototype.replaceAll
等。 - ES2022 (2022) :增加了类的私有属性、顶级
await
、错误原因等。 - ES2023 (2023) :增加了
Array.findLast
和Array.findLastIndex
、Intl.NumberFormat
的新选项等。
主要特性
1. 基础类型和结构
原始类型
- Number:表示数值,包括整数和浮点数。
- String:表示文本。
- Boolean :表示真(
true
)或假(false
)。 - Null:表示空值。
- Undefined:表示未定义的值。
- Symbol:表示唯一标识符,常用于对象属性键。
- BigInt:表示任意大小的整数。
复合类型
- Object:用于存储键值对。
- Array:用于存储有序的数据集合。
- Function:用于定义可执行的代码块。
2. 函数
箭头函数
箭头函数提供了一种更简洁的函数定义方式,并且在函数体内使用 this
时不会绑定新的 this
值。
const add = (a, b) => a + b;
console.log(add(1, 2)); // 输出 3
默认参数
允许在函数定义时为参数指定默认值。
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
greet(); // 输出 Hello, Guest!
greet('Alice'); // 输出 Hello, Alice!
剩余参数
允许将不定数量的参数收集到一个数组中。
function sum(...args) {
return args.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出 10
3. 对象
解构赋值
可以从对象或数组中提取数据并赋值给变量。
const person = { name: 'Alice', age: 30 };
const { name, age } = person;
console.log(name); // 输出 Alice
console.log(age); // 输出 30
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 输出 1 2 3
扩展运算符
可以用来合并对象或数组。
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // 输出 { a: 1, b: 2, c: 3 }
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // 输出 [1, 2, 3, 4]
4. 类
类定义
类是面向对象编程的重要组成部分,用于定义对象的结构和行为。
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
}
const alice = new Person('Alice');
alice.greet(); // 输出 Hello, my name is Alice.
静态方法
静态方法属于类本身,而不是类的实例。
class MathUtils {
static add(a, b) {
return a + b;
}
}
console.log(MathUtils.add(1, 2)); // 输出 3
私有属性和方法
私有属性和方法只能在类的内部访问。
class Counter {
#count = 0;
increment() {
this.#count++;
}
getCount() {
return this.#count;
}
}
const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 输出 1
5. 模块
导入导出
模块化开发有助于组织和管理代码。
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// main.js
import { add, subtract } from './math.js';
console.log(add(1, 2)); // 输出 3
console.log(subtract(5, 3)); // 输出 2
6. 异步编程
Promise
Promise 是处理异步操作的一种方式,可以更好地管理回调地狱。
const fetchData = url => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ data: 'Fetched data' });
}, 1000);
});
};
fetchData('https://example.com')
.then(data => console.log(data))
.catch(error => console.error(error));
async/await
async/await 是基于 Promise 的语法糖,使异步代码看起来更像同步代码。
const fetchData = async url => {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
};
fetchData('https://example.com')
.then(data => console.log(data))
.catch(error => console.error(error));
7. 其他特性
模板字符串
模板字符串允许在字符串中嵌入表达式。
const name = 'Alice';
const message = `Hello, ${name}!`;
console.log(message); // 输出 Hello, Alice!
迭代器和生成器
迭代器和生成器提供了处理数据流的新方式。
function* generateSequence() {
yield 1;
yield 2;
yield 3;
}
const generator = generateSequence();
console.log(generator.next().value); // 输出 1
console.log(generator.next().value); // 输出 2
console.log(generator.next().value); // 输出 3
代理和反射
代理和反射提供了拦截和控制对象操作的能力。
const handler = {
get(target, prop) {
return target[prop];
},
set(target, prop, value) {
target[prop] = value;
}
};
const target = { a: 1 };
const proxy = new Proxy(target, handler);
console.log(proxy.a); // 输出 1
proxy.a = 2;
console.log(proxy.a); // 输出 2
资源和工具
- 官方规范:https://tc39.es/ecma262/
- Babel:将新版本的 JavaScript 转换为向后兼容的代码,以便在旧环境中运行。
- MDN Web 文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript
- ECMAScript 提案:https://github.com/tc39/proposals
希望这些详细的解释能帮助您更好地理解和使用 ECMAScript。