>웹 프론트엔드 >JS 튜토리얼 >js에서 객체(5개 유형) 순회 및 배열(6개 유형) 순회 방법 요약

js에서 객체(5개 유형) 순회 및 배열(6개 유형) 순회 방법 요약

不言
不言원래의
2018-08-15 11:56:5760560검색

이 글은 js에서 객체 순회(5개 유형) 및 배열(6개 유형) 순회 방법을 요약한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 돕다.

1. 객체 탐색 방법

1.for...in
탐색 출력은 객체 자체의 속성과 프로토타입 체인의 열거 가능한 속성(Symbol 속성 제외), 프로토타입 chain에 대한 속성의 최종 출력은 자체의 열거 가능한 속성이 먼저 탐색된 다음 프로토타입 체인의

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입니다. .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])
});

출력 결과:

js에서 객체(5개 유형) 순회 및 배열(6개 유형) 순회 방법 요약

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

출력 결과:

js에서 객체(5개 유형) 순회 및 배열(6개 유형) 순회 방법 요약

4.Reflect.ownKeys()
열거 가능 여부에 관계없이 속성 이름이 기호 또는 문자열인지에 관계없이 객체 자체의 모든 속성을 반환합니다.

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개 유형) 순회 방법 요약

5. .keys
밑줄 플러그인의 탐색 방법을 사용하면 객체 자체만 탐색할 수 있습니다. 열거 가능한 속성

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개 유형) 순회 방법 요약

2 배열 방법 탐색

1.forEach

eg:
var arr = ['a', 'b', 'c', 'd'];
arr.forEach(function(value, index) {
  console.log('value=', value, 'index=', index);
})

출력 결과:

js에서 객체(5개 유형) 순회 및 배열(6개 유형) 순회 방법 요약

2.map
순회한 각 항목을 그에 따라 처리하고 각 함수 호출의 결과로 구성된 배열을 반환할 수 있습니다.

eg:
var arr = ['a', 'b', 'c', 'd'];
arr.map(function(item, index, array) {
  console.log(item, index);
})

출력 결과:

js에서 객체(5개 유형) 순회 및 배열(6개 유형) 순회 방법 요약

3.for 루프 탐색

eg:
var arr = ['a', 'b', 'c', 'd'];
for (var i = 0; i <p> 출력 결과:</p><p><img src="https://img.php.cn//upload/image/127/903/153/1534304544202661.png" title="1534304544202661.png" alt="js에서 객체(5개 유형) 순회 및 배열(6개 유형) 순회 방법 요약"><span class="img-wrap"></span></p><p><strong><em>4.for...in</em></strong></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)
값만 탐색할 수 있고 아래 첨자를 탐색할 수는 없으며 기호 데이터 유형의 속성을 탐색할 수 있습니다. 이 방법은 모든 데이터를 탐색하기 위한 통합 방법입니다. 구조

eg:
var arr = ['a', 'b', 'c', 'd'];
for (var value of arr) {
  console.log('value', value)
}

출력 결과:

js에서 객체(5개 유형) 순회 및 배열(6개 유형) 순회 방법 요약

6. 밑줄 플러그인 사용

eg:
var arr = ['a', 'b', 'c', 'd'];
var _ = require('underscore');
_.each(arr, function(value, index, arr) {
  console.log(value, index, arr)

})

출력 결과:

js에서 객체(5개 유형) 순회 및 배열(6개 유형) 순회 방법 요약

관련 권장 사항:

JS 탐색의 차이점 배열과 객체 그리고 객체, 배열, 속성을 재귀적으로 순회하는 방법에 대한 자세한 설명

js 객체의 속성 순회 Code

js가 배열을 순회하는 두 가지 방법

위 내용은 js에서 객체(5개 유형) 순회 및 배열(6개 유형) 순회 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.