摘要:一遍歷對(duì)象方法遍歷輸出的是對(duì)象自身的屬性以及原型鏈上可枚舉的屬性不含屬性原型鏈上的屬性最后輸出說(shuō)明先遍歷的是自身的可枚舉屬性后遍歷原型鏈上的在原型鏈上添加屬性可枚舉不可枚舉輸出結(jié)果遍歷對(duì)象返回的是一個(gè)包含對(duì)象自身可枚舉屬性的數(shù)組不含屬性不可
一.遍歷對(duì)象方法
1.for...in
遍歷輸出的是對(duì)象自身的屬性以及原型鏈上可枚舉的屬性(不含Symbol屬性),原型鏈上的屬性最后輸出說(shuō)明先遍歷的是自身的可枚舉屬性,后遍歷原型鏈上的
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]) }
輸出結(jié)果:
2.Object.keys()
遍歷對(duì)象返回的是一個(gè)包含對(duì)象自身可枚舉屬性的數(shù)組(不含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]) });
輸出結(jié)果:
3.Objcet.getOwnPropertyNames()
輸出對(duì)象自身的可枚舉和不可枚舉屬性的數(shù)組,不輸出原型鏈上的屬性
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]) });
輸出結(jié)果:
4.Reflect.ownKeys()
返回對(duì)象自身的所有屬性,不管屬性名是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]) });
返回結(jié)果:
5. _.keys
用underscore插件的遍歷方法只可以遍歷出對(duì)象自身的可枚舉屬性
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));
輸出結(jié)果:
1.forEach
eg: var arr = ["a", "b", "c", "d"]; arr.forEach(function(value, index) { console.log("value=", value, "index=", index); })
輸出結(jié)果:
2.map
可以對(duì)遍歷的每一項(xiàng)做相應(yīng)的處理,返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組
eg: var arr = ["a", "b", "c", "d"]; arr.map(function(item, index, array) { console.log(item, index); })
輸出結(jié)果:
3.for循環(huán)遍歷
eg: var arr = ["a", "b", "c", "d"]; for (var i = 0; i < arr.length; i++) { console.log(i, arr[i]) }
輸出結(jié)果:
4.for...in
eg: var arr = ["a", "b", "c", "d"]; for (var i in arr) { console.log("index:", i, "value:", arr[i]) }
輸出結(jié)果:
5.for...of(es6)
只遍歷出value,不能遍歷出下標(biāo),可遍歷出Symbol數(shù)據(jù)類(lèi)型的屬性,此方法作為遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一的方法
eg: var arr = ["a", "b", "c", "d"]; for (var value of arr) { console.log("value", value) }
輸出結(jié)果:
6.利用underscore插件
eg: var arr = ["a", "b", "c", "d"]; var _ = require("underscore"); _.each(arr, function(value, index, arr) { console.log(value, index, arr) })
輸出結(jié)果:
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/108195.html
摘要:日常開(kāi)發(fā)中我們難免需要對(duì)數(shù)組和對(duì)象進(jìn)行遍歷,今天抽空來(lái)總結(jié)下遍歷數(shù)組和對(duì)象常用的方法。使用遍歷對(duì)象注只能遍歷出自身可枚舉的屬性,而不能遍歷出原型鏈上面的屬性。 日常開(kāi)發(fā)中我們難免需要對(duì)數(shù)組和對(duì)象進(jìn)行遍歷,今天抽空來(lái)總結(jié)下遍歷數(shù)組和對(duì)象常用的方法。 Javascript遍歷數(shù)組總結(jié) 我們定義一個(gè)數(shù)組 var arr = [2,4,6]; 1.使用for循環(huán)遍歷 var lengt...
摘要:數(shù)組語(yǔ)法功能遍歷數(shù)組,返回回調(diào)返回值組成的新數(shù)組,不改變?cè)瓟?shù)組,不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)語(yǔ)法功能無(wú)法,可以用中來(lái)停止,不改變?cè)瓟?shù)組語(yǔ)法功能過(guò)濾,返回過(guò)濾后的數(shù)組,不改變?cè)瓟?shù)組,不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)語(yǔ)法功能有一項(xiàng)返回,則整體為,不改變?cè)瓟?shù)組語(yǔ)法 數(shù)組 (array) ES5 * map 語(yǔ)法:[].map(function(item, index, array) {return xxx})功...
摘要:主要用于枚舉對(duì)象數(shù)組遍歷效率最低的方法。當(dāng)前數(shù)組元素的值。傳遞給函數(shù)的初始值注意對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。 前言 PS: 2018/04/26 優(yōu)化一下排版,重新梳理一下方法,補(bǔ)充一些信息,刪除JQuery庫(kù)用法,只講解Javascript自帶的, for in 語(yǔ)句用于遍歷數(shù)組或者對(duì)象的屬性(對(duì)數(shù)組或者對(duì)象的屬性進(jìn)行循環(huán)操作)。主要用于枚舉對(duì)象, 數(shù)組遍歷效率最低的方法。 va...
摘要:中的數(shù)組遍歷是項(xiàng)目中經(jīng)常用到的,在這里將幾種方法做個(gè)對(duì)比。第一個(gè)參數(shù)為數(shù)組元素必選,第二個(gè)參數(shù)為數(shù)組元素索引值可選,第三個(gè)參數(shù)為數(shù)組本身可選循環(huán)中傳入要執(zhí)行的回調(diào)函數(shù),函數(shù)有三個(gè)參數(shù)。用于遍歷數(shù)組元素使用,,,用于循環(huán)對(duì)象屬性使用 js中的數(shù)組遍歷是項(xiàng)目中經(jīng)常用到的,在這里將幾種方法做個(gè)對(duì)比。 for循環(huán):使用評(píng)率最高,也是最基本的一種遍歷方式。 let arr = [a,b,c,d,...
摘要:前一個(gè)值,當(dāng)前值,索引,數(shù)組對(duì)象產(chǎn)生新數(shù)組的迭代器方法類(lèi)似,對(duì)數(shù)組的每個(gè)元素使用某個(gè)函數(shù),并返回新數(shù)組和相似,傳入一個(gè)返回值為布爾類(lèi)型的函數(shù)。 1. 前言 數(shù)組真的是每天用了,但是有很多方法都是記不住,總是要百度查,很煩,所以才寫(xiě)了個(gè)數(shù)組使用總結(jié),有什么不對(duì)的希望大家指出來(lái)。 2. 思路 先看看這些問(wèn)題都記得很清楚么? 創(chuàng)建數(shù)組,怎么創(chuàng)建數(shù)組的 數(shù)組的構(gòu)造方法Array有哪些方法?E...
閱讀 2085·2021-11-23 10:08
閱讀 2423·2021-11-22 15:25
閱讀 3349·2021-11-11 16:55
閱讀 841·2021-11-04 16:05
閱讀 2748·2021-09-10 10:51
閱讀 769·2019-08-29 15:38
閱讀 1663·2019-08-29 14:11
閱讀 3572·2019-08-29 12:42