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 相关文章推荐
JavaScript 全角转半角部分
Oct 28 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
分类解析jQuery选择器
Nov 23 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 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
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
javascript静态的url如何传递
2007/05/03 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
使用js画图之画切线
2015/01/12 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
python机器学习之神经网络实现
2018/10/13 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
联强国际笔试题面试题
2013/07/10 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
学校火灾防控方案
2014/06/09 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
财务务虚会发言材料
2014/10/20 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
写给老婆的保证书
2015/02/27 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android