JavaScript 객체 - 객체의 힘을 변환하는 방법키를 누릅니다.Values().항목 ()

우리는 어떻게 대상을 교체합니까?우리는 어떻게 모든 키 값을 순환해서 모든 데이터를 얻습니까?
우리는 보통 for-in 순환을 통해 이 점을 실현할 수 있다.

const obj = { a: 1, b: 2 };

for (const key in obj) {
  console.log("key", key);
  console.log("value", obj[key]);
}

// key a
// value 1
// key b
// value 2

이것은 대상 데이터를 교체하는 방법의 하나다.그러나 수조에 비해 우리는 서로 다른 방식으로 대상 데이터를 교체하는 능력에 한계가 있다.이 대상은 우리가 원하는 방식으로 그것을 사용할 수 있는 그렇게 많은 방법이 없다.
많은 상황에서 우리는 대상 데이터를 그룹 데이터로 변환할 필요가 있음을 발견할 수 있다. 특히 우리가 모든 다른 그룹 방법을 사용하여 더욱 동적인 방식으로 데이터를 변환하기를 원한다면.
일부 내장된 대상 방법을 빌려 우리는 세 가지 다른 방식으로 대상을 수조로 전환할 수 있다.이러한 방법은 Object.keys, Object.values, Object.entries이다.

대상키()

이 방법 중 가장 먼저 이 언어에 도착한 것은 Object.keys 이다.말 그대로 대상의 키를 가져와 그룹으로 변환할 수 있습니다.사용자 데이터가 있다고 가정하면 다음과 같습니다.

const user = {
  name: "John",
  age: 29,
};

사용자 객체에서 사용하는 경우Object.keys

console.log(Object.keys(user)); // ["name", "age"]

우리는 하나의 수조를 얻었는데, 그 중 name 과 age 은 원소였다.대상의 키는 항상 문자열이기 때문에 그룹 요소가 되면 문자열도 됩니다.

실제 용도 - 객체.키()

그런데 이게 무슨 가치가 있을까요?
가치 있는 일은 우리가 실제로 열쇠의 이름을 알 수 있다는 것이다.그 전에 우리는 대상 자체의 키에 접근할 능력이 없고 속성만 있었다.따라서 이것은 우리에게 주어진 속성이 존재하는지 확인하는 새로운 능력을 주었다.
현재 Object.keys 를 사용하면 대상이 특정한 이름을 가진 키를 포함하고 있는지 어떻게 검사할 수 있습니다.이런 상황에서는age라는 키일 수도 있는데...
우리는 주어진 문자열이 포함 방법의 요소로 존재하는지 확인하기 위해 그룹 방법을 알고 있다.그래서 우리는 Object를 사용할 수 있다.열쇠, 그리고 체인에 포함됩니다.
이 작업의 결과를 변수 ageExists 에 저장하여 기록할 수 있습니다.

const ageExists = Object.keys(user).includes("age");
console.log(ageExists);

우리는 실현되었다.이것은 하나의 대상에 주어진 키가 존재하는지 아닌지를 판단하는 좋은 방법이다.
만약 우리도 대상에서 값을 얻고 싶다면?현재 우리는 모든 수조 방법을 사용할 수 있으며, 관건적인 요소를 비추고, 원시 사용자 대상의 속성 접근을 사용하여 그것들을 얻을 수 있다.
따라서 맵에 대해 모든 원소는 prop 또는 key 이라고 할 수 있다.주의, 우리는 반드시 이곳에서 점 속성 접근이 아니라 네모난 괄호 문법을 사용해야 한다.왜?
모든 관건적인 요소는 서로 다른 동적 값을 가지고 있기 때문이다.동적 값 또는 변수는 계산된 속성 이름에만 적용되므로 중괄호를 사용해야 합니다.

Object.keys(user).map((key) => user[key]);

그리고 우리는 얻은 수조를 values라는 변수에 넣고 우리가 얻은 것을 보았다.

const values = Object.keys(user).map((key) => user[key]);
console.log(values); // ["John", 29]

대상값 ()

현재 대상 값을 더 쉽게 얻을 수 있는 방법이 있다.이것이 바로 우리가 Object를 사용하는 이유다.의 값입니다.우리는 이전에 작성한 모든 코드를 Object로 바꿀 수 있다.값을 입력하고 속성 값을 가져올 객체를 전송합니다.

