jS:关于对象遍历和数组遍历的那些事

qingshanli1988 发布于2019-08-20 18:16 / 625人阅读

摘要：如图遍历数组遍历数组元素并以某种方式处理每个元素是一个常见的操作。如图不过，里的功能比较强大，可以遍历而且返回值是的则被省略掉总结遍历对象，遍历出来的是键名，而不是键值，参数必须是对象。

可能是由于职业的关系，下班之后完全不想Open PC，但很多知识点有必要自己做个小小总结。本人之前对原生Array和Object完全没概念。

遍历对象的方法：

Object.keys(Object) | for(item in Object)| object.getOwnPropertyNames(o)

遍历数组的方法：

Array.forEach() | Array.map() | Array.filter() | Array.some() | Array.every()

下面一一来说说每种遍历方法都是干啥子用的

遍历对象,枚举一个对象的所有属性：

从 ECMAScript 5 开始，有三种原生的方法用于列出或枚举对象的属性：

for…in 循环

该方法依次访问一个对象及其原型链中所有可枚举的属性。

Object.keys(o)

该方法返回一个对象 o 自身包含（不包括原型中）的所有属性的名称的数组。

Object.getOwnPropertyNames(o)
该方法返回一个数组，它包含了对象 o 所有拥有的属性（无论是否可枚举）的名称。

pay attention:Object.keys(object)返回的是一个数组。如图：

遍历数组(interating over array)

遍历数组元素并以某种方式处理每个元素是一个常见的操作。以下是最简单的方式：

var colors = ["red", "green", "blue"];
for (var i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}
array.forEach()

forEach()

对数组中的而每一项运行传入的函数，没有返回值，本质是与for循环迭代数组一样，一般的用法：

var numbers =[111,11,2,3];
numbers.forEach(function(item,index,array){
    //console.log(item,index,array)
})
或者：
var arr = [3, 5, 7];
arr.forEach(item => {
    console.log(item);
})

由于 arrow function 的特性，自动绑定父 scope 的 this，会更加简洁，而且少了个function关键字，可读性更好。

array.some() 和array.every()

var arr=[1,2,3,4];
var everyresult =arr.every((item,index,array) => item>2);
console.log(everyresult)//false

两者用法比较相似，用于查询数组中的项是否满足某个条件，两者都有返回值，且返回值是boolean,true or false,every()只有每一项都满足才能返回true，否则返回false,some()则是相反的。切记返回值是true或者false;

array.map()和array.filter()

两个方法比较相似，都有返回值，且返回的还都是数组，不是布尔类型。filter()，利用指定的函数确定是否在返回的数组中包含某一项。用来数组去重比较灵活

var arr1=[11,22,223,24,3,42,3,11,11,2,3333,3333333,2];
var arr2 = arr1.filter((k,index) => arr1.indexOf(k) === index).sort((a,b) => a-b > 1);
Result: [3, 2, 11, 22, 24, 42, 223, 3333, 3333333]

又或者用法某一项值返回true的情况下：

map() 也返回一个数组，不过，map有一点不好的地方在于不能控制循环的流程，如果不能完成，就返回undefined继续下一次迭代。所以遇到可能会返回undefined的情况应该用forEach或者for循环遍历。
如图：

不过，JQ里的$.map()功能比较强大，可以遍历而且返回值是undefined的则被省略掉

var obj={"send_message":{"1":false,"2":true},"audit_type":{"1":true,"2":false,"3":true}};
var res={};
for(item in obj){
    var value =obj[item];
    var arr =Object.keys(value);
    var arr2 = $.map(arr,function(kk,vv){
    if(vv){
    return kk
}
})
    res[item]=arr2.join();}
console.log(res,"res");

总结

1.遍历对象，Object.keys(object)遍历出来的是键名，而不是键值，参数必须是对象。
2.遍历数组，前提必须是数组，才能用filter/map/every/some/forEach等这几个方法，且注意map()和filter()是有返回值的，map()有自己的缺陷，有可能返回undefined，而filter()返回的则是为true的某一项
3.join（）则是使用不同的分隔符来构建字符串，数组默认情况下以逗号分隔的形式返回数组项。
4.虽然数组也是对象的一种，但确是Array类型，检测数组的几种方法：

if(arr instanceof Array){console.log("shuzu")};
or:
if(Array.isArray (arr)){console.log("shuzu")}
or:
if(Object.prototype.toString.call(arr) == "[object Array]"){console.log("我是数组")}

第三种办法比较万能，推荐使用！！

GPU云服务器云服务器 js遍历对象的数据 js遍历对象内容 js 遍历数组查找 js遍历对象条数据

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

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

Javascript 对象那些事（持续更新）

摘要：一前言记录语言类型的一些问题。其它浏览器则完全按照对象定义的顺序遍历属性。所以，顺序这种事，还是要用数组来保证。详细请参考对象遍历顺序三后记参考链接对象遍历顺序一前言记录javascript语言object类型的一些问题。 1. typeof []; // object 2. typeof {};// object 3. typeof null; //objec...

CoreDump 2019-08-22 16:47 评论0 收藏0
JavaScript面向对象那些事

摘要：委托上面的代码结合了构造函数和原型两种方式去创建对象，首先聊聊构造函数构造函数构造函数本质上还是函数，只不过为了区分将其首字母大写了而已。注意注释掉的代码是自动执行的，但这并不是构造函数独有的，每个函数在声明时都会自动生成。首先看看下面两个1+1=2的问题: 问题一：为什么改变length的值，数组的内容会变化？ var arr = [1]; arr.length = 3; aler...

王伟廷 2019-08-20 18:07 评论0 收藏0
唠叨一下js对象与哈希表那些事

摘要：的扩展知识对于哈希表来说，最重要的莫过于生成哈希串的哈希算法和处理冲突的策略了。由于链表的查找需要遍历，如果我们将链表换成树或者哈希表结构，那么就能大幅提高冲突元素的查找效率。最近在整理数据结构和算法相关的知识，小茄专门在github上开了个repo https://github.com/qieguo2016...，后续内容也会更新到这里，欢迎围观加星星！ js对象 js中的对象是基...

Nosee 2019-08-22 10:46 评论0 收藏0
ES6中的Iterator和for...of循环那些事

摘要：一个对象如果要有可被循环调用的接口，就必须在的属性上部署遍历器生成方法原型链上的对象具有该方法也可。阮大神案例上面代码是一个类部署接口的写法。属性对应一个函数，执行后返回当前对象的遍历器对象。最近看阮一峰阮大神的ES6，刚刚看到Iterator和for...of循环这一章，小作笔记跟大家略微分享一下，不足之处还望大家多多指正 Iterator（遍历器）就是一种机制；任何数据结构只要是...

OpenDigg 2019-08-21 10:44 评论0 收藏0
向Zepto学习关于"偏移"的那些事

摘要：获得当前元素相对于的位置。返回一个对象含有和当给定一个含有和属性对象时，使用这些值来对集合中每一个元素进行相对于的定位。获取对象集合中第一个元素相对于其的位置。结尾以上就是中与偏移相关的几个的解析，欢迎指出其中的问题和有错误的地方。前言这篇文章主要想说一下Zepto中与偏移相关的一些事，很久很久以前，我们经常会使用offset、position、scrollTop、scrollLe...

hzx 2019-08-22 11:20 评论0 收藏0