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

小小最近学习到了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 循环方式以及模块化的资料请关注我们其它相关文章!

(0)

相关推荐

  • JavaScript 模块化开发实例详解【seajs、requirejs库使用】

    本文实例讲述了JavaScript 模块化开发.分享给大家供大家参考,具体如下: JS开发的问题 冲突 依赖 JS引入的文件,产生依赖. 使用命名空间解决: 命名空间的弊端 调用的时候 名字比较长. 只能减低冲突,不能完全避免 SeaJs使用 引入sea.js的库 如何变成模块? define 如何调用模块? exports 和 seajs.use 如何依赖模块? require //html: <script src="js/sea.js" type="text/ja

  • 谈谈node.js中的模块系统

    Node.js 的模块 JavaScript 做为一门为网页添加交互功能的简单脚本语言问世,在诞生时并不包含模块系统,随着 JavaScript 解决问题越来越复杂,把所有代码写在一个文件内,用 function 区分功能单元已经不能支撑复杂应用开发了,ES6 带来了大部分高级语言都有的 class 和 module,方便开发者组织代码 import _ from 'lodash'; class Fun {} export default Fun; 上面三行代码展示了一个模块系统最重要的两个要素

  • Python json模块与jsonpath模块区别详解

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它使得人们很容易的进行阅读和编写.同时也方便了机器进行解析和生成.适用于进行数据交互的场景,比如网站前台与后台之间的数据交互. JSON和XML相比较可谓不相上下. Python 3.X中自带了JSON模块,直接import json就可以使用了. 官方文档:http://docs.python.org/library/json.html Json在线解析网站:http://www.json.cn/ JS

  • Node.js中文件系统fs模块的使用及常用接口

    fs是filesystem的缩写,该模块提供本地文件的读写能力,基本上是POSIX文件操作命令的简单包装.但是,这个模块几乎对所有操作提供异步和同步两种操作方式,供开发者选择. JavaScript 的是没有操作文件的能力,但是 Node 是可以做到的,Node 提供了操作文件系统模块,是 Node 中使用非常重要和高频的模块,是绝对要掌握的一个模块系统. fs 模块提供了非常多的接口,这里主要说一下一些常用的接口. 1.常用API快速复习 fs.stat 检测是文件还是目录 const fs

  • Node.js API详解之 dgram模块用法实例分析

    本文实例讲述了Node.js API详解之 dgram模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 dgram dgram模块提供了 UDP 数据包 socket 的实现. 使用以下方式引用: const dgram = require('dgram'); dgram.createSocket(options[, callback]) 说明: 创建一个 dgram.Socket 对象. 一旦创建了套接字,调用 socket.bind() 会指示套接字开始监听数据报消息

  • Python是怎样处理json模块的

    首先,了解下什么是JSON? JSON:JavaScript Object Notation [JavaScript 对象表示法] JSON 是一种轻量级的数据交换格式,完全独立于任何程序语言的文本格式.一般,后台应用程序将响应数据封装成JSON格式返回. JSON的基本语法如下:JSON名称/值对.JSON 数据的书写格式是:名称/值对.名称/值对包括字段名称(在双引号中),然后着是一个冒号(:),最后是值. JSON最常用的格式是对象的键值对:key只能是string, value可以是 o

  • 详解Node.JS模块 process

    process 模块是 nodejs 提供给开发者用来和当前进程交互的工具,它的提供了很多实用的 API.从文档出发,管中窥豹,进一步认识和学习 process 模块: 如何处理命令参数? 如何处理工作目录? 如何处理异常? 如何处理进程退出? process 的标准流对象 深入理解 process.nextTick 如何处理命令参数? 命令行参数指的是 2 个方面: 传给 node 的参数.例如 node --harmony script.js --version 中,--harmony 就是

  • 如何手动实现一个 JavaScript 模块执行器

    如果给你下面这样一个代码片段(动态获取的代码字符串),让你在前端动态引入这个模块并执行里面的函数,你会如何处理呢? module.exports = { name : 'ConardLi', action : function(){ console.log(this.name); } }; node 环境的执行 如果在 node 环境,我们可能会很快的想到使用 Module 模块, Module 模块中有一个私有函数 _compile,可以动态的加载一个模块: export function g

  • 通过实例了解Nodejs模块系统及require机制

    一.简介 Nodejs 有一个简单的模块加载系统.在 Nodejs 中,文件和模块是一一对应的(每个文件被视为一个独立的模块),这个文件可能是 JavaScript 代码,JSON 或编译过的C/C++ 扩展,例如: /** *foo.js *将这个js文件导出为模块 */ exports.hello = function() { console.log("hello Nodejs!"); } /** *main.js *main.js和foo.js在同一目录下 *在控制台中将会输出:

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

    小小最近学习到了js的几种循环方式,对这几种循环方式进行总结.以及对模块化的相关知识点进行总结, 循环方式 循环方式分为好几种循环方式,分别是for循环,forEach循环,map循环,for..in循环,for-of循环,jquery的循环. 小小将会依次对这几种循环方式进行介绍. 一般数组遍历循环 这里使用常用的数组遍历方式. 一般来说,常用的数组遍历如下 for (var index = 0; index < myArray.length; index++) { console.log(m

  • Java Map的几种循环方式总结

    根据JDK的新特性,用For循环Map,例如循环Map的Key Java代码 复制代码 代码如下: for(String dataKey : paraMap.keySet())    {        System.out.println(dataKey );               } 这里要注意的是,paraMap是怎么样定义的,如果是简单的Map paraMap = new HashMap();那前面的String就只能换成Object了. 对整Map的key和value都进行循环,如

  • 详解JavaScript中哪一种循环最快呢

    了解哪一种 for 循环或迭代器适合我们的需求,防止我们犯下一些影响应用性能的低级错误. JavaScript 是 Web 开发领域的"常青树".无论是 JavaScript 框架(如 Node.js.React.Angular.Vue 等),还是原生 JavaScript,都拥有非常庞大的粉丝基础.我们来谈谈现代 JavaScript 吧.循环一直是大多数编程语言的重要组成部分,而现代 JavaScript 为我们提供了许多迭代或循环值的方法. 但问题在于,我们是否真的知道哪种循环或

  • javascript中类的定义方式详解(四种方式)

    本文实例讲述了javascript中类的定义方式.分享给大家供大家参考,具体如下: 类的定义包括四种方式: 1.工厂方式 function createCar(name,color,price){ var tempcar=new Object; tempcar.name=name; tempcar.color=color; tempcar.price=price; tempcar.getName=function(){ document.write(this.name+"-----"+

  • JavaScript实现页面跳转的几种常用方式

    本文实例讲述了JavaScript实现页面跳转的几种常用方式.分享给大家供大家参考,具体如下: 第一种: <script language="javascript" type="text/javascript"> window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: <script language="j

  • Javascript编程中几种继承方式比较分析

    本文实例分析了Javascript编程中几种继承方式比较.分享给大家供大家参考,具体如下: 开篇 从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究

  • javascript url几种编码方式详解

    1. escape() 不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值.比如"春节"的返回结果是%u6625%u8282,escape()不对"+"编码主要用于汉子编码,现在已经不提倡使用了. 2. encodeURI()是javascript中真正用来对URL编码的函数.编码整个URL地址,但对特殊含义的符号";/?:@&=+$,#",也不进行编码.对应的解码函数是decodeURI(). 3. encodeU

  • 两种JavaScript的AES加密方式(可与Java相互加解密)

    由于JavaScript属于弱类型脚本语言,因此当其与强类型的后台语言进行数据交互时会产生各种问题,特别是加解密的操作.本人由于工作中遇到用js与Java进行相互加解密的问题,在网上查了很多资料及代码段,均无法解决.后总结多篇文档内容终于找到解决办法,现记录与此: 下面给大家介绍两种JavaScript的AES加密方式,具体详情如下所示: 第一种:加解密时需要秘钥(key)和秘钥偏移量(iv)的情况,在线验证地址:http://www.seacha.com/tools/aes.html //该方

  • JavaScript中的函数的两种定义方式和函数变量赋值

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /*I总结: 1.函数名可以做变量使用,可以赋值,可以传值 2.函数名当参数,传递给另一个函数 */ //===========

  • Javascript中的几种继承方式对比分析

    开篇 从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究过javascript的继承方式,故特撰此文以供交流. 为何需要利用javascript实现

随机推荐