JavaScript 객체의 키 가져오기

1. Object.keys() 메소드를 사용하여 자바스크립트 객체의 키 가져오기
2. Object.entries(obj) 메소드를 사용하여 자바스크립트 객체의 키 가져오기
3. for 루프를 사용하여 자바스크립트 객체의 key 가져오기

자바스크립트 객체는 키-값 쌍의 모음입니다. 자바스크립트 객체에서 값을 가져오려면 키가 필요합니다. 키-값 쌍은 클라이언트-서버 통신 및 JavaScript 프로그래밍에서 널리 사용됩니다. 키가 있는 경우 JSON 개체에서 값을 검색하는 것을 알고 있습니다. 그러나 key 이름이 없으면 어떻게 됩니까? Javsscript 객체에서 값을 어떻게 얻습니까? 자바스크립트 객체에서 키를 가져올 수 있는 몇 가지 방법을 살펴보겠습니다.

Object.keys() 메소드를 사용하여 자바스크립트 객체의 키 가져오기

Object.keys() 함수는 자바스크립트 객체의 키를 포함하는 배열을 반환합니다. 자바스크립트 객체를 Object.keys() 함수에 매개변수로 전달합니다. 출력 배열에는 원래 자바스크립트 객체에 있는 것과 동일한 순서로 키가 포함됩니다. Object.keys()에 배열을 전달하면 배열 인덱스가 출력으로 반환됩니다. 그리고 매개변수 객체에 인덱스가 있는 경우 Object.keys()는 해당 인덱스의 배열을 반환합니다. Object.keys() 함수의 사용법과 동작을 이해하려면 다음 코드를 참조하십시오.

var fruitsArr1 = ['Apple', 'Orange', 'Mango', 'Banana'];
var fruitsObj2 = {0: 'Apple', 4: 'Orange', 2: 'Mango', 3: 'Banana'};
var fruitsObj3 = {'id': '1', 'name': 'mango', 'color': 'yellow'};
console.log(Object.keys(fruitsArr1));
console.log(Object.keys(fruitsObj2));
console.log(Object.keys(fruitsObj3));

출력:

["0", "1", "2", "3"]
["0", "2", "3", "4"]
["id", "name", "color"]

키가 숫자인 경우 Object.keys() 함수는 숫자 키의 배열을 정렬된 순서로 반환합니다. fruitsObj2에는 0, 4, 2, 3 번호가 지정된 키가 있습니다. 그러나 Object.Keys() 함수를 적용하면 키를 정렬된 순서로 ["0", "2", "3", "4"]로 반환합니다. 키-값은 원래 자바스크립트 개체에 대해 했던 것과 동일한 값 매핑을 계속 유지합니다. 예를 들어, fruitsObj2는 4: "Orange" 및 2: "Mango"를 보유하지만 Object.keys(fruitsObj2)는 해당 주문을 "2", "4"로 반환했습니다. console.log가 2 및 4 키의 값인 경우 올바른 값을 출력으로 얻습니다. 따라서 Object.keys가 정렬된 순서로 배열 또는 개체의 숫자 키를 반환하더라도 함수는 실제 키-값 매핑에서 아무 것도 수정하지 않았습니다. 다음 코드를 참조하십시오.

console.log(fruitsObj2[2]);
console.log(fruitsObj2[4]);

출력:

Mango
Orange

Object.entries(obj) 메소드를 사용하여 자바스크립트 객체의 키 가져오기

Object.entries(obj) 메소드는 Object.keys() 함수보다 다양하고 유연합니다. 전체 개체를 작은 배열로 나눕니다. 각 배열은 [key, value] 형식의 키-값 쌍으로 구성됩니다. Object.keys()를 사용하면 객체의 키만 가져오지만 Object.entries(obj)를 사용하면 keys와 해당 values를 포함하여 객체의 모든 항목을 가져올 수 있습니다. Object.entries(obj)는 일반적으로 사용되는 방법이 아닙니다. 대부분의 시나리오에서 객체에서 키를 가져와야 합니다. 해당 값은 ‘키’를 사용하여 쉽게 얻을 수 있습니다.

통사론

Object.entries(object)

매개변수

Object.keys() 메소드와 동일하게 Object.entries(obj)는 javascript 객체를 매개변수로 받아들입니다.

반품

Object.entries(obj)는 배열로 소멸된 키-값 쌍을 반환합니다. 반환 유형은 배열의 배열이며, 각 하위 배열에는 키와 값이라는 두 가지 요소가 있습니다. [[key1, value1], [key2, value2], [key3, value3] ... ]와 같은 것. 이 함수는 개체 속성의 순서를 유지합니다. 배후 구현에서 키-값 쌍은 개체 속성을 반복하여 형성됩니다. Object.entries() 함수의 동작을 더 잘 이해하려면 다음 코드를 참조하세요. 우리는 JSON.stringify()를 사용하여 함수에 의해 출력된 값의 사람이 읽을 수 있는 문자열 버전을 얻습니다.

var fruitsObj3 = {'id': '1', 'name': 'mango', 'color': 'yellow'};
console.log(JSON.stringify(Object.entries(fruitsObj3)));

출력:

"[["id","1"],["name","mango"],["color","yellow"]]"

다른 방식으로 Object.entries()를 사용할 수 있습니다. 자바스크립트 객체를 반복하고 속성 키와 해당 값을 기록할 수 있습니다. 접근 방식은 다음 코드 조각에 설명되어 있습니다.

for (const [key, value] of Object.entries(fruitsObj3)) {
  console.log(`${key}: ${value}`);
}

출력:

id: 1
name: mango
color: yellow

Object.entries() 함수에서 key만 가져오는 데 관심이 있는 경우 key를 기록하고 값 부분을 버릴 수 있습니다.

for 루프를 사용하여 자바스크립트 객체의 key 가져오기

간단한 for 루프를 사용하여 객체에서 키를 가져올 수 있습니까? for 루프의 일반적으로 알려진 기능이 아닙니다. for-in 조합을 사용하여 배열에 대해 수행하는 것처럼 모든 자바스크립트 개체를 통해 반복할 수 있습니다. 객체의 key를 보유하는 i(반복자)와 객체의 key에 해당하는 값을 보유하는 object[i]를 사용하여 각 매개변수를 반복합니다. 개념을 더 잘 이해하기 위해 다음 코드를 살펴보겠습니다.

var obj = {'id': '1', 'name': 'mango', 'color': 'green'};
for (let i in obj) {
  console.log(i);       // key
  console.log(obj[i]);  // value against the key
}

출력:

id
1
name
mango
color
green

var a = {
  'id': '1',
  'name': 'mango',
  'color': {'name': 'yellow', 'appearance': 'bright'}
};
for (let i in a) {
  console.log(i);
  console.log(a[i]);
}

출력:

id
1
name
mango
color
{name: "yellow", appearance: "bright"}