JavaScript循环遍历

前端 作者:hello程序员 2022-04-30 03:20:02

const arr = ['a', 'b', 'c', 'd', 'e', 'f'];

const obj = {  

  a: 1,

  b: 2,  

  c: 3,

  d: 4

}

for() 遍历数组元素

遍历值为数组元素索引

for (let i = 0, len = arr.length; i < len; i++) {

   console.log(i);            // 0 1 2 3 4 5

   console.log(arr[i]);     // a b c d e f

}

forEach() 遍历数组元素

第一个参数为数组元素,第二个参数为数组元素索引,第三个参数为数组本身(可选)

没有返回值。

arr.forEach((item, index) => {

   console.log(item);     // a b c d e f

   console.log(index);   // 0 1 2 3 4 5

})

map() 遍历数组元素

第一个参数为数组元素,

第二个参数为数组元素索引,

第三个参数为数组本身(可选)

有返回值,返回一个新数组。

every(),some(),filter(),reduce(),reduceRight()不再一一介绍

let arrData = arr.map((item, index) => {

   console.log(item);     // a b c d e f

   console.log(index);   // 0 1 2 3 4 5

   return item;

})

console.log(arrData);    // ["a", "b", "c", "d", "e", "f"]

for…in 可循环对象和数组,推荐用于循环对象

1.循环值为对象属性

for (let key in obj)

{

   if (obj.hasOwnProperty(key))

   {

       console.log(key);           // a b c d  属性

       console.log(obj[key]);    // 1 2 3 4  属性值

   }

}

2.值为数组索引

for (let index in arr)

{

   console.log(index);          // 0 1 2 3 4 5 数组索引

   console.log(arr[index]);   // a b c d e f 数组值

}

当我们给数组添加一个属性name

arr.name = ‘我是自定义的属性’

for (let index in arr) {

   console.log(index);           // 0 1 2 3 4 5 name (会遍历出我们自定义的属性)

   console.log(arr[index]);    // a b c d e f 我是自定义属性name

}

for…of 可循环对象和数组,推荐用于遍历数组1.遍历值为数组元素

for (let value of arr) {

   console.log(value); // a b c d e f 数组值<br>}

2.循环值为对象属性

遍历对象时须配合Object.keys()一起使用,直接用于循环对象会报错,不推荐使用for…of循环对象

for (let value of Object.keys(obj))

{

   console.log(value); // a b c d 对象属性

}



关注公众号:拾黑(shiheibook)了解更多

友情链接:

下软件就上简单下载站:https://www.jdsec.com/
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

公众号 关注网络尖刀微信公众号
随时掌握互联网精彩
赞助链接