JS에서 객체 속성을 탐색하는 방법 소개

2016년 6월에 ECMAScript 2016이 출시된 것과 같은 기간에 JavaScript 개발자들은 또 다른 훌륭한 제안 세트가 4단계(완료)에 도달했다는 소식을 듣고 기뻐했습니다.

번역자 주: 이 기사를 번역할 때 이러한 기능이 지원되었습니다.

다음 함수를 나열해 보겠습니다.

• Object.values()Object.values()和Object.entries()

• 异步函数

• str.padStart()和str.padEnd()

• Object.getOwnPropertyDescriptors()

• 在函数参数列表和调用中的拖尾逗号(Trailing commas)

新提议包括在2017年要发布的ESMAScript2017标准中，可能会在2017年夏天发布。请注意，这个功能列表可能会一直增长。太好了！

当然，你不必等到ES2017发布，或者直到供应商（浏览器）实现了新功能！Babel已经包含了这些已完成的提案中的大部分特性。

本文主要讨论如何改进对象属性的迭代：

• 使用Object.values()获取对象属性

• 使用Object.entries()获取属性key/value

乍一看，这些静态函数似乎并没有带来显著的价值。但是当它们与for...of循环配合使用，你会得到一种简而美的遍历对象的属性的方式。

让我们一探究竟吧。

自己的和可枚举的属性

正如你可能已经知道的那样，Object.keys()只访问对象本身和可枚举的属性。这是合理的，因为大多数时候只有这些属性需要评估。

让我们看一个对象拥有和继承属性的例子。Object.keys()只返回自己的属性键（key）：

let simpleColors = {
  colorA: 'white',
  colorB: 'black'
};
let natureColors = {
  colorC: 'green',
  colorD: 'yellow'
};
Object.setPrototypeOf(natureColors, simpleColors);
Object.keys(natureColors); // => ['colorC', 'colorD']
natureColors['colorA'];    // => 'white'
natureColors['colorB'];    // => 'black'

Object.keys(natureColors)返回natureColors对象自身和可枚举的属性键：['colorC', 'colorD']。natureColors包含从simpleColors原型对象继承的属性。然而，Object.keys()函数会跳过它们。

Object.values()和Object.entries()访问对象的属性采用相同的标准：拥有和可枚举属性。让我们来看看：

let simpleColors = {  
    colorA: 'white',
    colorB: 'black'
};
let natureColors = {  
    colorC: 'green',
    colorD: 'yellow'
};

Object.values(natureColors); // => ['green', 'yellow']
Object.entries(natureColors);  // => [ ['colorC', 'green'], ['colorD', 'yellow'] ]

现在请注意和for...in不同之处。循环遍历可枚举的自己和继承的属性。下面的例子说明了这一点：

let simpleColors = {  
    colorA: 'white',
    colorB: 'black'
};
let natureColors = {  
    colorC: 'green',
    colorD: 'yellow'
};

let enumerableKeys = [];  
for (let key in natureColors) {  
    enumerableKeys.push(key);
}
enumerableKeys; // => ["colorC", "colorD", "colorA", "colorB"]

enumerableKeys数组包含natureColors对象自己属性的键：'colorC'和'colorD'。

此外，for...in遍历从simpleColors原型中继承过来的属性键：'colorA'和'colorB'。

Object.values()返回属性值

为了区分Object.values()的好处，让我们先看看在2017年之前获取对象的属性值是怎么来实现的。

首先使用Object.keys() 및 Object.entries()

비동기 기능 🎜🎜🎜🎜str.padStart()🎜 및 str.padEnd()🎜🎜🎜🎜Object.getOwnPropertyDescriptors()🎜🎜🎜🎜후행 쉼표🎜🎜🎜새로운 제안은 2017년에 발표될 ESMAScript2017 표준에 포함되어 있으며 2017년 여름에 발표될 수도 있습니다. 이 기능 목록은 계속해서 늘어날 수 있습니다. 매우 좋은! 🎜🎜 물론 ES2017이 출시되거나 공급업체(브라우저)가 새로운 기능을 구현할 때까지 기다릴 필요는 없습니다! Babel🎜에는 이미 완성된 제안에 대부분의 기능이 포함되어 있습니다. 🎜🎜이 문서에서는 주로 객체 속성의 반복을 개선하는 방법에 대해 설명합니다. 🎜🎜🎜🎜Object.values()를 사용하여 객체 속성을 얻습니다.🎜🎜🎜Object.entries 사용 () code><code>키/값 속성 가져오기🎜🎜얼핏 보면 이러한 정적 함수는 큰 가치를 가져오지 않는 것 같습니다. 그러나 for...of 루프와 함께 사용하면 객체의 속성을 탐색하는 간단하고 아름다운 방법을 얻을 수 있습니다. 🎜🎜 알아봅시다. 🎜

