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