// const values = Object.keys(user).map(key => user[key])
// console.log(values)

const values = Object.values(user);
console.log(values); // ["John", 29]

우리는 같은 결과를 얻었다.

실제 용도 - 객체.값 ()

우리는 Object.values로 무엇을 할 수 있습니까?만약 우리가 한 대상이 있는데 그 중에는 사용자의 매달 일부 비용이 포함되어 있다.

const monthlyExpenses = {
  food: 400,
  rent: 1700,
  insurance: 550,
  internet: 49,
  phone: 95,
};

이것보다 더 많은 속성이 있다면 상상해 보세요.우리는 어떻게 이 모든 종합 비용의 총계를 쉽게 얻을 수 있습니까?
우리는 for-in 순환이나 다른 방법을 사용하여 이 점을 실현할 수 있지만, 이것은 단일 그룹에서 모든 값을 던지는 것보다 훨씬 간단하다.우리는 어떻게 reduce 를 사용하여 디지털 그룹의 합을 쉽게 얻을 수 있는지 안다.
니가 할 수 있는지 없는지 봐.당신은 어떻게 Object.values과reduce를 결합시켜 존의 매달 모든 비용의 총계를 얻습니까?
우선, 우리는 변수monthlyTotal를 만들어서 값을 얻는 수조, 즉 항목당 비용의 원가를 만들 수 있다.그리고 reduce 방법을 사용하면 우리는 한 줄에서 화해를 구할 수 있다.우선 우리의 반환 값은 숫자이기 때문에 우리의 초기 값은 0이다.그리고 우리는 누적기가 있는데, 모든 원소는 비용이다.이 조작의 약어는acc + expense이다.우리의 화살표 함수는 암시적으로 되돌아오기 때문에, 누적기는 항상 되돌아옵니다.

const monthlyTotal = Object.values(monthlyExpenses).reduce(
  (acc, expense) => acc + expense,
  0
);

console.log(monthlyTotal); // 2794

따라서 우리의 매달 총수는 2794명이다.이것은 아마도 이런 조작이 할 수 있는 가장 간결한 것일 것이다.따라서 Object.values 주어진 대상의 모든 값을 처리하는 데 더 유연한 방법이 필요한 경우에 유용하다.

실제 용도 - 객체.항목 ()

마지막으로, 전체 객체 (키 및 값) 를 단일 그룹에 매핑하려면 Object.entries 를 사용합니다.

console.log(Object.entries(user)); // (2) [Array(2), Array(2)]

이것은 우리에게 재미있는 결과를 주었다. 수조.그렇다면 키와 값을 동시에 가지면 무슨 소용이 있을까?
만약 우리가 더 복잡한 대상을 가지고 있다면, 아마도 대량의 사용자 데이터를 포함하는 플러그인 대상일 것이다. 그 중 모든 키는 사용자의 id와 같다. 사실상, 나는 미래에 외부 데이터를 가져오는 것을 처리할 때, 당신은 당신에게 되돌아오는 데이터를 얻을 수 있을 것이라고 보장할 수 있다. 보기에 이렇다.

const users = {
  "1": {
    name: "John",
    age: 29,
  },
  "2": {
    name: "Jane",
    age: 42,
  },
  "3": {
    name: "Fred",
    age: 17,
  },
};

가령 우리가 이 대상에서 매우 구체적인 데이터를 얻어야 한다고 가정하자. 예를 들어 우리는 사용자의 이름, 나이, id를 포함하여 사용자의 데이터만 얻고 싶지만, 특히 20세 이상의 사용자를 대상으로 한다.
만약 우리가 대상의 방법에만 의존할 수 있다면, 우리는 중첩된 대상에서 이 데이터를 얻을 수 없을 것이다.
목표가 있어야 돼.항목은 우리의 대상을 수조로 바꾸기 때문에 우리는 이 문제를 해결할 수 있다. 문제없다.
먼저 사용자를 Object에 전달합니다.입구와 콘솔.기록해서 우리가 무엇을 얻었는지 보자. 왜냐하면 우리가 얻은 데이터는 두 대상의 두 배이기 때문이다.포인트나 대상.가치관:

console.log(Object.entries(users));

// 0: (2) ["1", {…}]
// 1: (2) ["2", {…}]
// 2: (2) ["3", {…}]