소유 및 열거 가능한 속성

🎜이미 알고 있듯이 Object.keys()는 객체 자체와 열거 가능한 속성에만 액세스합니다. 대부분의 경우 이러한 속성만 평가하면 되므로 이는 합리적입니다. 🎜🎜객체가 속성을 소유하고 상속하는 예를 살펴보겠습니다. Object.keys()는 자체 속성 키(key)만 반환합니다. 🎜

let meals = {  
    mealA: 'Breakfast',
    mealB: 'Lunch',
    mealC: 'Dinner'
};
for (let key of Object.keys(meals)) {  
    let mealName = meals[key];
    // ... do something with mealName
    console.log(mealName); // => 'Breakfast' 'Lunch' 'Dinner'
}

🎜🎜🎜Object.keys(natureColors)natureColors반환 >객체 자체 및 열거 가능한 속성 키: ['colorC', 'colorD']. natureColors에는 simpleColors 프로토타입 객체에서 상속된 속성이 포함되어 있습니다. 그러나 Object.keys() 함수는 이를 건너뜁니다. 🎜🎜Object.values() 및 Object.entries()는 소유된 속성과 열거 가능한 속성이라는 동일한 기준을 사용하여 객체의 속성에 액세스합니다. 살펴보겠습니다: 🎜

let meals = {  
    mealA: 'Breakfast',
    mealB: 'Lunch',
    mealC: 'Dinner'
};
for (let mealName of Object.values(meals)) {  
    console.log(mealName); // => 'Breakfast' 'Lunch' 'Dinner'
}

🎜🎜🎜이제 for...in과의 차이점을 알아두세요. 열거형의 자체 속성과 상속 속성을 반복합니다. 다음 예에서는 이를 보여줍니다. 🎜

let meals = {  
    mealA: 'Breakfast',
    mealB: 'Lunch',
    mealC: 'Dinner'
};
for (let [key, value] of Object.entries(meals)) {  
    console.log(key + ':' + value); // => 'mealA:Breakfast' 'mealB:Lunch' 'mealC:Dinner'
}

🎜🎜🎜enumerableKeys 배열에는 natureColors 객체의 자체 속성인 'colorC' 및 'colorD'의 키가 포함되어 있습니다. 🎜🎜또한 for...in은 simpleColors 프로토타입에서 상속된 속성 키인 'colorA' 및 '를 반복합니다. colorB '. 🎜

Object.values()는 속성 값을 반환합니다

🎜 Object.values()의 이점을 구별하기 위해 먼저 속성 값을 얻는 방법을 살펴보겠습니다. 2017년 이전에 목표를 달성하는 것입니다. 🎜🎜먼저 Object.keys()를 사용하여 속성 키를 수집한 다음 속성 접근자를 사용하고 해당 값을 추가 변수에 저장합니다. 예를 들어보겠습니다: 🎜

let greetings = {  
    morning: 'Good morning',
    midday: 'Good day',
    evening: 'Good evening'
};
let greetingsMap = new Map(Object.entries(greetings));  
greetingsMap.get('morning'); // => 'Good morning'  
greetingsMap.get('midday');  // => 'Good day'  
greetingsMap.get('evening'); // => 'Good evening'

🎜🎜🎜

meals是一个普通的JavaScript对象。使用Object.keys(meals)和for...of的循环枚举出对象键值。代码看起来很简单，但是可以通过去掉let mealName = meals[key]来优化它。

通过使用Object.values()可以直接访问对象属性值，可以实现优化。优化代码后如下：

let meals = {  
    mealA: 'Breakfast',
    mealB: 'Lunch',
    mealC: 'Dinner'
};
for (let mealName of Object.values(meals)) {  
    console.log(mealName); // => 'Breakfast' 'Lunch' 'Dinner'
}

由于Object.values(meals)返回数组中的对象属性值，因此通过for...of循环把对象的属性值直接分配给mealName，因此不需要添加额外的代码，就像前面的例子那样。

Object.values()只做一件事，但做得很好。这也是我们写代码的正确姿势。

Object.entries()返回属性值和键

Object.entries()很强大，它返回对象的键和属性值，而且它们是成对的，比如： [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]。

