JavaScript 几种循环方式以及模块化的总结


Posted in Javascript onSeptember 03, 2020

小小最近学习到了js的几种循环方式,对这几种循环方式进行总结。以及对模块化的相关知识点进行总结,

循环方式

循环方式分为好几种循环方式,分别是for循环,forEach循环,map循环,for..in循环,for…of循环,jquery的循环。

小小将会依次对这几种循环方式进行介绍。

一般数组遍历循环

这里使用常用的数组遍历方式。

一般来说,常用的数组遍历如下

for (var index = 0; index < myArray.length; index++) {
 console.log(myArray[index]);
}

这样就完成了常规的循环遍历。

在es5以后,添加了forEach,通过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

此时完成了对数组的遍历。

字符串

此时还可以遍历一个字符串

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

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
 console.log(value);
}
// 1
// 2
// 3

以上是基本的循环

模块化

对js的模块化进行介绍

以前,js文件在一个文件里,使用js的模块化,可以实现对多个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

等,几个变量。

使用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 循环方式以及模块化的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js replace正则表达式应用案例讲解
Jan 17 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 #Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 #Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 #Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 #Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 #Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 #Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 #Javascript
You might like
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
js图片处理示例代码
2014/05/12 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
jQuery事件用法详解
2016/10/06 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
Python 互换字典的键值对实例
2019/02/12 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
高中班长自我鉴定
2013/12/20 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
2015年母亲节寄语
2015/03/23 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS