這篇文章帶給大家的內容是關於js中遍歷物件(5種)和遍歷陣列(6種)的方法總結,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
一、遍歷物件方法
#1.for...in
遍歷輸出的是物件本身的屬性以及原型鏈上可枚舉的屬性(不含Symbol屬性),原型鏈上的屬性最後輸出說明先遍歷的是自身的可枚舉屬性,後遍歷原型鏈上的
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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屬性).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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()
輸出物件本身的可枚舉和不可枚舉屬性的陣列,不輸出原型鏈上的屬性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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或字串,也不管是否可枚舉.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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外掛的遍歷方法只可以遍歷出物件本身的可枚舉屬性
1 2 3 4 5 6 7 8 9 10 11 12 | 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
1 2 3 4 5 | eg:
var arr = [ 'a' , 'b' , 'c' , 'd' ];
arr.forEach( function (value, index) {
console.log( 'value=' , value, 'index=' , index);
})
|
登入後複製
輸出結果:
#2.map
可以對遍歷的每一項做對應的處理,傳回每次函數呼叫的結果所組成的陣列
1 2 3 4 5 | eg:
var arr = [ 'a' , 'b' , 'c' , 'd' ];
arr.map( function (item, index, array ) {
console.log(item, index);
})
|
登入後複製
輸出結果:
##3.for迴圈遍歷
1 2 3 4 5 6 7 | eg:
var arr = [ 'a' , 'b' , 'c' , 'd' ];
for ( var i = 0; i <p>輸出結果:<strong><em></em></strong></p><p></p><p>##4. for ...in<img src= "/static/imghw/default1.png" data-src= "https://img.php.cn//upload/image/111/220/264/1534304575163160.png" class = "lazy" title= "1534304575163160.png" alt= "js中遍歷物件(5種)和遍歷數組(6種)的方法總結" ><span class = "img-wrap" ></span></p><pre class = "brush:php;toolbar:false" >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資料類型的屬性,此方法作為遍歷所有資料結構的統一的方法
1 2 3 4 5 | eg:
var arr = [ 'a' , 'b' , 'c' , 'd' ];
for ( var value of arr) {
console.log( 'value' , value)
}
|
登入後複製
輸出結果:6.利用underscore外掛
1 2 3 4 5 6 7 | eg:
var arr = [ 'a' , 'b' , 'c' , 'd' ];
var _ = require ( 'underscore' );
_.each(arr, function (value, index, arr) {
console.log(value, index, arr)
})
|
登入後複製
輸出結果:#相關推薦:########JS遍歷陣列與對象的差異及遞歸遍歷物件、陣列、屬性的方法詳解###############js 遍歷物件的屬性的程式碼######################################################################################################################################################################################################################################################## js遍歷陣列的兩種方法############
以上是js中遍歷物件(5種)和遍歷數組(6種)的方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!