Несколько способов легко перемещаться по свойствам объекта в JS

программист JavaScript

оригинал:Рисовое путешествие avlutin.com/how-to-ITER…

Переводчик: Front-end Xiaozhi

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

собственное перечислимое свойство

Object.keys()Метод возвращает массив, состоящий из собственных перечисляемых свойств данного объекта, порядка и использования имен свойств в массиве.for...inПорядок, возвращаемый при циклическом просмотре объекта, является согласованным. Если ни один ключ-значение объекта не является перечисляемым, будет возвращен массив ключей.

Это разумно, поскольку большую часть времени вам нужно сосредоточиться только на свойствах самого объекта.

Давайте рассмотрим пример объекта, который имеет собственные и унаследованные свойства,Object.keys()Возвращать только собственные ключи свойств:

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.setPrototypeOf()Метод устанавливает прототип указанного объекта (то есть внутреннее свойство [[Prototype]]) в другой объект или нуль.

Object.keys(natureColors)вернутьnatureColorsСобственные перечисляемые ключи свойств объекта:['colorC'，'colorD'].

natureColorsсодержит отsimpleColorsСвойства, унаследованные объектами-прототипами, ноObject.keys()Функция пропустит их.

Object.values()а такжеObject.entries()Оба возвращают массив пар ключ-значение перечисляемых свойств самого данного объекта.

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

Теперь обратите внимание наfor..inРазница между утверждением,for..inЦикл может не только перечислять свои собственные свойства, но и перечислять свойства в цепочке прототипов.

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

enumerableKeysмассив содержитnatureColorsКлюч собственного свойства:'colorC'а также'colorD'.

Кроме тогоfor..inтакже пройдено отsimpleColorsУнаследованные свойства объекта-прототипа

2. Object.values() Возврат к значениям атрибутов

Метод **Object.values()** возвращает массив всех перечисляемых значений свойств самого данного объекта в том же порядке, в котором они использовались.for...inПорядок петель тот же (разница в том, чтоfor-inЦиклический перебор свойств в исходной цепочке).

Например, используйтеObject.keys()собирать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'

mealявляется обычным объектом. использоватьObject.keys(meals)и перечислилfor..ofЦикл, чтобы получить значение ключа объекта.

Код выглядит просто, ноlet mealName = meals[key]В этом нет большой необходимости, его можно дополнительно оптимизировать, следующим образом:

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.entries()

Метод **Object.entries()** возвращает массив пар ключ-значение перечислимых свойств самого данного объекта, которые упорядочены и используютсяfor...inЦикл по объекту возвращается в том же порядке (разница в том, что цикл for-in также перечисляет свойства в цепочке прототипов).

Object.entries()Возвращает массив пар ключ-значение, например[ [key1, value1], [key2, value2], ..., [keyN, valueN] ].

Может быть неудобно использовать эти пары ключ-значение напрямую, но очень легко получить доступ к ключам и значениям через присваивание деструктуризации массива, как показано ниже:

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()Возвращает коллекцию, совместимую с назначением деструктурирования массива, поэтому для назначения или объявления не требуются дополнительные строки.

Когда обычные объекты должны быть преобразованы вMapВремяObject.entries()полезно, потому чтоObject.entries()Возвращаемый формат такой же, какMapФормат, принятый конструктором, точно такой же:(key,value).

использовать обычныеMapКонструктор может преобразовать двумерный массив пар ключ-значение в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'

MapОбъекты содержат пары ключ-значение. Любое значение (объект или примитив) может использоваться как ключ или значение.

Интересно,MapобеспеченыObject.values()а такжеObject.entries()эквивалентные методы (просто они возвращают Iterators) дляMapЭкземпляры извлекают значения свойств или пары ключ-значение:

  • Map.prototype.values()ЭквивалентноObject.values()

  • Map.prototype.entries()ЭквивалентноObject.entries()

mapявляется улучшенной версией обычного предмета, который можно получитьmapразмер (для обычных объектов он должен быть получен вручную) и использовать в качестве ключа произвольный тип объекта (обычные объекты используют в качестве ключа строковый примитивный тип).

посмотрим возврат.values（）а также.entries（）изmapМетоды:

// ...
[...greetingsMap.values()];
// => ['Good morning', 'Good day', 'Good evening']
[...greetingsMap.entries()];
// => [ ['morning', 'Good morning'], ['midday', 'Good day'], 
//      ['evening', 'Good evening'] ]

Уведомление,greetingsMap.values()а такжеgreetingsMap.entries()Возвращает объект итератора. Чтобы поместить результат в массив, расширьте оператор…необходимо.

порядок свойств объекта

Объекты JS представляют собой простые карты значений ключа, поэтому порядок свойств в объекте тривиален, и в большинстве случаев на него не следует полагаться.

В ES5 и более ранних стандартах порядок свойств вообще не указан.

Однако, начиная с ES 6, упорядочение свойств основано на специальном правиле, если только оно не хронологическое. двумя новыми методамиObject.getOwnPropertyNamesа такжеReflect.ownKeysнаписать пример, иллюстрирующий это правило упорядочения свойств.

  • количество: когда тип атрибута является числовым, он будет отсортирован в порядке убывания чисел;
  • нить: Когда тип атрибута является строкой, он будет отсортирован в хронологическом порядке;
  • Symbol: если атрибут имеет тип Symbol, он будет отсортирован в хронологическом порядке.

Если требуется упорядоченная коллекция, рекомендуется хранить данные в массиве илиSetсередина.

Суммировать

Object.values()а такжеObject.entries()— это еще один шаг к улучшению в предоставлении новых стандартизированных вспомогательных функций для разработчиков JS.

Object.entries()Лучше всего использовать для назначения деструктуризации массива, легко назначая ключи и значения различным переменным. Эта функция также может легко сопоставить простые свойства объекта JS сMapв объекте. ,

Уведомление,Object.values()а такжеObject.entries()Порядок возвращаемых данных не определен, поэтому не полагайтесь на это.

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории