ECMAScript 是一种定义脚本语言核心功能的标准,最常见的实现就是 JavaScript。随着 ECMAScript 标准的不断发展,JavaScript 也引入了许多新的特性,极大提高了开发效率和代码可读性
1. ECMAScript 5 (ES5)
ECMAScript 5(2009年)是一个非常重要的版本,它引入了许多现代 JavaScript 的核心特性。
1.1 严格模式 (strict mode
)
严格模式通过 'use strict';
声明启用,作用是禁止一些不安全的操作,减少错误的发生。
示例:严格模式
javascript
'use strict';
var obj = {};
obj.foo = 'bar'; // 没问题
foo = 'bar'; // 报错:变量未声明,严格模式下不允许隐式声明变量
1.2 JSON
对象
ES5 引入了 JSON
对象,提供了 parse()
和 stringify()
方法,用于处理 JSON 数据。
示例:JSON.parse()
和 JSON.stringify()
javascript
// 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()
javascript
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
javascript
// 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
的绑定方式不同。
示例:箭头函数
javascript
// 普通函数
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)
模板字符串用反引号(`````)包裹,可以嵌入变量或表达式。
示例:模板字符串
javascript
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)
javascript
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
javascript
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
javascript
// 异步函数
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()
javascript
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()
javascript
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()
javascript
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
javascript
const bigIntNumber = 1234567890123456789012345678901234567890n; // 后缀 n 表示 BigInt
console.log(bigIntNumber); // 1234567890123456789012345678901234567890n
5.2 Nullish Coalescing Operator (??)
??
用于判断 null
或 undefined
,如果是,则返回默认值。
示例:??
javascript
const name = null;
const defaultName = name ?? "Default Name";
console.log(defaultName); // "Default Name"
5.3 Optional Chaining (?.)
`?.
允许你在访问深层嵌套的对象属性时避免出现
TypeError,如果某个属性为
null或
undefined,则返回
undefined`。
示例:?.
javascript
const person = { name: 'Alice', address: { city: 'Wonderland' } };
// 安全访问深层属性
console.log(person.address?.city); // "Wonderland"
console.log(person.contact?.phone); // undefined