循环遍历数组或者对象,for、forEach、for in 、 for of 使用最多

for循环

自Javascript诞生时就有,遍历数组,for 循环的语法如下:

for (语句 1; 语句 2; 语句 3) {

要执行的代码块

}

举例说明

var arr = [1,2,3,4]

for(var i = 0 ; i< arr.length ; i++){

console.log(arr[i]); // 1 2 3 4 (输出结果)

}

forEach循环

从ES5开始 Javascript内置了forEach方法 遍历数组

let arr = ['a', 'b', 'c', 'd']

arr.forEach(function (val, idx, arr) {

console.log(val + ', index = ' + idx) // val是当前元素,index当前元素索引,arr数组

console.log(arr)

})

输出结果

a, index = 0

(4) ["a", "b", "c", "d"]

b, index = 1

(4) ["a", "b", "c", "d"]

c, index = 2

(4) ["a", "b", "c", "d"]

d, index = 3

(4) ["a", "b", "c", "d"]

写法简单了很多,但是也存在一个局限 就是你不能中断循环(使用break语句或使用return语句)。

for in循环

for-in循环实际是为循环”enumerable“对象而设计的

let obj = {a: '1', b: '2', c: '3', d: '4'}

for (let o in obj) {

console.log(o) //遍历的实际上是对象的属性名称 a,b,c,d

console.log(obj[o]) //这个才是属性对应的值1,2,3,4

}

for - in 也可用来循环数组,但一般并不推荐

for of循环

它是ES6中新增加的语法

循环一个数组

let arr = ['China', 'America', 'Korea']

for (let o of arr) {

console.log(o) //China, America, Korea

}

但是它并不能循环一个普通对象

let obj = {a: '1', b: '2', c: '3', d: '4'}

for (let o of obj) {

console.log(o) //Uncaught TypeError: obj[Symbol.iterator] is not a function

}

但是可以循环一个拥有enumerable属性的对象。

如果我们按对象所拥有的属性进行循环,可使用内置的Object.keys()方法

let obj = {a: '1', b: '2', c: '3', d: '4'}

for (let o of Object.keys(obj)) {

console.log(o) // a,b,c,d

}

如果我们按对象所拥有的属性值进行循环,可使用内置的Object.values()方法

let obj = {a: '1', b: '2', c: '3', d: '4'}

for (let o of Object.values(obj)) {

console.log(o) // 1,2,3,4

}

循环一个字符串

let str = 'love'

for (let o of str) {

console.log(o) // l,o,v,e

}

循环一个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

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

for (let value of iterable) {

console.log(value);

}

// 1

// 2

// 3

循环一个类型化数组

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {

console.log(value);

}

// 0

// 255

for、forEach、for in、for of用法的更多相关文章

  1. JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别

    JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别  :https://blog.csdn.net/hyupeng1006/a ...

  2. MyBatis从入门到精通(第4章):MyBatis动态SQL【foreach、bind、OGNL用法】

    (第4章):MyBatis动态SQL[foreach.bind.OGNL用法] 4.4 foreach 用法 SQL 语句中有时会使用 IN 关键字,例如 id in (1,2,3).可以使用 ${i ...

  3. c:forEach 标签中varStatus的用法

    c:forEach varStatus属性 current 当前这次迭代的(集合中的)项index  当前这次迭代从 0 开始的迭代索引count  当前这次迭代从 1 开始的迭代计数first 用来 ...

  4. JS中的 map, filter, some, every, forEach, for...in, for...of 用法总结

    1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let list = [1, 2, 3, 4, 5]; let other = list.map((d, i) => { ...

  5. mybatis 中 foreach collection的三种用法

    foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach元素的属性主要有 item,index,collection,open,separator,close. ...

  6. [转载]JS中 map, filter, some, every, forEach, for in, for of 用法总结

    转载地址:http://codebay.cn/post/2110.html 1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let list = [1, 2, 3, 4, 5] ...

  7. mybatis 中 foreach collection的三种用法(转)

    文章转自 https://blog.csdn.net/qq_24084925/article/details/53790287 oreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集 ...

  8. JS中 map, filter, some, every, forEach, for in, for of 用法总结

    本文转载自:http://blog.csdn.net/gis_swb/article/details/52297343 1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let ...

  9. JSP中forEach和forTokens循环的用法

    <%@page import="java.util.*"%> <%@ page language="java" contentType=&qu ...

  10. PHP中使用foreach时加&符号的用法

    foreach时加&符号:遍历的同时改变原数组即修改数据或者增加数据. $arr = ['a', 'b', 'c']; foreach ($arr as $key => &$va ...

随机推荐

  1. 闲置安卓设备搭建Linux服务器实现外网访问

    title: 闲置安卓设备搭建Linux服务器实现外网访问 这是我搭过的第一个博客系统,写贴纪念一下 待博主整理好思路,将今天所用到的全部分享! 好吧,我就是穷.富人靠科技,穷人靠变异.我这种穷人是真 ...

  2. MYSQL隔离级别 与 锁

    1.四种隔离级别下数据不一致的情况   脏读 不可重复读 幻读 RU 是 是 是 RC(快照读) 否 是 是 RC(当前读) 否 否 是 RR(快照读) 否 否 是 RR(当前读) 否 否 否 Ser ...

  3. 更新mac系统到10.15后,virtual box虚拟机无法打开

    更新mac系统到10.15后,virtual box虚拟机无法打开: 尝试解决方案1:下载最新版的virtual box重新安装后,启动成功. 虽然很乌龙,但是下次再也不随便升级系统了,太坑爹了

  4. 配置IIS5.5/6.0 支持 Silverlight

    在安装完Silverlight1.1 Alpha后,要使自己的IIS服务器支持Silverlight的浏览还需要配置一下IIS网站的 Http头->MIME映射添加内容如下:扩展名        ...

  5. python- 函数高级

    函数高级 一.默认参数 1.默认参数概念 默认参数指函数/方法在定义时为形参赋值,对应的形参称为默认参数. 默认参数是一个参数定义期的概念,与调用无关. 2.默认参数的作用 如果参数定义默认参数,在调 ...

  6. 父级元素绑定定mouseout和mouseover,移过子元素是都会触发

    2019独角兽企业重金招聘Python工程师标准>>> mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标 ...

  7. 跟风微信小程序,生鲜水果店如何借力小程序每天多赚2万块?

    公司旁边的水果店,虽然是一家实体店,但老板有一颗爱玩互联网的心. 老板非常重视线上的营销推广,什么新的线上推广方式都爱尝试一下.公众号大热时做了自己的微信公众号,并且有自己的微信商城,不过线上的销售一 ...

  8. pomelo安装笔记

    npm install -dnpm config set registry https://registry.npm.taobao.orgnpm install pomelo -gpomelo lis ...

  9. 状态压缩DP(大佬写的很好,转来看)

    奉上大佬博客 https://blog.csdn.net/accry/article/details/6607703 动态规划本来就很抽象,状态的设定和状态的转移都不好把握,而状态压缩的动态规划解决的 ...

  10. 简单模拟实现Rxjs Observable

    1.先定义类型 export type Observer = { next: (any) => void, complete?: (any) => void, } export inter ...