JavaScript 循环遍历与 ES6 模块化详解
本文系统总结JavaScript中常见的循环遍历方式，包括for、forEach、map、for-in及for-of，并重点解析ES6模块化机制。通过对比各循环方法的特性与限制，详细讲解export与import的使用，涵盖默认导出、命名导出及as重命名语法，帮助开发者理解JS工程化中的代码分离与复用。
本文旨在梳理JavaScript中几种主要的循环遍历方式，并对模块化相关知识点进行归纳总结。
JavaScript 循环遍历方式
循环方式
JavaScript中的循环方式多样，主要包括for循环、forEach循环、map循环、for...in循环、for…of循环以及jQuery提供的循环方法。
接下来将逐一介绍上述几种循环方式的具体用法。
一般数组遍历循环
此处展示常用的数组遍历实现方式。
通常，基础的数组遍历代码如下所示：
for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}通过上述代码即可完成常规的数组循环遍历。
在ES5标准之后，引入了forEach方法，可用于数组的循环遍历。
myArray.forEach(function (value) {
console.log(value);
});利用forEach函数，可以便捷地实现数组元素的遍历操作。
缺点：该方法存在一个显著限制，即无法中断循环，不能使用break或return语句提前退出。
for-in 循环遍历
for-in循环主要用于遍历对象属性，示例如下：
var obj = {a:1, b:2, c:3};执行上述代码后的循环结果如下：
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
// 输出:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"若需遍历数组，可采用如下方式（但不推荐）：
for (var index in myArray) { // 不推荐这样
console.log(myArray[index]);
}for-of 循环
数组
for-of循环支持遍历数组等可迭代对象。
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30此时已成功完成对数组的遍历操作。
字符串
此外，for-of同样可用于遍历字符串。
let iterable = "boo";
for (let value of iterable) {
console.log(value);
}
// "b"
// "o"
// "o"循环一个Map
该循环方式也适用于遍历Map对象。
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3
for (let entry of iterable) {
console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]循环一个set
同时，Set对象也可以通过for-of进行遍历。
let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3以上即为基本的循环遍历方式介绍。
ES6 模块化机制
模块化
下面对JavaScript的模块化机制进行介绍。
早期JavaScript代码通常集中在一文件中，引入模块化后，可将多个JS文件分离，从而实现工程化管理。
此处重点介绍最常用的ES6模块化标准。
export 与 import
本节主要讲解export和import这两个核心命令。
具体文件结构如下：
/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass = class myClass {
static a = "yeah!";
}
export { myName, myAge, myfn, myClass }
/*-----import [xxx.js]-----*/
import { myName, myAge, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!这里涉及两个文件，分别为test.js和xxx.js。在test.js中定义了几个变量并执行导出操作。
myName, myAge, myfn, myClass
等变量。
在xxx.js中使用import命令导入上述变量，使其进入当前命名空间，并通过console.log进行读取。
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!as
as关键字用于实现导入时的重命名，允许在导入过程中更改变量名。
import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";
console.log(name1);// Tom
console.log(name2);// Jerry以上即为基本的导入和导出操作示例。
以上就是JavaScript 几种循环方式以及模块化的总结的详细内容，更多关于JavaScript 循环方式以及模块化的资料请关注本站其它相关文章！
React中怎么不可变地删除JS数组元素
2026-11-05 18:06:01
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43