JavaScript核心语法（5）
这篇文章讲一下ES6中的核心语法：扩展运算符和模块化。
目录
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 关键字来定义和导入模块，使得代码更加清晰和可维护。
基本概念
- 模块：一个模块是一个文件，文件内部的变量和函数默认处于模块作用域内，不会污染全局作用域。也就是说，不同模块中有相同名字的变量和函数，它们也是独立的，不会互相冲突。如果你想在一个文件中同时引入不同文件的变量a，可以通过导入时重命名来避免命名冲突。
- 导出：使用
export关键字将变量、函数或类导出，使其在其他模块中可用。 - 导入：使用
import关键字从其他模块中导入变量、函数或类。
原文地址：https://blog.csdn.net/qq_54432917/article/details/144028337
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！