모든 플러그인 그룹에 대해 우리는 키나 사용자 id를 첫 번째 요소로 하고, 값이나 사용자 대상을 두 번째 요소로 합니다.

매핑/필터를 단일 Reduce로 교체

현재, 우리는 임무를 완성하는 데 필요한 모든 수조 방법에 연결할 수 있다.우리가 무엇을 하고 싶은지 생각해 보자. 우리는 데이터를 하나의 대상 그룹으로 변환해야 하고, 조건에 따라 필터를 해야 한다.이 두 가지 기준을 바탕으로 우리가 어떤 수조 방법을 사용해야 할지 생각해 보자.
너는 우리가 두 가지 방법을 사용해야 한다고 말할 수 있다. map과filter. 왜냐하면 우리는 수조를 동시에 변환하고 필터하고 싶기 때문이다.따라서 한 가지 방법은 연쇄map를 한 다음에 여과하는 것이다.그러나 맵과 필터 변환을 위한 빠른 기술을 제공합니다.우리가 이 두 가지 방법에 대한 깊은 연구를 바탕으로 우리는 이 두 가지 방법에 대해 무엇을 이해합니까?그것들은 모두reduce로 실현할 수 있다.기왕 그것들이 모두 귀약 연산이니, 우리는 귀약으로 그것들을 대체할 수 있다.사실상, 대부분의 경우, 수조 방법 링크가 필요하다고 생각하면,reduce로 대체할 수 있습니다.
따라서reduce를 사용하면 기본 구조를 만들 것입니다.우리는 누적기를 사용하여 리셋 함수를 만들고 우리가 얻고 싶은 최종 값에 따라 초기 값을 제공합니다.

Object.entries(users).reduce((acc) => {}, []);

그리고 현재 원소에 대해 우리는 다시 수조 분해를 사용하여 첫 번째와 두 번째 원소를 얻을 수 있다.첫 번째, 키는 id라고 불리고, 그 값, 사용자 데이터는 사용자라고 부른다.

Object.entries(users).reduce((acc, [id, user]) => {}, []);

현재, 그룹 요소의age 속성이 20보다 크면, 조건적으로 최종 그룹에 넣고, 우리는if문장을 추가할 수 있습니다.만약 user.age > 20 물체를 수집기에 밀어 넣는다.이 대상을 만들기 위해 우리는 대상의 속성을 확장하고 마지막에 추가할 수 있다id.id 는 속성 및 값에 사용되므로 객체 속기를 사용합니다.

Object.entries(users).reduce((acc, [id, user]) => {
  if (user.age > 20) {
    acc.push({ ...user, id });
  }
}, []);

마지막으로, 우리는 마지막에 누적기를 되돌리기만 하면 된다.결과수 그룹을 usersOver20 라는 새로운 변수에 넣고 기록합시다.

const usersOver20 = Object.entries(users).reduce((acc, [id, user]) => {
  if (user.age > 20) {
    acc.push({ ...user, id });
  }
  return acc;
}, []);
console.log(usersOver20);

현재 우리는 더욱 간결한 데이터 구조를 가지게 되었다. 이런 형식에서 사용자의 모든 데이터는 하나의 대상에 있다.대부분의 JavaScript 프레임워크에서는 이러한 데이터 집합이 가장 좋습니다. 이 데이터 집합은 대상을 요소로 하는 수조로 구성되어 있으며, 특히 브라우저에서 사용자에게 그 내용을 표시하기 위해 교체됩니다.

총결산

데이터 구조가 대상처럼 더 정적이지만 더 동적인 방식으로 내용을 조작해야 할 때 우리가 여기서 소개한 방법 중 하나인 대상을 사용하십시오.키, 값 또는 항목
키와 값 (필요한 경우) 을 포함한 대상의 모든 내용에 접근할 수 있고, 작업을 완성하기 위해 다른 그룹 방법을 연결할 수도 있으며, (이 예와 같이), 필요에 따라 데이터를 변환하고 필터할 수도 있습니다.

이거 좋아요?React 캠프에 합류

The React Bootcamp 동영상, 메모지, 특별 보너스를 포함한 Learning React에 대한 모든 정보를 종합 패키지로 포장합니다.
수백 명의 개발자가 React를 파악하고, 꿈의 직장을 찾고, 미래를 관리하는 데 이미 사용된 내부 정보를 얻습니다.

열 때 알림을 받으려면 여기를 누르십시오