现代 JavaScript 语法 (ES6+)，看这一篇就够了 – wiki基地

作者： /

现代 JavaScript 语法 (ES6+) 终极指南

ECMAScript 2015（简称 ES6）是 JavaScript 语言的一次革命性更新，它引入了大量新特性，极大地提升了代码的可读性、可维护性和开发效率。此后的每年，JavaScript 都会发布新版本，不断完善和增强这门语言。本指南将详细介绍自 ES6 以来的核心现代语法，帮助你全面掌握现代 JavaScript 的精髓。

1. 变量声明：let 和 const

在 ES6 之前，我们只有 var 来声明变量。var 存在变量提升（hoisting）和函数作用域的限制，容易导致意外的 bug。ES6 引入了 let 和 const，它们提供了块级作用域（block scope）。

  • let: 用于声明一个块级作用域的局部变量，其值可以被修改。
  • const: 用于声明一个块级作用域的只读常量。一旦声明，其值（对于原始类型）或引用（对于对象类型）不能被重新赋值。

块级作用域是指变量的生命周期仅限于其所在的 {} 代码块内。

“`javascript
// 使用 var
function varTest() {
var x = 1;
if (true) {
var x = 2; // 相同的变量，会覆盖
console.log(x); // 输出: 2
}
console.log(x); // 输出: 2
}

// 使用 let
function letTest() {
let x = 1;
if (true) {
let x = 2; // 不同的变量，只在 if 块内有效
console.log(x); // 输出: 2
}
console.log(x); // 输出: 1
}

// 使用 const
const PI = 3.14159;
// PI = 3; // 这会抛出一个 TypeError

const person = { name: ‘John’ };
person.name = ‘Doe’; // 这是允许的，因为我们修改的是对象的属性，而不是引用
// person = { name: ‘Jane’ }; // 这会抛出一个 TypeError
“`

最佳实践: 默认使用 const，只在需要重新赋值变量时才使用 let。尽量避免使用 var。

2. 箭头函数 (Arrow Functions)

箭头函数提供了一种更简洁的函数写法，并解决了传统函数中 this 关键字的指向问题。

特点:
– 语法更短。
– 没有自己的 this，它会捕获其所在上下文的 this 值。
– 不能用作构造函数（不能使用 new）。
– 没有 arguments 对象。

“`javascript
// 传统函数
function add(a, b) {
return a + b;
}

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

// 单参数可以省略括号
const square = x => x * x;

// 函数体多于一行时，需要使用 {}
const greet = name => {
const message = Hello, ${name}!;
return message;
};

// this 的对比
function Timer() {
this.seconds = 0;

// 传统函数需要 _this 或 bind 来保存 this
// setInterval(function() {
// this.seconds++; // this 指向 window 或 undefined
// }, 1000);

// 箭头函数自动捕获 Timer 实例的 this
setInterval(() => {
this.seconds++;
console.log(this.seconds);
}, 1000);
}

// const timer = new Timer();
“`

3. 模板字符串 (Template Literals)

模板字符串使用反引号 (`) 来定义字符串，它允许嵌入变量和多行文本。

特点:
– 支持通过 ${expression} 语法嵌入表达式。
– 支持多行字符串，不再需要 \n。

``javascript
const name = "World";
const greeting =Hello, ${name}!
This is a multi-line string.
The sum of 2 and 3 is ${2 + 3}.`;

console.log(greeting);
/
输出:
Hello, World!
This is a multi-line string.
The sum of 2 and 3 is 5.
/
“`

4. 函数默认参数 (Default Parameters)

现在可以为函数参数指定默认值，当调用函数时没有提供该参数或提供的值是 undefined 时，将使用默认值。

``javascript
function sayHello(name = 'Guest', greeting = 'Hello') {
console.log(${greeting}, ${name}!`);
}

sayHello(‘Alice’); // 输出: Hello, Alice!
sayHello(); // 输出: Hello, Guest!
sayHello(‘Bob’, ‘Hi’); // 输出: Hi, Bob!
“`

5. 解构赋值 (Destructuring Assignment)

解构赋值允许你从数组或对象中提取值，并赋给独立的变量。这使得代码更简洁、更易读。

数组解构:

“`javascript
const numbers = [1, 2, 3, 4, 5];
const [first, second, , fourth] = numbers;

console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(fourth); // 输出: 4
“`

对象解构:

“`javascript
const user = {
id: 1,
username: ‘testuser’,
email: ‘[email protected]’,
details: {
firstName: ‘Test’,
lastName: ‘User’
}
};

// 提取属性
const { username, email } = user;
console.log(username); // 输出: ‘testuser’

// 重命名变量
const { username: loginName, email: userEmail } = user;
console.log(loginName); // 输出: ‘testuser’

// 嵌套解构
const { details: { firstName } } = user;
console.log(firstName); // 输出: ‘Test’

// 用于函数参数
function displayUser({ username, email }) {
console.log(User: ${username}, Email: ${email});
}
displayUser(user); // 输出: User: testuser, Email: [email protected]
“`

6. 展开语法 (Spread Syntax) 和 剩余参数 (Rest Parameters)

... 语法根据其使用场景，既可以是展开语法，也可以是剩余参数。

展开语法 (...): 将一个可迭代对象（如数组、对象或字符串）“展开”到需要多个元素或属性的地方。

“`javascript
// 数组展开
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = […arr1, …arr2]; // [1, 2, 3, 4, 5, 6]

// 创建数组副本
const arr1Copy = […arr1];

