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  THIS详解 面向对象
Mar 25 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
用js简单提供增删改查接口
May 12 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 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
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
python记录程序运行时间的三种方法
2017/07/14 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python导入模块交叉引用的方法
2019/01/19 Python
Python各种扩展名区别点整理
2020/02/27 Python
大数据分析用java还是Python
2020/07/06 Python
python 安装移动复制第三方库操作
2020/07/13 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
金士达面试非笔试
2012/03/14 面试题
小组名称和口号
2014/06/09 职场文书
大足石刻导游词
2015/02/02 职场文书
企业培训简报范文
2015/07/20 职场文书