数组与对象、字符串遍历方法大全

AlgoRover
• 阅读 3530

当我们需要遍历一个数组时,第一个想到的就是for,然后用length去判断条件,之后++,但着似乎有些过于老套了。本文主要收集各种遍历方法,主要针对数组,也会有关于对象、字符串的,看完它,你会对遍历有一个新的认识。

数组与对象、字符串遍历方法大全

params

const ArrayList = [
  {name: '张三', age: 18},
  {name: '李四', age: 20}
]
const ObjectParams = {
  name: '孙晓萌',
  age: '19'
}
const StringParams = '女帝'

基础for循环

最传统的for{.....}

// 遍历Array
for (let i = 0; i < ArrayList.length; i++) {
  console.log(ArrayList[i])
}
// 遍历Object
// 你会发现它并没有走进这个for循环,因为ObjectParams.length === undefined
for (let i = 0; i < ObjectParams.length; i++) {
  console.log(ObjectParams[i])
}
// 遍历String
for (let i = 0; i < StringParams.length; i++) {
  console.log(StringParams[i])
}

for in 循环 为遍历数组而生

全能了... 可以遍历数组、对象、字符串

for (let i in ArrayList) {
  console.log(ArrayList[i])   // i输出为index
}
for (let i in ObjectParams) {
  console.log(ObjectParams[i])  // i输出为key
}
for (let i in StringParams) {
  console.log(StringParams[i])  // i输出为index
}

for of 循环

es6引入的

<div class="reference">for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray,arguments 对象等等)上创建一个迭代循环,对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩。。。for...of循环本质上就是调用这个接口产生的遍历器. for...of</div>
for (let i of ArrayList) {
  console.log(i)   
}
// 数组原生具备iterator接口(即默认部署了Symbol.iterator属性),for...of循环本质上就是调用这个接口产生的遍历器
ObjectParams[Symbol.iterator] = ArrayList[Symbol.iterator].bind(ArrayList)
for (let i of ObjectParams) {
  console.log(i)  // 输出结果与直接遍历ArrayList一样,Object默认是不具备Symbol.iterator属性的,因此无法对Object用for of进行遍历
}  
for (let i of StringParams) {
  console.log(i)  
}

forEach循环

数组特有... 不可break。 forEach()方法是ES5.1标准引入的。

ArrayList.forEach((item, index) => {
  console.log(item, index)  // item当前下标对象  index下标
})

while循环

let i = 0
while (i < ArrayList.length){
  console.log(ArrayList[i])
  i++
}

let j = 0
// 你会发现它并没有走进这个while循环,因为ObjectParams.length === undefined
while (j < ObjectParams.length){
  console.log(ObjectParams[j])
  j++
}

let k = 0
while (k < StringParams.length){
  console.log(StringParams[k])
  k++
}

do while 循环

let i = 0
do {
  console.log(ArrayList[i])
  i++
}
while (i < ArrayList.length)  

let j = 0
do {
  console.log(ObjectParams) //会输出 因为do while是先走do语句
  j++
}
// 你会发现它并没有走进这个while循环,因为ObjectParams.length === undefined
while (j < ObjectParams.length)

let k = 0
do {
  console.log(StringParams[k])
  k++
}
while (k < StringParams.length)  

map

数组特有... 不可break

ArrayList.map((item, index) => {
  console.log(item, index)
})

跳出for循环

break 语句用于跳出循环。上述几种方法中forEach和map不支持break..
continue 用于跳过循环中的一个迭代。 上述几种方法中forEach和map不支持continue..

总结

遍历数组用forEach、map(如果你不需要中断它),需要中断的话就选for...of吧
遍历字符串for..of, for...in
遍历对象for...in
while和do while的区别 while先判断条件,do while先执行一次再判断条件。

源码地址

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
盘点JavaScript中数组遍历的全部方式(下篇)
前言JavaScript想必大家都不陌生了,上篇文章已经给大家介绍了7种数组遍历的方式,这篇文章继续介绍7种数组遍历的方式,这样一共14种遍历方式,基本上囊括了JavaScript中全部的数组遍历方式了。下面的内容,紧接上面文章的内容,一起来学习下吧八、Find通过寻找数组中的对象返回数组中符合目标函数条件的第一个元素。否则返回undefined,如下:九
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Karen110 Karen110
3年前
盘点JavaScript中数组遍历的全部方式(上篇)
前言JavaScript想必大家都不陌生了,其中的字符串和数组大家经常都会用到,今天就让我们来说说这里面的数组对象的遍历吧,因为遍历经常使用的缘故,所以小编带着大家来解锁遍历的所有方法,以便大家能够更深入的了解数组遍历,并在实际项目中灵活运用。一、Entries这个是ES6中提供的用于遍历数组的方法,它会返回一个遍历器对象,Entries是对键值对的遍历。
Wesley13 Wesley13
3年前
java 基础知识
遍历遍历就是把这个数组的每个元素显示出来遍历的方法就是先定义这个数组的大小,然后用FOR循环来完成数组,例如doublescorenewdouble5;ScannerinputnewScanner(System.in);for(inti0;i<score.l
Stella981 Stella981
3年前
JavaScript中遍历数组和对象的方法
js数组遍历和对象遍历针对js各种遍历作一个总结分析,从类型用处,分析数组和对象各种遍历使用场景,优缺点等JS数组遍历:1,普通for循环,经常用的数组遍历vararr1,2,0,3,9,10,20,
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
达里尔 达里尔
1年前
给数组添加新数据,判断数据是否重复
多选要进行数组拼接,希望判断往原数组里添的新数据是否重复,封装个简易方法languageconstdataArrayname:'aaa',id:1,name:'bbb',id:2;constnewDataname:'ccc',id:2;//要添加的新数
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(