// 对象展开 (ES2018)
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = { …obj1, …obj2 }; // { a: 1, b: 2, c: 3, d: 4 }
“`

剩余参数 (...): 在函数定义中，将不确定的参数个数收集到一个数组中。

“`javascript
function sum(…numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 输出: 6
console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

// 与解构结合
const [firstNum, …restOfNums] = [10, 20, 30, 40];
console.log(firstNum); // 10
console.log(restOfNums); // [20, 30, 40]
“`

7. ES 模块 (ES Modules: import / export)

ES6 引入了标准的模块系统，允许我们将代码分割到不同的文件中，并通过 import 和 export 进行导入和导出。

export: 导出模块中的功能（函数、对象或原始值）。

  • 命名导出 (Named Exports): 可以导出多个。
  • 默认导出 (Default Export): 每个模块只能有一个。

“`javascript
// file: utils.js

// 命名导出
export const PI = 3.14;
export function add(a, b) {
return a + b;
}

// 默认导出
export default function greet(name) {
return Hello, ${name};
}
“`

import: 导入其他模块导出的功能。

“`javascript
// file: main.js

// 导入默认导出和命名导出
import customGreet, { PI, add } from ‘./utils.js’;

// 导入所有命名导出到一个对象中
import * as utils from ‘./utils.js’;

console.log(PI); // 3.14
console.log(add(5, 10)); // 15
console.log(customGreet(‘Developer’)); // Hello, Developer

console.log(utils.PI); // 3.14
console.log(utils.default(‘World’)); // Hello, World
“`

8. 类 (Classes)

ES6 引入了 class 关键字，作为创建对象的模板。这只是一个语法糖，底层仍然是基于原型（prototype）的继承。

“`javascript
class Animal {
constructor(name) {
this.name = name;
}

speak() {
console.log(${this.name} makes a noise.);
}
}

class Dog extends Animal {
constructor(name, breed) {
super(name); // 调用父类的 constructor
this.breed = breed;
}

speak() {
console.log(${this.name} barks.);
}
}

const myDog = new Dog(‘Rex’, ‘German Shepherd’);
myDog.speak(); // 输出: Rex barks.
console.log(myDog.name); // 输出: Rex
“`

9. Promise 与 async/await

Promise 对象用于表示一个异步操作的最终完成（或失败）及其结果值。async/await 是建立在 Promise 之上的语法糖，让异步代码看起来像同步代码。

Promise:

“`javascript
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = { id: 1, message: “Data received” };
if (data) {
resolve(data); // 成功时调用
} else {
reject(“Error fetching data”); // 失败时调用
}
}, 1000);
});
}

fetchData()
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
“`

async/await (ES2017):

async 函数总是返回一个 Promise。await 关键字只能在 async 函数内部使用，它会暂停函数的执行，等待 Promise 被解决，然后返回其结果。

``javascript
async function processData() {
try {
console.log("Fetching data...");
const data = await fetchData(); // 等待 Promise 完成
console.log("Processing data:", data);
returnProcessed: ${data.message}`;
} catch (error) {
console.error(“Failed to process data:”, error);
}
}

processData().then(result => console.log(result));
``async/await` 极大地简化了复杂的异步逻辑，避免了“回调地狱”（Callback Hell）。

10. 新的数据结构：Map 和 Set

Set: 成员值都是唯一的集合。它类似于数组，但其成员不能重复。

“`javascript
const mySet = new Set();
mySet.add(1);
mySet.add(5);
mySet.add(5); // 重复的值会被忽略
mySet.add(“some text”);

console.log(mySet); // Set(3) { 1, 5, ‘some text’ }
console.log(mySet.has(1)); // true

// 从数组创建 Set 以去除重复项
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = […new Set(numbers)]; // [1, 2, 3, 4, 5]
“`

Map: 键值对的集合，其中键可以是任何类型的值（包括对象）。

“`javascript
const myMap = new Map();
const keyObject = { id: 1 };

myMap.set(‘a string’, ‘value for a string’);
myMap.set(keyObject, ‘value for an object’);
myMap.set(1, ‘value for a number’);

console.log(myMap.get(keyObject)); // ‘value for an object’
console.log(myMap.size); // 3
“`

11. 其他重要特性

  • For…of 循环: 提供了一种更简洁的方式来遍历可迭代对象（如 Array, Map, Set, String 等）。
    javascript
    const fruits = ['apple', 'banana', 'cherry'];
    for (const fruit of fruits) {
    console.log(fruit);
    }

  • 可选链操作符 (?.) (ES2020): 在尝试访问对象的深层属性之前，无需显式地验证每个引用是否为 null 或 undefined。
    javascript
    const user = {
    // profile: {
    // name: 'John'
    // }
    };
    const userName = user?.profile?.name; // 不会抛出错误，userName 为 undefined
    console.log(userName);

  • 空值合并操作符 (??) (ES2020): 当左侧操作数为 null 或 undefined 时，返回右侧的操作数，否则返回左侧的操作数。这对于提供默认值非常有用。
    “`javascript
    const volume = null;
    const currentVolume = volume ?? 50; // currentVolume is 50

    const count = 0;
    const currentCount = count ?? 10; // currentCount is 0 (因为 0 不是 null 或 undefined)
    “`

结论

现代 JavaScript (ES6+) 提供了大量强大的工具和语法，使得代码更加简洁、健壮和易于维护。熟练掌握这些特性是每一位现代前端和后端 JavaScript 开发者的必备技能。从块级作用域、箭头函数到 async/await，这些改进共同构建了一个更优雅、更强大的编程语言。现在就开始在你的项目中使用它们吧！

滚动至顶部