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 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
javascript cookies操作集合
Apr 12 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
javascript基本语法分析说明
2008/06/15 Javascript
javascript数组去掉重复
2011/05/12 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
提高python代码运行效率的一些建议
2020/09/29 Python
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
劳动之星获奖感言
2014/02/01 职场文书
餐厅总厨求职信
2014/03/04 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js