php 遍历对象数组,js中遍历对象(5种)和遍历数组(6种)的方法总结
本篇文章给大家带来的内容是关于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])
}
输出结果:
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])
});
输出结果:
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])
});
输出结果:
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])
});
返回结果:
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));
输出结果:
二.遍历数组方法
1.forEacheg:
var arr = ['a', 'b', 'c', 'd'];
arr.forEach(function(value, index) {
console.log('value=', value, 'index=', index);
})
输出结果:
2.map
可以对遍历的每一项做相应的处理,返回每次函数调用的结果组成的数组eg:
var arr = ['a', 'b', 'c', 'd'];
arr.map(function(item, index, array) {
console.log(item, index);
})
输出结果:
3.for循环遍历eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i = 0; i < arr.length; i++) {
console.log(i, arr[i])
}
输出结果:
4.for...ineg:
var arr = ['a', 'b', 'c', 'd'];
for (var i in arr) {
console.log('index:', i, 'value:', arr[i])
}
输出结果:
5.for...of(es6)
只遍历出value,不能遍历出下标,可遍历出Symbol数据类型的属性,此方法作为遍历所有数据结构的统一的方法eg:
var arr = ['a', 'b', 'c', 'd'];
for (var value of arr) {
console.log('value', value)
}
输出结果:
6.利用underscore插件eg:
var arr = ['a', 'b', 'c', 'd'];
var _ = require('underscore');
_.each(arr, function(value, index, arr) {
console.log(value, index, arr)
})
输出结果:
相关推荐:
php 遍历对象数组,js中遍历对象(5种)和遍历数组(6种)的方法总结相关推荐
- JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
JS中集合对象(Array.Map.Set)及类数组对象的使用与对比 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java ...
- Js中Array对象
Js中Array对象 JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象. 描述 在JavaScript中通常可以使用Array构造器与字面量的方式创建数组. c ...
- Js中String对象
Js中String对象 String全局对象是一个用于字符串或一个字符序列的构造函数. 描述 创建一个字符串可以通过字面量的方式,通过字面量创建的字符串变量在调用方法的时候能够自动转化为临时的包装对象 ...
- Js中RegExp对象
Js中RegExp对象 RegExp对象表示正则表达式,是由普通字符和特殊字符也叫元字符或限定符组成的文字模板,用于对字符串执行模式匹配. 描述 创建一个RegExp对象通常有两种方式,一种是通过字面 ...
- 初学JavaScript:js中的对象(对象+原型对象)
文章目录 js对象详解 1.创建对象 字面量模式创建对象 构造函数模式创建对象 2.访问对象 访问属性 访问方法 3.遍历对象中的属性和属性值 4.往对象中新添属性 5.删除对象中的属性 6.Obje ...
- Js中Reflect对象
Js中Reflect对象 Reflect是ES6起JavaScript内置的对象,提供拦截JavaScript操作的方法,这些方法与Proxy对象的handlers中的方法基本相同. 描述 Refle ...
- Js中Proxy对象
Js中Proxy对象 Proxy对象用于定义基本操作的自定义行为,例如属性查找.赋值.枚举.函数调用等. 语法 const proxy = new Proxy(target, handler); ta ...
- Js中Symbol对象
Js中Symbol对象 ES6引入了一种新的基本数据类型Symbol,表示独一无二的值,最大的用法是用来定义对象的唯一属性名,Symbol()函数会返回symbol类型的值,该类型具有静态属性和静态方 ...
- js中自定义对象、json对象、json字符串、普通js对象 --js学习那本书上的
4.7 自定义对象 JS除了内置对象之外,还允许我们程序自己定义属于我们自己的对象,在JS中自定义对象的方式有2种:通过构造器创建对象,通过初始化器创建对象. 4.7.1 构造器创建对象(原生JS对象 ...
- js中自定义对象、json对象、json字符串、普通js对象
4.7 自定义对象 JS除了内置对象之外,还允许我们程序自己定义属于我们自己的对象,在JS中自定义对象的方式有2种:通过构造器创建对象,通过初始化器创建对象. 4.7.1 构造器创建对象(原生JS对象 ...
最新文章
- 设计模式10——flyweight模式
- oracle cast multiset table 语法演示
- 10个提升MySQL性能的小技巧
- JAVA 学生信息管理系统
- WAV格式中常见的压缩编码
- openv 在 ubuntu(linux)上的编码编译
- 全局钩子,解决命名烦恼!——代码翻译小工具。
- 前端实现动画的7种方式
- 【生活中的逻辑谬误】偷换概念和民主谬误
- android NFC getId()后进制转换
- Win11此应用无法在你的电脑上运行怎么解决
- 科比,老大1000天
- python神经网络分析案例_python神经网络实战
- 光速学会前端三件套之html
- 429. N 叉树的层序遍历 c++ 队列
- Matlab 绘制动态图
- 1分钟快速了解MindMapper 与MindManager间的不同点
- 转【孙悟空的火眼金睛】
- 元宇宙,真的是人类的“死路”吗?
- vc webbrowser请求页面