ES10의 Object.fromEntries()에 대한 심층 분석

이 기사에서는 ES10의 Object.fromEntries()에 대해 자세히 알아볼 수 있습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

우리는 Object.entries()가 객체를 자체 열거 가능한 속성을 가진 키-값 쌍의 배열로 변환한다는 것을 알고 있습니다. 마찬가지로 Object.entries() 是将对象转成一个自身可枚举属性的键值对数组。同样，我们也可以把键值对数组转成了对象。

const keyValuePair = [
  ['cow', '?'],
  ['pig', '?'],
]

Object.fromEntries(keyValuePair);
// { cow: '?', pig: '?' }

Object.fromEntries

---

我们知道，对象结构是一个是有键和值组合体，如下所示：

const object = {
  key: 'value',
};

基于这个逻辑，如果我们想将某个东西转成对象，就必须要传递键和值。

有两种类型的参数可以满足这些要求：

• 具有嵌套键值对的数组

• Map 对象

【推荐学习：javascript高级教程】

使用 Object.fromEntries 将数组转成对象

---

下面是个键-值对嵌套数组

const nestedArray = [
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
]

使用Object.fromEntries可以将该数组转成对象:

Object.fromEntries(nestedArray);
// { key 1: "value 1", key 2: "value 2"}

使用 Object.fromEntries 将 Map 转成对象

---

ES6 为我们带来了一个名为 map 的新对象，它与对象非常相似。

TC39：映射对象是键/值对的集合，其中键和值都可以是任意 ECMAScript 语言值。

我们来创建一个 Map 对象：

// 使用构造函数
const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
])

// 或者我们可以使用实例方法“set”
const map = new Map()
map.set('key 1', 'value 1')
map.set('key 2', 'value 2')

// 结果
Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

让我们使用Object.fromentries将 map 转换为一个对象

Object.fromEntries(map);
// { key 1: "value 1", key 2: "value 2"}

对象的类型错误：试图使用 Object.fromEntries 将 其它类型 转成对象

---

将下面的类型传入 Object.fromEntries 都会导致报错 caught TypeError。

确保传递值要有键-值对。

Object.fromEntries vs Object.entries

---

Object.fromEntries 是 Object.entries 反向。 Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，而Object.fromEntries() 方法把键值对列表转换为一个对象。

const object = { key1: 'value1', key2: 'value2' }

const array = Object.entries(object)
// [ ["key1", "value1"], ["key2", "value2"] ]


Object.fromEntries(array)
// { key1: 'value1', key2: 'value2' }

对象到对象的转换

---

如果你阅读了 TC39 提案，这就是引入此新方法的原因。 随着Object.entries的引入之前，要将一些非对象结构转成对象是比较麻烦的。

通常，当我们选择使用Object.entries，是因为它使我们能够访问许多漂亮的数组方法，例如filter。 但是在完成转换之后，我们有点被该数组所困扰。

const food = { meat: '?', broccoli: '?', carrot: '?' }

// ? 卡在这结果上...
const vegetarian = Object.entries(food).filter(
  ([key, value]) => key !== 'meat',
)
// [ ["broccoli", "?"], ["carrot", "?"] ]

好吧！ 我们可以利用所有这些有用的数组方法，但仍然可以返回对象。 最后，从对象到对象的转换?

const food = { meat: '?', broccoli: '?', carrot: '?' }

const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !== 'meat'),
)

// { broccoli: '?', carrot: '?' }

数组转成对象的替代方案

---

Object.fromEntries是 ES10 推出来，很新，可能浏览器支持度还够友好。 因此，让我们看一下如果将具有键值对结构的数组转成对象。

使用 reduce 方法将数组转成对象

将数组转换为对象的一种流行方法是使用reduce。

const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
])

function toObject(pairs) {
  return Array.from(pairs).reduce(
    (acc, [key, value]) => Object.assign(acc, { [key]: value}),
    {}
  )
}


// 结果
// { key1: 'value1', key2: 'value2' }

使用 库 将数组转成对象

Lodash 也提供了将键值对转换为对象的方法。

_.object

将数组转换为对象。 传递[key, value]对的单个列表，或键的列表和值的列表。

const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

_.object(array)
// { key1: 'value1', key2: 'value2' }

_.fromPairs

_.fromPairs 是 _.toPairs키-값 쌍 배열

을 객체로 변환할 수도 있습니다.

const array = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

_.fromPairs(array)
// { key1: 'value1', key2: 'value2' }

