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


Posted in Javascript onAugust 14, 2018

本文实例讲述了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])
}
Javascript 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
javascript数组去掉重复
May 12 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
layui实现table加载的示例代码
Aug 14 #Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 #Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 #Javascript
layer插件select选中默认值的方法
Aug 14 #Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 #Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 #Javascript
JS通过位运算实现权限加解密
Aug 14 #Javascript
You might like
极典R601SW收音机
2021/03/02 无线电
PHP 已经成熟
2006/12/04 PHP
深入php之规范编程命名小结
2013/05/15 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Django中Middleware中的函数详解
2019/07/18 Python
Numpy的简单用法小结
2019/08/28 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
自动化专业本科毕业生求职信
2013/10/20 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
黄河象教学反思
2014/02/10 职场文书
中式婚礼主持词
2014/03/13 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
汇源肾宝广告词
2014/03/20 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
社区国庆节活动总结
2015/03/23 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript