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

本文实例讲述了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常见遍历方式性能分析比较工具：http://tools.jb51.net/aideddesign/js_bianli

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

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

赞 (0)

相关推荐

  • JavaScript数组方法的错误使用例子

    1. 不要使用Array.indexOf,使用Array.includes "如果你要在数组中查找元素,使用Array.indexOf!".记得在我学习JavaScript课程时候,有这样一句话.这句话没错,确实可以这么使用! 根据MDN文档:"Array.indexOf会返回被查找元素第一个匹配的位置的下标."因此,如果后面需要用到这个索引,Array.indexOf是一个很好的解法.但是,我们要解决的问题是:查找数组中是否包含某个元素.这是一个Yes/No的问题

  • JavaScript数组基于交换的排序示例【冒泡排序】

    JavaScript数组基于交换的排序示例【冒泡排序】

    本文实例讲述了JavaScript数组基于交换的排序.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • ajax获得json对象数组 循环输出数据的方法

    如下所示: var obj= [{id: 1, pId: 0, name: "采购商品", open: true}, {id: 2, pId: 1, name: "雨伞2", open: true}, {id: 2, pId: 1, name: "雨伞2", open: true}, {id: 2, pId: 1, name: "雨伞2", open: true}]; var x=''; $.each(obj, functio

  • JavaScript实现构造json数组的方法分析

    本文实例讲述了JavaScript实现构造json数组的方法.分享给大家供大家参考,具体如下: 从后端拿到的数据是一个数组,每个元素中包含的数据如下(host相同的记录都是相邻的) currentTime:"1470729601" host:"10.3.34.21" taskList:null taskNum:1 想构造类似如下结构的json数组 [{ name: 'host:10.1.6.49', data: [ [1470641461000, 5], [1470

  • JS获取并处理php数组的方法实例分析

    本文实例讲述了JS获取并处理php数组的方法.分享给大家供大家参考,具体如下: $music=array(); $music['tayler']=array(); $music['walker']=array(); $music['tayler'][]='ours'; $music['tayler'][]='style'; $music['tayler'][]='red'; $music['walker'][]='all fall down'; $music['walker'][]='faded

  • JS 数组随机洗牌的实例代码

    下面通过一段代码给大家介绍js 数组随机洗牌的方法,具体代码如下所示: //先定义一个某数值范围内的随机数 function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1) + min) } // 克隆数组方法 /** * 克隆数组 * @param {array} arr 原数组 * @return {array} 新数组 */ function cloneArr(arr) { // 从第一个字符就

  • JavaScript使用indexOf()实现数组去重的方法分析

    JavaScript使用indexOf()实现数组去重的方法分析

    本文实例讲述了JavaScript使用indexOf()实现数组去重的方法.分享给大家供大家参考,具体如下: 数组去重方法有多中,这里列举出自己认为比较容易理解的方法. 思路: 1. 创建一个新的空数组,用来存放去重后的新数组. 2. 利用for循环循环遍历需要去重的数组. 3. 利用indexOf()方法查询遍历出的数组在新数组中是否出现,如果出现:则继续遍历数组,如未出现:则利用push方法添加到新数组中. 4. 原数组循环遍历完成后,组建一个已经去除重复的新数组. <script> va

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

    本文实例讲述了JS中数组与对象的遍历方法.分享给大家供大家参考,具体如下: 一.数组的遍历: 首先定义一个数组 arr=['snow','bran','king','nightking']; 1.for循环,需要知道数组的长度; 2.foreach,没有返回值,可以不知道数组长度: arr.forEach(function(ele,index){ console.log(index); console.log(ele) }) 3.map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新

  • JS中数组实现代码(倒序遍历数组,数组连接字符串)

    Js中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性. 具体代码如下所示: // =================== 求最大值===================================== <script> var arr = [10,35,765,21345,678,89]; var max = arr [0]; for (var i=0;i< arr.length;i++) { if (max<arr[i]){ max = arr [i]; } }

  • JS中数组常用的循环遍历你会几种

    JS中数组常用的循环遍历你会几种

    前言 数组和对象作为一个最基础数据结构,在各种编程语言中都充当着至关重要的角色,你很难想象没有数组和对象的编程语言会是什么模样,特别是 JS ,弱类型语言,非常灵活.本文带你了解常用数组遍历.对象遍历的使用对比以及注意事项. 数组遍历 随着 JS 的不断发展,截至 ES7 规范已经有十多种遍历方法.下面按照功能类似的方法为一组,来介绍数组的常用遍历方法. for.forEach.for ...of const list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11]; f

  • node.js中事件触发器events的使用方法实例分析

    本文实例讲述了node.js中事件触发器events的使用方法.分享给大家供大家参考,具体如下: node.js是基于事件驱动的,通过events,我们可以方便的创建事件,并通过触发事件来调用我们自定义的监听函数. 所有能触发事件的对象都应该是 EventEmitter 类的实例,一般我们自定义一个类继承于 EventEmitter 类. 通过on()方法我们可以绑定事件与监听函数: const Events = require('events'); //自定义一个类,继承于EventEmitt

  • node.js中path路径模块的使用方法实例分析

    本文实例讲述了node.js中path路径模块的使用方法.分享给大家供大家参考,具体如下: path模块是node.js中处理路径的核心模块.可以很方便的处理关于文件路径的问题. join() 将多个参数值合并成一个路径 const path = require('path'); console.log(path.join('./a', 'b', 'c')); basename() 获取路径中的文件名 const path = require('path'); //获取文件名,包含扩展名 con

  • node.js中fs文件系统模块的使用方法实例详解

    本文实例讲述了node.js中fs文件系统模块的使用方法.分享给大家供大家参考,具体如下: node.js中为我们提供了fs文件系统模块,实现对文件或目录的创建,修改和删除等操作. fs模块中,所有的方法分为同步和异步两种实现. 有 sync 后缀的方法为同步方法,没有 sync 后缀的方法为异步方法. 一.文件的整个读取 const fs = require('fs'); //参数一表示读取的文件 //参数二表示读取的配置,{encoding:'null', flag:'r'} //encod

  • JS Math对象与Math方法实例小结

    JS Math对象与Math方法实例小结

    本文实例讲述了JS Math对象与Math方法.分享给大家供大家参考,具体如下: JavaScript 提供了 Math 内置对象方便我们进行数学运算 他具有数学常用和函数的属性和方法. 常用属性 //max() 与 min() 求一组数的最大值和最小值 Math.max(10,9,22); // => 22 Math.min(10,9,8,22); // => 8 常用属性 Math.PI // 圆周率 => 3.141592653589793 Math.E // 自然对数底,数学中的

  • C#中Winform获取文件路径的方法实例小结

    本文实例讲述了C#中Winform获取文件路径的方法.分享给大家供大家参考.具体如下: 获取文件名方法: 用System.IO.Path.GetFileName和System.IO.Path.GetFileNameWithoutExtension(无扩展名)的方法 获取文件路径方法: //获取当前进程的完整路径,包含文件名(进程名). string str = this.GetType().Assembly.Location; result: X:\xxx\xxx\xxx.exe //(.exe

  • JS中数组重排序方法

    1.数组中已存在两个可直接用来重排序的方法:reverse()和sort(). reverse()和sort()方法的返回值是经过排序后的数组.reverse()方法会反转数组项的顺序: var values=[1,2,3,4,5]; values.reverse(); alert(values); //5,4,3,2,1 在默认情况下,sort()方法按升序排列数组,sort()方法会调用每个数组项的toString()转型方法,然后比较得到字符串,确定如何排序.即使数组中的每一项都是数值,s

  • 详谈js中数组(array)和对象(object)的区别

    •object 类型: ◦ 创建方式: /*new 操作符后面Object构造函数*/ var person = new Object(); person.name = "lpove"; person.age = 21; /*或者用对象字面量的方法*/ var person = { name: "lpove"; age : 21; } •array类型 ◦ 创建方式: `var colors = new Array("red","blu

随机推荐