首頁 > web前端 > js教程 > js中遍歷物件(5種)和遍歷數組(6種)的方法總結

js中遍歷物件(5種)和遍歷數組(6種)的方法總結

不言
發布: 2018-08-15 11:56:57
原創
60642 人瀏覽過

這篇文章帶給大家的內容是關於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])

}

登入後複製

輸出結果:

js中遍歷物件(5種)和遍歷數組(6種)的方法總結

#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])

});

登入後複製

輸出結果:

js中遍歷物件(5種)和遍歷數組(6種)的方法總結

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])

});

登入後複製

輸出結果:

js中遍歷物件(5種)和遍歷數組(6種)的方法總結

#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])

});

登入後複製

傳回結果:

js中遍歷物件(5種)和遍歷數組(6種)的方法總結


js中遍歷物件(5種)和遍歷數組(6種)的方法總結##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));

登入後複製

輸出結果:

二.遍歷陣列方法

js中遍歷物件(5種)和遍歷數組(6種)的方法總結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);

})

登入後複製
輸出結果:

js中遍歷物件(5種)和遍歷數組(6種)的方法總結#2.map

可以對遍歷的每一項做對應的處理,傳回每次函數呼叫的結果所組成的陣列

1

2

3

4

5

eg:

var arr = ['a''b''c''d'];

arr.map(function(item, index, array) {

  console.log(item, index);

})

登入後複製
輸出結果:

js中遍歷物件(5種)和遍歷數組(6種)的方法總結##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])

}

登入後複製
#輸出結果:


js中遍歷物件(5種)和遍歷數組(6種)的方法總結

#5.for...of

(es6)

只遍歷出value,不能遍歷出下標,可遍歷出Symbol資料類型的屬性,此方法作為遍歷所有資料結構的統一的方法js中遍歷物件(5種)和遍歷數組(6種)的方法總結

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中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
怎麼實作 JavaScript點與圓的位置關係
來自於 1970-01-01 08:00:00
0
0
0
JavaScript鉤子函數是什麼?
來自於 1970-01-01 08:00:00
0
0
0
c++ 呼叫javascript
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板