遍歷對象和數組的方法總結

wenzi 發布于2019-08-26 12:11 / 2765人閱讀

摘要：一遍歷對象方法遍歷輸出的是對象自身的屬性以及原型鏈上可枚舉的屬性不含屬性原型鏈上的屬性最后輸出說明先遍歷的是自身的可枚舉屬性后遍歷原型鏈上的在原型鏈上添加屬性可枚舉不可枚舉輸出結果遍歷對象返回的是一個包含對象自身可枚舉屬性的數組不含屬性不可

一.遍歷對象方法

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)

})

輸出結果:

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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