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

szysky 发布于2019-08-22 16:40 / 939人阅读

摘要：本文主要收集各种遍历方法，主要针对数组，也会有关于对象字符串的，看完它，你会对遍历有一个新的认识。方法是标准引入的。

当我们需要遍历一个数组时，第一个想到的就是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引入的

for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩。。。for...of循环本质上就是调用这个接口产生的遍历器. for...of

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先执行一次再判断条件。

源码地址

私有云服务器托管数组遍历遍历数组遍历方法遍历筛选数组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94564.html

【译】45种Javascript技巧大全

摘要：对进行序列化和反序列化避免使用和构造函数使用和构造函数是非常昂贵的操作，因为每次他们都会调用脚本引擎将源代码转换成可执行代码。原文：45 Useful JavaScript Tips, Tricks and Best Practices 译文：45个有用的JavaScript技巧，窍门和最佳实践译者：dwqs 在这篇文章中，我将分享一些JavaScript常用的技巧，窍门和最...

hufeng 2019-08-21 10:25 评论0 收藏0
JavaScript基础大全（原型，闭包）[持续更新]

摘要：对象原型上的一个属性，它指向了构造器本身。其中，构造器对象可用于实例化普通对象。基于代码兼容性可读性等方面的考虑，不建议开发者显式访问属性或通过更改原型链上的属性和方法，可以通过更改构造器对象来更改对象的属性。基本语法 1.严格模式 use strict 作用消除JS语法的一些不合理、不严谨、不安全的问题，减少怪异行为并保证代码运行安全提高编译器解释器效率，增加运行速度与...

miracledan 2019-08-20 16:11 评论0 收藏0
JavaScript：对Object对象的一些常用操作总结

摘要：一可以用作对象的复制可以用作对象的合并注意目标对象自身也会改变。对象四返回一个数组，包括对象自身的不含继承的所有可枚举属性不含属性的键名。该方法返回被冻结的对象。方法判断一个对象是否被冻结。 JavaScript对Object对象的一些常用操作总结。一、Object.assign() 1.可以用作对象的复制 var obj = { a: 1 }; var copy = Object....

马龙驹 2019-08-23 12:46 评论0 收藏0
Java--String--方法大全

摘要：本文介绍中的的常见方法。将此与另一个比较忽略大小写。判断字符串中是否包含方法传入的字符串。分隔字符串成数组。修改方法作用返回数组参数的字符串表示形式。将此中的所有字符都转换为大写。本文介绍Java中的String的常见方法。索引位置方法作用char charAt(...

forrest23 2021-11-23 09:51 评论0 收藏0
JavaScript编程注意事项、技巧大全

摘要：数组元素删除应使用。用来序列化与反序列化结果为的值与对象相同不要使用或者函数构造器和函数构造器的开销较大，每次调用，引擎都要将源代码转换为可执行的代码。收藏自 JavaScript奇技淫巧45招 JavaScript是一个绝冠全球的编程语言，可用于Web开发、移动应用开发（PhoneGap、Appcelerator）、服务器端开发（Node.js和Wakanda）等等。JavaSc...

Shimmer 2019-08-21 10:24 评论0 收藏0