js循环/迭代/遍历有多少方法
js循环/迭代/遍历有多少方法
JavaScript中存在着很多循环的方法
常见的有for,while,do while,for in等,
ES5中的forEach,
ES6的for of ,
jquery中封装的each
for
局限性很大,通过累加数组索引,来输出数组中的值。一般用来遍历数组,不能遍历对象,因为对象的长度是undefined,无法作为其循环的条件。
let person = {name1:"fur",
age:"1",hobbies:{study:"code",play:"games"}
}
let arr = ['fur','furfur','furfur-jiang']
console.log("遍历对象结果:")
console.log("person对象长度= "+person.length)
console.log("遍历数组结果:")
for(let i = 0 ; i < arr.length ; i++){console.log(arr[i])
}
for - 循环代码块一定的次数
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
for…in
for…in 循环将遍历对象的所有可枚举属性。不但可以循环遍历数组,还可以循环遍历对象。
for (let index in Object) {//
}
let person = {name1:"fur",
age:"1",hobbies:{study:"code",play:"games"}
}
let arr = ['fur','furfur','furfur-jiang']
//遍历对象
console.log("遍历对象结果:")
for (let i in person) {if(person[i] instanceof Object){for (let j in person[i]){console.log(person[i][j])}}else{console.log(person[i])}
}
//遍历数组
console.log("遍历数组结果:")
for (let i in arr) {console.log(arr[i])
}
forEach
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。可通过参数直接获取到值,其中item为该索引下的值,index为索引,arr为数组本身,参数名可改变,但是顺序不能改变。
注意:
forEach() 对于空数组是不会执行回调函数的。
不能遍历对象
array.forEach(function(item, index, arr), thisValue)
参数 | 描述 |
---|---|
currentValue | 必需。当前元素 |
index | 可选。当前元素的索引值。 |
arr | 可选。当前元素所属的数组对象。 |
let arr = ['fur','furfur','furfur-jiang']
//遍历数组
console.log("遍历数组结果:")
arr.forEach(function(item, index, arr){console.log(item)console.log(index)console.log(arr)
})
for of
for...of
语句创建一个循环来迭代可迭代的对象。ES6新增的方法,但是缺点是无法遍历自定义普通对象。
for...of
允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合),TypedArray,函数的 arguments 对象,NodeList 对象等可迭代的数据结构等。
语法
for (variable of iterable) {statement
}
- variable:每个迭代的属性值被分配给该变量。
- iterable:一个具有可枚举属性并且可以迭代的对象。
let arr = ['fur','furfur','furfur-jiang']
//遍历数组
console.log("遍历数组结果:")
for (let item of arr){console.log(item)
}
Set 和 Map 结构
Set 结构遍历时,返回的是一个值,而 Map 结构遍历时,返回的是一个数组,该数组的两个成员分别为当前 Map 成员的键名和键值。
let map = new Map()
map.set("name1","fur")
map.set("name2","furfur")
map.set("name3","furfur-jiang")// 也可以这样链式定义
//let map = new Map().set("name1","fur").set("name2","furfur").set("name3","furfur-jiang")console.log("Set结构遍历:")
for(let [key,value] of map) {console.log(key +'.'+ value)
}
console.log("Map结构遍历:")
for(let i of map){console.log(i)
}
each循环
jquery下的each方法有两种:
一种为$(’ ').each(),是搭配jq选择器遍历jquery对象获取页面元素的方法。
一种为$.each()循环方法,用于循环遍历数组、对象。
注意:用这个方法需要导入jq的包,each与forEach的item和index放置位置相反哦!
let person = {name1:"fur",
age:"1",hobbies:{study:"code",play:"games"}
}
let arr = ['fur','furfur','furfur-jiang']
//遍历对象
console.log("遍历对象结果:")
$.each(person,function(index,item){if(item instanceof Object){$.each(item,function(index,item){console.log(index+'.'+item)})}else{console.log(index+'.'+item)}
})
//遍历数组
console.log("遍历数组结果:")
$.each(arr,function(index,item){console.log(index+'.'+item)
})
码字不易,有用的话点个赞呀!谢谢
js循环/迭代/遍历有多少方法相关推荐
- JS中所有遍历的方法
JS中所有遍历的方法 1.for for(let i=0;i<len;i++){//do something} 2.forEach forEach 循环不支持return实例:let arr = ...
- [js] js循环中调用异步的方法,如何确保执行结果的顺序是正确的?
[js] js循环中调用异步的方法,如何确保执行结果的顺序是正确的? An example:let searchApi = function(arg){return new Promise((reso ...
- Map循环/迭代/遍历效率、性能问题。
项目开发完毕,为了找点事打发一下时间,于是用findBugs插件对当前完工的项目进行扫描,发现了很多问题.其中有个关于性能的问题,在这里记录一下. 提示信息为:Inefficient use of k ...
- js遍历数组 循环json数组 多种方法
JS数组的遍历方法有两种: 一:一般的for循环,例如: 1 2 3 4 var a = new Array("first", "second", " ...
- html js 循环取json数据,JS循环遍历JSON数据的方法
JS循环遍历JSON数据 本文提供了 JS 循环 JSON 数据列,以及 JS 循环遍历 JSON 数据的例子,供大家学习参考. 1. json数据的列循环 var len = json.length ...
- JS循环遍历中使用异步
参考:https://blog.csdn.net/qq_45265059/article/details/119892746 JS循环遍历中使用异步 对于同步顺序执行异步操作,并且每次异步操作都需要随 ...
- jquery 遍历java对象_jquery中object对象循环遍历的方法
一个朋友问对象如何转为数组,当我问他为啥要转得时候,他告诉我,数组可以用js循环遍历,而对象则不可以.其实呢,对象同样可以循环遍历的啊.不用转换也可以循环!说明你对js或者jquery的某些操作不是很 ...
- python 遍历可迭代对象的方法
python 遍历可迭代对象的方法 可迭代(iterable) 迭代(遍历)就是按照某种顺序逐个访问对象中的每一项. Python中有很多对象都是可以通过for语句来直接遍历的,例如list.stri ...
- js循环方法之 for forEach each map
前端开发 少不了使用 js循环. 循环方法太多了 ,选择一多就让选择困难症的人头疼 .用的最多的就是for和foreach ,但一直搞不懂就说为什么要用它而不用它 ,就查查资料总结记录下,希望以后再也 ...
最新文章
- ubuntun 下安装 node-v0.10.26
- 用命令来操作vSphere:十一 PowerCLI命令--虚拟机操作
- 交换机工作原理_交换机你了解它吗?它工作原理是这样的
- linq To Xml 用法简介
- 骨牌覆盖问题 KxM
- opencv:image-imageData+image-widthStep*i)[j]表达式含义
- talentcentral测评结果_人才测评报告
- 华为手机怎样恢复Android,华为手机恢复出厂设置的教程和方法
- MAC上编写汇编程序
- 机器人零力拖动技术路线
- 2017-2018-2 20179215《网络攻防实践》第八周作业
- 六、Rewrite重写
- MO call与MT call
- WIN7访问局域网内另外一台电脑的共享文件夹
- 示波器表笔旁边的夹子是什么_示波器探头的详细使用
- 数据分析有什么证书吗?多数小伙伴都认可CPDA
- delphi7 学习RAVE报表
- iptables使用详解
- 51单片机C语言code定义,51单片机数组的定义方法(code与data的作用)
- 基于随机森林算法的多因子选股方法分析与实现(1)
热门文章
- 基于springboot vue uniapp点餐外码系统源码(毕设)
- 长期激励应占“一席之地” 穆穆-movno1
- flex弹性盒子(伸缩盒模型)的使用
- 软考是什么?怎么准备----软考相关资讯
- 高等数学:第五章 定积分(4) 定积分的换元法
- 机器学习算法(二):决策树理论与python实现+经典应用(预测隐形眼镜类型)
- Python 头哥实验题目(一、二、三)
- 每日一句_《南柯子·池水凝新碧》
- git send-email 时unknown AUTH解决方法
- 苹果或将为iPhone 13全系配备LiDAR