遍历对象和数组的方法总结

wenzi 发布于2019-08-26 12:11 / 2764人阅读

摘要：一遍历对象方法遍历输出的是对象自身的属性以及原型链上可枚举的属性不含属性原型链上的属性最后输出说明先遍历的是自身的可枚举属性后遍历原型链上的在原型链上添加属性可枚举不可枚举输出结果遍历对象返回的是一个包含对象自身可枚举属性的数组不含属性不可

一.遍历对象方法

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.forEach

eg:
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...in

eg:
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)

})

输出结果:

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

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

JavaScript遍历对象和数组的方法总结

摘要：日常开发中我们难免需要对数组和对象进行遍历，今天抽空来总结下遍历数组和对象常用的方法。使用遍历对象注只能遍历出自身可枚举的属性，而不能遍历出原型链上面的属性。日常开发中我们难免需要对数组和对象进行遍历，今天抽空来总结下遍历数组和对象常用的方法。 Javascript遍历数组总结我们定义一个数组 var arr = [2,4,6]; 1.使用for循环遍历 var lengt...

jiekechoo 2019-08-23 12:55 评论0 收藏0
JS 数组常用API方法和遍历方法总结

摘要：数组语法功能遍历数组，返回回调返回值组成的新数组，不改变原数组，不会对空数组进行检测语法功能无法，可以用中来停止，不改变原数组语法功能过滤，返回过滤后的数组，不改变原数组，不会对空数组进行检测语法功能有一项返回，则整体为，不改变原数组语法数组 (array) ES5 * map 语法：[].map(function(item, index, array) {return xxx})功...

TNFE 2019-08-23 16:51 评论0 收藏0
Javascript各种数组遍历方法归纳总结和兼容写法

摘要：主要用于枚举对象数组遍历效率最低的方法。当前数组元素的值。传递给函数的初始值注意对于空数组是不会执行回调函数的。前言 PS: 2018/04/26 优化一下排版,重新梳理一下方法,补充一些信息,删除JQuery库用法,只讲解Javascript自带的, for in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。主要用于枚举对象, 数组遍历效率最低的方法。 va...

Sanchi 2019-08-26 10:29 评论0 收藏0
js数组遍历总结

摘要：中的数组遍历是项目中经常用到的，在这里将几种方法做个对比。第一个参数为数组元素必选，第二个参数为数组元素索引值可选，第三个参数为数组本身可选循环中传入要执行的回调函数，函数有三个参数。用于遍历数组元素使用，，，用于循环对象属性使用 js中的数组遍历是项目中经常用到的，在这里将几种方法做个对比。 for循环：使用评率最高，也是最基本的一种遍历方式。 let arr = [a,b,c,d,...

oujie 2019-08-23 12:20 评论0 收藏0
数组的使用总结— (js基础复习第2期)

摘要：前一个值，当前值，索引，数组对象产生新数组的迭代器方法类似，对数组的每个元素使用某个函数，并返回新数组和相似，传入一个返回值为布尔类型的函数。 1. 前言数组真的是每天用了，但是有很多方法都是记不住，总是要百度查，很烦，所以才写了个数组使用总结，有什么不对的希望大家指出来。 2. 思路先看看这些问题都记得很清楚么？创建数组，怎么创建数组的数组的构造方法Array有哪些方法？E...

zhigoo 2019-08-23 13:10 评论0 收藏0