JavaScript核心语法（5）

这篇文章讲一下ES6中的核心语法：扩展运算符和模块化。

目录

1.扩展运算符

数组中的扩展运算符

基本用法

合并数组

对象中的扩展运算符

基本用法

合并对象

与解构赋值结合使用

数组解构中的剩余元素

对象解构中的剩余属性

2.模块化

基本概念

---

1.扩展运算符

扩展运算符是 ES6 引入的一种语法，使用三个点（...）表示。它可以在数组和对象中展开元素或属性，提供了一种简洁的方式来操作数据结构。

数组中的扩展运算符

扩展运算符可以用来将一个数组展开成另一个数组的元素。

基本用法

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // 输出 [1, 2, 3, 4, 5, 6]

合并数组

你可以使用扩展运算符合并多个数组：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];
console.log(merged); // 输出 [1, 2, 3, 4, 5, 6]

对象中的扩展运算符

在对象字面量中，扩展运算符可以用来展开对象的属性。

基本用法

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // 输出 { a: 1, b: 2, c: 3 }

合并对象

你可以使用扩展运算符合并多个对象：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // 输出 { a: 1, b: 3, c: 4 }

注意：在对象合并中，如果有重复的属性名，后面的属性会覆盖前面的属性。

与解构赋值结合使用

扩展运算符可以与解构赋值结合使用，以提取对象或数组中的部分元素或属性。

数组解构中的剩余元素

const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 输出 1
console.log(rest);  // 输出 [2, 3, 4]

对象解构中的剩余属性

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

2.模块化

ES6 模块化是指，通过使用 import 和 export 关键字来定义和导入模块，使得代码更加清晰和可维护。

基本概念

1. 模块：一个模块是一个文件，文件内部的变量和函数默认处于模块作用域内，不会污染全局作用域。也就是说，不同模块中有相同名字的变量和函数，它们也是独立的，不会互相冲突。如果你想在一个文件中同时引入不同文件的变量a，可以通过导入时重命名来避免命名冲突。
2. 导出：使用 export 关键字将变量、函数或类导出，使其在其他模块中可用。
3. 导入：使用 import 关键字从其他模块中导入变量、函数或类。