JS中数组与对象的遍历方法实例小结 - 网站

JS中数组与对象的遍历方法实例小结

分类:JavaScript进阶教程_JavaScript技术文章 · 发布时间:2021-09-17 01:46 · 阅读:5469

这篇文章主要介绍了JS中数组与对象的遍历方法,结合实例形式总结分析了JavaScript针对数组与对象遍历操作相关函数与使用技巧,需要的朋友可以参考下

本文实例讲述了JS中数组与对象的遍历方法。分享给大家供大家参考,具体如下:

一、数组的遍历:

首先定义一个数组

 arr=['snow','bran','king','nightking'];

1、for循环,需要知道数组的长度;

2、foreach,没有返回值,可以不知道数组长度;

 arr.forEach(function(ele,index){ console.log(index); console.log(ele) }) 

3、map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新数组,原数组不变;

 var newarr=arr.map(function(i){ return "hello "+i }); console.log(newarr) 

4、filter函数:过滤通过条件的元素组成一个新数组,原数组不变;

 var newarr=arr.filter(function(i){ return i == "bran" }); console.log(newarr) 

5、some函数,遍历数组中是否有符合条件的函数,返回布尔值;

 var yy=arr.some(function(i){ return i.length>4 }); console.log(yy)       //true 

6、every函数,遍历数组是否每个元素都符合条件,返回布尔值;

 var xx=arr.every(function(i){ return i.length>4 }); console.log(xx)       //false 

7、reduce函数,为数组中的每一个元素依次执行回调函数

语法:

 arr.reduce(callback, initialValue) 
 [0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){ return previousValue + currentValue; }); 

callback:执行数组中每个值的函数,包括四个参数;

  • previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue);
  • currentValue:当前被处理的值;
  • index:当前元素在数组中的索引;
  • array:调用reduce的数组;
  • initialValue:作为第一次调用callback的第一个参数;

例如:

 var total = [0, 1, 2, 3].reduce(function(a, b) { return a + b; }); // total == 6 var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { return a.concat(b); }); // flattened is [0, 1, 2, 3, 4, 5] 

要提供initialValue的话:

 var total = [0, 1, 2, 3].reduce(function(a, b) { return a + b; },4); console.log(total); //10 

二、对象的遍历

 var obj={snow:1,bran:2,king:3,nightking:4}; for(let i in obj){ console.log(i+','+obj[i]) } 

in也可以用来遍历数组,不过i对应于数组的key值:

 for(let i in arr){ console.log(i+','+arr[i]) } 

PS:这里再为大家推荐一款JS数组遍历方式分析对比工具供大家参考:

在线JS常见遍历方式性能分析比较工具

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《javascript面向对象入门教程》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

标签:
JS 数组 对象 遍历

相关文章

一起来学习TypeScript的类型

这篇文章主要为大家详细介绍了TypeScript的类型,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

JavaScript去除字符串两端空格的三种方法

本文主要介绍了JavaScript去除字符串两端空格的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

html2canvas图片跨域问题图文详解

我们在进行图片保存的时候经常会发现图片跨域了,下面下面这篇文章主要给大家介绍了关于html2canvas图片跨域问题的相关资料,需要的朋友可以参考下

JavaScript中Set基本使用方法实例

因为Set中存放的数据都是不会重复的数据,我们在编写JS代码的时候,因此我们可以利用Set来帮助我们更便捷地完成许多的事,下面这篇文章主要给大家介绍了关于JavaScript中Set基本使用方法的相关资料,需要的朋友可以参考下

详解vscode中console.log的两种快速写法

这篇文章主要介绍了vscode中console.log的两种快速写法,每种方法通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

返回分类 返回首页