从 ES5 到 ES14：深入解析 JavaScript 的演进与特性

标签：ES5 const log JavaScript name ECMAScript console prototype ES14

文章目录

• 前言
• 一、ES5（ECMAScript 2009）
• • 1. 严格模式 ('use strict')
  • 2. Object.defineProperty
  • 3. Array.isArray
  • 4. forEach, map, filter, reduce
• 二、ES6（ECMAScript 2015）
• • 1. let 和 const
  • 2. 箭头函数
  • 3. 模板字符串
  • 4. 解构赋值
  • 5. class 和 extends
  • 6. 模块 (import 和 export)
• 三、ES7（ECMAScript 2016）
• • 1. 幂运算符 (**)
  • 2. Array.prototype.includes
• 四、ES8（ECMAScript 2017）
• • 1. 异步函数 (async/await)
  • 2. 异步函数 (async/await)
• 五、ES9（ECMAScript 2018）
• • 1. 剩余参数和展开运算符（对象）
  • 2. Promise.prototype.finally
• 六、ES10（ECMAScript 2019）
• • 1. Array.prototype.flat 和 flatMap
  • 2. Object.fromEntries
• 七、ES11（ECMAScript 2020）
• • 1. 可选链操作符 (?.)
  • 2. Nullish Coalescing Operator (??)
• 八、ES12（ECMAScript 2021）
• • 1. String.prototype.replaceAll
• 九、ES13（ECMAScript 2022）
• • 1. Array.prototype.at
• 十、ES14（ECMAScript 2023）
• • 1. Array.prototype.findLast 和 findLastIndex
• 总结

---

前言

JavaScript 是前端开发的核心语言，自从它在 1995 年诞生以来，已经发生了多次重要更新。每一版的 ECMAScript（ES）规范都带来了新的语言特性，从而让开发者能够编写更加简洁、优雅和高效的代码。本文将详细介绍从 ES5 到 ES14 的关键特性，结合代码示例，让你清晰理解 JavaScript 的演进历程。

---

一、ES5（ECMAScript 2009）

1. 严格模式 (‘use strict’)

ES5 引入了严格模式，通过 ‘use strict’ 开启，使代码在执行时对错误更加敏感，提高代码的安全性和效率。

'use strict';
x = 10; // ReferenceError: x is not defined

2. Object.defineProperty

允许开发者为对象定义新的属性或修改现有属性的行为，特别是控制可枚举性、可写性和可配置性。

const obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: false, // 不能修改
});
obj.name = 'Jane'; // 无效
console.log(obj.name); // John

3. Array.isArray

ES5 提供了内置方法来检查对象是否为数组。

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({})); // false

4. forEach, map, filter, reduce

ES5 为数组新增了一系列操作方法，如遍历、映射、过滤和归约。

const arr = [1, 2, 3, 4];
const doubled = arr.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

二、ES6（ECMAScript 2015）

ES6 是 JavaScript 发展史上最具影响力的版本，引入了众多革命性的新特性。

1. let 和 const

ES6 引入了块级作用域变量声明 (let) 和常量声明 (const)，避免了使用 var 时的全局污染问题。

let x = 10;
const y = 20;
x = 15; // 可以修改
y = 25; // TypeError: Assignment to constant variable.

2. 箭头函数

箭头函数引入了更简洁的语法，并且自动绑定 this 到外层上下文。

const sum = (a, b) => a + b;
console.log(sum(5, 3)); // 8

3. 模板字符串

通过反引号（`）定义模板字符串，可以在字符串中内嵌表达式。

const name = 'John';
console.log(`Hello, ${name}!`); // Hello, John!

4. 解构赋值

解构赋值允许从数组或对象中提取值，并直接赋值给变量。

const [a, b] = [1, 2];
const { name, age } = { name: 'John', age: 30 };
console.log(a, b); // 1, 2
console.log(name, age); // John, 30

5. class 和 extends

ES6 引入了类的语法糖，使面向对象编程更加直观。

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

  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying.`);
  }
}

6. 模块 (import 和 export)

ES6 引入了模块化的机制，使代码的分离和管理更加容易。

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math.js';
console.log(add(5, 3)); // 8

三、ES7（ECMAScript 2016）

1. 幂运算符 (**)

ES7 引入了幂运算符，用来替代 Math.pow 方法。

console.log(2 ** 3); // 8

2. Array.prototype.includes

用于检查数组中是否包含某个值，替代 indexOf 的繁琐用法。

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

四、ES8（ECMAScript 2017）

1. 异步函数 (async/await)

异步函数提供了更直观的方式来处理异步操作，基于 Promise。

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

2. 异步函数 (async/await)

Object.entries 返回对象的键值对数组，Object.values 返回对象的值数组。

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

五、ES9（ECMAScript 2018）

1. 剩余参数和展开运算符（对象）

在 ES9 中，剩余参数和展开运算符得到了扩展，支持对象。

const { a, ...rest } = { a: 1, b: 2, c: 3 };
console.log(rest); // { b: 2, c: 3 }

2. Promise.prototype.finally

为 Promise 增加了 finally 方法，在 Promise 完成（无论成功还是失败）后执行指定的操作。

fetch('https://api.example.com')
  .then(response => response.json())
  .catch(err => console.error(err))
  .finally(() => console.log('请求结束'));

六、ES10（ECMAScript 2019）

1. Array.prototype.flat 和 flatMap

flat 用于将嵌套数组展开，flatMap 先映射再展开。

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

2. Object.fromEntries

将键值对数组转换为对象。

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

七、ES11（ECMAScript 2020）

1. 可选链操作符 (?.)

可选链操作符可以防止出现 undefined 或 null 的错误。

const person = { name: 'John', address: null };
console.log(person.address?.city); // undefined

2. Nullish Coalescing Operator (??)

?? 操作符用于处理 null 或 undefined 的情况。

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

八、ES12（ECMAScript 2021）

1. String.prototype.replaceAll

用于替换字符串中的所有匹配项。

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

九、ES13（ECMAScript 2022）

1. Array.prototype.at

at 方法允许我们通过正负索引来访问数组中的元素。

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

十、ES14（ECMAScript 2023）

1. Array.prototype.findLast 和 findLastIndex

用于从后往前遍历数组。

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

总结

从 ES5 到 ES14，JavaScript 语言经历了巨大的演变，每个版本都为开发者提供了更简洁、更高效的工具来解决实际问题。从 let、const、模板字符串到 async/await从 ES5 到 ES15，JavaScript 经过了十多年的演变，逐步引入了众多关键特性，极大地提升了开发效率和代码的可维护性。本文将详细介绍从 ES5 到 ES14 的所有重要特性，并通过代码示例说明每个版本的变化，帮助开发者更好地理解和应用这些特性。

标签：ES5,const,log,JavaScript,name,ECMAScript,console,prototype,ES14
From： https://blog.csdn.net/qq_40791475/article/details/142598896