Object.fromEntries

---

우리는 아래와 같이 객체 구조가 키와 값의 조합이라는 것을 알고 있습니다.

rrreee

이 논리에 따르면, 무언가를 객체로 변환하려면 반드시 키와 값 을 전달합니다.

이러한 요구 사항을 충족하는 두 가지 유형의 매개 변수가 있습니다:

• 중첩된 키-값 쌍이 있는 배열
• 지도 object

【추천 학습: javascript 고급 튜토리얼】

Object.fromEntries를 사용하여 배열을 객체로 변환하세요.

🎜다음은 키-값 쌍의 중첩된 배열입니다.🎜🎜rrreee🎜Object.fromEntries 사용 배열을 객체로 변환하려면 배열을 객체로 변환하세요: 🎜rrreee🎜🎜Object.fromEntries를 사용하여 Map을 객체로 변환하세요. 🎜🎜🎜🎜ES6은 🎜map🎜이라는 이름의 새 객체를 제공합니다. 객체와 유사합니다. 🎜🎜🎜TC39: 맵 객체는 키/값 쌍의 모음입니다. 여기서 키와 값은 모두 임의의 ECMAScript 언어 값일 수 있습니다. 🎜🎜 🎜Map🎜 개체를 만들어 보겠습니다. 🎜rrreee🎜 Object.fromentries를 사용하여 🎜map🎜을 개체로 변환해 보겠습니다. 🎜rrreee🎜🎜 개체에 대한 유형 오류: Object .fromEntries를 사용하는 중입니다. 다른 유형을 객체로 변환 🎜🎜🎜🎜 다음 유형을 Object.fromEntries에 전달하면 caught TypeError 오류가 발생합니다. 🎜🎜🎜🎜🎜 🎜전달된 값에 키-값 쌍이 있는지 확인하세요🎜. 🎜🎜🎜Object.fromEntries와 Object.entries🎜🎜🎜🎜Object.fromEntries는 Object.entries와 반대입니다. Object.entries() 메서드는 주어진 개체의 열거 가능한 속성에 대한 키-값 쌍의 배열을 반환하는 반면, Object.fromEntries() 메서드는 키 목록을 변환합니다. -값 쌍을 개체로 만듭니다. 🎜🎜rrreee🎜🎜객체 대 객체 변환🎜🎜🎜🎜 TC39 제안🎜을 읽어보시면, 이것이 바로 이 새로운 방법이 도입된 이유입니다. Object.entries가 도입되기 전에는 일부 비객체 구조를 객체로 변환하는 것이 번거로웠습니다. 🎜🎜🎜보통 Object.entries를 사용하기로 선택한 이유는 filter와 같은 여러 가지 아름다운 배열 메서드에 대한 액세스를 제공하기 때문입니다. 그러나 변환을 수행한 후에는 해당 배열에 약간의 어려움이 있습니다. 🎜rrreee🎜알겠습니다! 이러한 유용한 배열 메서드를 모두 활용하고 객체를 반환할 수 있습니다. 마지막으로 객체에서 객체로의 변환이요?🎜rrreee🎜🎜배열을 객체로 변환하는 대안🎜🎜🎜🎜Object.fromEntries이 ES10에서 출시되었습니다. 이는 매우 새로운 기능입니다. 아마도 브라우저 지원은 다음과 같습니다. 충분히 친절하다. 그럼 키-값 구조의 배열을 객체로 변환하는 방법을 살펴보겠습니다. 🎜🎜

🎜reduced 메소드를 사용하여 배열을 객체로 변환🎜

🎜배열을 객체로 변환하는 인기 있는 방법은 reduce를 사용하는 것입니다. 🎜rrreee

🎜라이브러리를 사용하여 배열을 객체로 변환🎜

🎜Lodash는 키-값 쌍을 객체로 변환하는 메서드도 제공합니다. 🎜

🎜_.object🎜

🎜배열을 객체로 변환합니다. [key, value] 쌍의 단일 목록 또는 키 목록과 값 목록을 전달합니다. 🎜rrreee

🎜_.fromPairs🎜

🎜_.fromPairs는 _.toPairs와 반대이며 해당 메서드는 키-값 쌍 객체를 반환합니다. 🎜rrreee🎜🎜브라우저 지원🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜원본 주소: https://medium.com/@samanthaming/javascript-object-fromentries-4395660334d1🎜 🎜 🎜🎜작성자: Shadeed 🎜🎜 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 ES10의 Object.fromEntries()에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!