可能直接使用有些不爽。幸运的是，数组在for...of循环中传入let [x, y] = array，很容易得到对应的访问键和值。

下面是Object.entries()的示例：

let meals = {  
    mealA: 'Breakfast',
    mealB: 'Lunch',
    mealC: 'Dinner'
};
for (let [key, value] of Object.entries(meals)) {  
    console.log(key + ':' + value); // => 'mealA:Breakfast' 'mealB:Lunch' 'mealC:Dinner'
}

Object.entries(meals)返回meal对象的属性键和值到一个数组中。然后通过for...of循环解构性参数let [key, value]把数组中的值分配给key和value变量。

正如所见，访问的键和值现在已经是一种舒适而且易于理解的形式。由于Object.entries()返回一个与数组解构性赋值相兼容的集合，因此没有必要添加额外的赋值或声明行。

Object.entries()将普通对象导入到Map时是有用的。由于Object.entries()返回Map构造函数所接受的格式：key和value成对。因此问题变得无关紧要。

让我们创建一个JavaScript对象并将其导出到Map中：

let greetings = {  
    morning: 'Good morning',
    midday: 'Good day',
    evening: 'Good evening'
};
let greetingsMap = new Map(Object.entries(greetings));  
greetingsMap.get('morning'); // => 'Good morning'  
greetingsMap.get('midday');  // => 'Good day'  
greetingsMap.get('evening'); // => 'Good evening'

new Map(Object.entries(greetings))构造函数使用一个参数来调用，这个参数是greeting对象中导出的数组的一个键值对。

如预期的那样，map实例greetingsMap包含greetings对象导入的属性。可以使用.get(key)方法访问这些数据。

有趣的是，Map提供了与Object.values()和Object.entries()方法相同的方法（只有它们返回迭代器），以便提取Map实例的属性值或键值对：

• Map.prototype.values()等价于Object.values()

• Map.prototype.entries()等价于Object.entries()

Map提供了普通对象的改良版。你可以获得Map的大小（对于一个简单的对象，你必须手动操作），并使它作为键或对象类型（简单对象把键当作一个字符串原始类型）。

我们来看看map的.values()和.entries()方法返回什么：

let greetings = {  
    morning: 'Good morning',
    midday: 'Good day',
    evening: 'Good evening'
};
let greetingsMap = new Map(Object.entries(greetings));  
[...greetingsMap.values()]; // =>['Good morning', 'Good day', 'Good evening']
[...greetingsMap.entries()]; // =>[['morning','Good morning'],
                       ['midday','Good day'],['evening','Good evening']]

注意：greetingsMap.values()和greetingsMap.entries()返回迭代器对象（Iterator Objects）。将结果放入一个数组，扩展运算符...是必要的。在for...of循环语句中可以直接使用迭代器。

关于顺序上的笔记

JavaScript对象是简单的键值映射。所以对象的属性的顺序是无关紧要的。在大多数情况下，你不应该依赖它。

然而，ES2015已经对迭代的方式提供了标准化的要求：首先是有序的数字字符，然后是插入顺序的字符串，然后是插入顺序的符号（symbols）。在ES5和较早的标准中，属性的顺序没有指定。

如果你需要一个有序的集合，推荐的方法是将数据存储到数组或集合中。

总结

Object.values()和Object.entries()是为JavaScript开发人员提供函数的另一个改进步骤的新标准化 。

Object.entries()는 키와 값을 다른 변수에 쉽게 할당할 수 있도록 데이터 그룹 구조 분해 매개변수를 사용하여 실행하는 것이 가장 좋습니다. 또한 이 기능을 사용하면 일반 JavaScript 개체 속성을 Map 개체로 쉽게 내보낼 수 있습니다. Map은 기존 map(또는 hash) 동작을 더 잘 지원할 수 있습니다. Object.entries()最好用数据组解构性参数来执行，这样键和值就可以很容易地分配给不同的变量。这个函数还可以很容易地将普通JavaScript对象属性导出到Map对象中。Map能够更好地支持传统的map（或hash）行为。

注意：object.values()和object.entries()

참고: object.values() 및 object.entries()는 결정되지 않은 순서로 데이터를 반환합니다. 그러니 명령에 의존하지 마세요.

영어 원문 주소: https://dmitripavlutin.com/how-to-iterate-easily-over-object-properties-in-javascript/

번역 주소: https://www.w3cplus.com/javascript/ How-to-iterate-easily-over-object-properties-in-javascript.html

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개

를 방문하세요! ! 🎜

위 내용은 JS에서 객체 속성을 탐색하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!