js中遍历对象(5种)和遍历数组(6种)的方法总结(转载)
一、遍历对象方法
1.for...in
遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的
eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {};//在原型链上添加属性
Object.defineProperty(obj, 'country', {
Enumerable: true //可枚举
});
Object.defineProperty(obj, 'nation', {
Enumerable: false //不可枚举
})
obj.contry = 'china';
for (var index in obj) {
console.log('key=', index, 'value=', obj[index])
}
输出结果:
key = name value = yayaya
key = age value = 12
key = sex value = female
key = contry value = china
key = pro1 value = function(){}
2.Object.keys()
遍历对象返回的是一个包含对象自身可枚举属性的数组(不含Symbol属性).
eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
Enumerable: true,
value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
Enumerable: false //不可枚举
})
obj.contry = 'china';
Object.keys(obj).forEach(function(index) {
console.log(index, obj[index])
});
输出结果:
name yayaya
age 12
sex female
contry china
3.Objcet.getOwnPropertyNames()
输出对象自身的可枚举和不可枚举属性的数组,不输出原型链上的属性
eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
Enumerable: true,
value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
Enumerable: false //不可枚举
})
obj.contry = 'china';
Object.getOwnPropertyNames(obj).forEach(function(index) {
console.log(index, obj[index])
});
输出结果:
name yayaya
age 12
sex female
country ccc
nation undefined
contry china
4.Reflect.ownKeys()
返回对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.
eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
Enumerable: true,
value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
Enumerable: false //不可枚举
})
obj.contry = 'china';
Reflect.ownKeys(obj).forEach(function(index) {
console.log(index, obj[index])
});
返回结果:
name yayaya
age 12
sex female
country ccc
nation undefined
contry china
5. _.keys
用underscore插件的遍历方法只可以遍历出对象自身的可枚举属性
eg:
var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' };
Object.prototype.pro1 = function() {}
Object.defineProperty(obj, 'country', {
Enumerable: true,
value: 'ccc'
});
Object.defineProperty(obj, 'nation', {
Enumerable: false //不可枚举
})
obj.contry = 'china';
console.log(_.keys(obj));
输出结果:
name age sex country
二.遍历数组方法
1.forEach
eg:
var arr = ['a', 'b', 'c', 'd'];
arr.forEach(function(value, index) {
console.log('value=', value, 'index=', index);
})
输出结果:
value=a index=0
value=b index=1
value=c index=2
value=d index=3
2.map
可以对遍历的每一项做相应的处理,返回每次函数调用的结果组成的数组
eg:
var arr = ['a', 'b', 'c', 'd'];
arr.map(function(item, index, array) {
console.log(item, index);
})
输出结果:
a 0
b 1
c 2
d 3
3.for循环遍历
eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i = 0; i < arr.length; i++) {
console.log(i, arr[i])
}
输出结果:
0 a
1 b
2 c
3 d
4.for...in
eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i in arr) {
console.log('index:', i, 'value:', arr[i])
}
输出结果:
index:0 value:a
index:1 value:b
index:2 value:c
index:3 value:d
5.for...of(es6)
只遍历出value,不能遍历出下标,可遍历出Symbol数据类型的属性,此方法作为遍历所有数据结构的统一的方法
eg:
var arr = ['a', 'b', 'c', 'd'];
for (var value of arr) {
console.log('value', value)
}
输出结果:
value a
value b
value c
value d
6.利用underscore插件
eg:
var arr = ['a', 'b', 'c', 'd'];
var _ = require('underscore');
_.each(arr, function(value, index, arr) {
console.log(value, index, arr)
})
输出结果:
a 0 ['a','b','c',''d]
b 1 ['a','b','c',''d]
c 2 ['a','b','c',''d]
d 3 ['a','b','c',''d]
js中遍历对象(5种)和遍历数组(6种)的方法总结(转载)的更多相关文章
- js中 json对象与json字符串相互转换的几种方式
以下总结js中 json对象与json字符串相互转换的几种方式: 一.JSON对象转化为JSON字符串 1.使用JSON.stringify()方法进行转换 该方法不支持较老版本的IE浏览器,比如:i ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JavaScript学习12 JS中定义对象的几种方式【转】
avaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...
- 浅解析js中的对象
浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...
- JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘
一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实 ...
- JS中的对象和方法简单剖析
众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): ...
- 深入理解JS中的对象(二):new 的工作原理
目录 序言 不同返回值的构造函数 深入 new 调用函数原理 总结 参考 1.序言 在 深入理解JS中的对象(一):原型.原型链和构造函数 中,我们分析了JS中是否一切皆对象以及对象的原型.原型链和构 ...
- js中判断对象具体类型
大家可能知道js中判断对象类型可以用typeof来判断.看下面的情况 <script> alert(typeof 1);//number alert(typeof "2" ...
- js中XMLHttpRequest对象实现GET、POST异步传输
js中XMLHttpRequest对象实现GET.POST异步传输 /* * 统一XHR接口 */ function createXHR() { // IE7+,Firefox, Opera, Chr ...
- js中推断对象详细类型
大家可能知道js中推断对象类型能够用typeof来推断. 看以下的情况 <script> alert(typeof 1);//number alert(typeof "2&quo ...
随机推荐
- 2019HDU多校第7场——构造
题意 假设现在你在准备考试,明天的考试有 $n$ 道题目,对于分值为 $i$ 的题目至少复习 $i+1$ 小时才能做对,已知总分为$m$,求确保完成 $k$ 道题的最少时间. 分析 手动尝试一下,发现 ...
- SpringMVC数据格式化
SpringMVC数据格式化 1. 使用Formatter格式化数据 Converter可以将一种类型转换成另一种类型,是任意Object之间的类型转换. Formatter则只能进行String与任 ...
- Maven Module和Maven Project的区别
1.maven project和module相当于父子关系.2.当新建的项目中不存在父子关系时使用project.3.当项目中存在父子关系时用project做父工程,module做子工程,module ...
- ooo's vimrc
colorscheme evening set fillchars=vert:\ ,stl:\ ,stlnc:\ set nu set tabstop=4 set shiftwidth=4 set s ...
- Input类中常用的验证方式
Deolin一般将Input类对象作为POST请求方法的参数, Input类的域与前端的数据结构一一对应,由于后端不应该相信前端传过来的任何数据, 所以前端的数据对象先绑定到Input对象中,通过JS ...
- 编程用sort进行排序,然后从最后一个元素开始判断,去重
a=[,,,,,,,,,,,,,,] a.sort() last=a[-] ,-,-): if last==a[i]: del a[i] else: last=a[i] print(a)
- Spring - 环境安装
安装IDEA的非Community版本和Java的包之后就可以用Java来HelloWorld了. 然后去这个链接:https://github.com/spring-guides/gs-rest-s ...
- qt mvc3
前面两节讲的model是一维的,这次开始二维的也就是我们常说的Table,相对与list,我们多了一个列的概念. 下面讲解一个例子.我先说明一下我们这个例子,在程序目录下,我们有一个文本文件,其中存放 ...
- GDPR全文翻译(二)
第三节 数据保护影响评估以及事先咨询 第35条 数据保护影响评估 1.鉴于一种数据处理方式,尤其是使用新技术进行数据处理,统筹考虑处理过程的性质.范围.内容和目的,(不难得知)这很可能对自然人权利和自 ...
- 基于python的人脸识别(检测人脸、眼睛、嘴巴、鼻子......)
本文链接:https://blog.csdn.net/James_Ray_Murphy/article/details/79209172 import numpy as np import cv2 # ...