JavaScript Object Keys Tutorial – Как использовать пара клавиш JS

Автор оригинала: FreeCodeCamp Community Member.

Вы можете группировать связанные данные вместе в единую структуру данных, используя объект JavaScript, как это:

const desk = {
   height: "4 feet",
   weight: "30 pounds",
   color: "brown",
   material: "wood",
 };

Объект содержит свойства или пары ключа-значение. Рабочий стол Объект выше имеет четыре свойства. Каждое свойство имеет имя, которое также называется ключом и соответствующее значение.

Например, ключ Высота имеет значение «4 фута» Отказ Вместе, ключ и значение составляют одно свойство.

height: "4 feet",

Рабочий стол Объект содержит данные о столе. На самом деле, это причина, по которой вы используете объект JavaScript: для хранения данных. Также просто извлечь данные, которые вы храните в объекте. Эти аспекты делают объекты очень полезными.

Эта статья получит вас и работает с объектами JavaScript:

• Как создать объект
• Как хранить данные в объекте
• и извлеките данные из него.

Давайте начнем с создания объекта.

Я создам объект под названием пицца Ниже приведен и добавьте ее пары значения ключей.

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

Ключи слева от толстой кишки : и значения справа от этого. Каждое значение ключа – это Недвижимость Отказ В этом примере есть три свойства:

• Ключ Повышать имеет значение «Сыр» Отказ
• Ключ соус имеет значение “Маринара” Отказ
• Ключ Размер имеет значение “маленький” Отказ

Каждое свойство разделено запятой. Все свойства обернуты в фигурные скобки.

Это основной синтаксис объекта. Но есть несколько правил, чтобы помнить при создании объектов JavaScript.

Клавиши объекта в JavaScript

Каждый ключ в вашем объекте JavaScript должен быть строкой, символом или номером.

Посмотрите на пример ниже. Ключевые имена 1 и 2 на самом деле принуждены к струнам.

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

Это разница, ясно, когда вы распечатаете объект.

console.log(shoppingCart);
//Result: { '1': 'apple', '2': 'oranges' }

Есть еще одно правило, чтобы иметь в виду о ключевых именах: если ваше имя ключа содержит пробелы, вам нужно обернуть его в кавычках.

Посмотрите на Программист объект ниже. Обратите внимание на последнее имя ключа, «Текущее название проекта» Отказ Это название ключа содержит пробелы так, я завернул его в цитаты.

const programmer = {
   firstname: "Phil",
   age: 21,
   backendDeveloper: true,
   languages: ["Python", "JavaScript", "Java", "C++"],
   "current project name": "The Amazing App"
};

Значения объекта в JavaScript

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

Вы даже можете использовать функцию в качестве значения, в этом случае он известен как метод. Звуки () В приведенном ниже объекте находится пример.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Теперь скажем, вы хотите добавить или удалить пару ключ-значение. Или вы просто хотите получить значение объекта.

Вы можете сделать эти вещи, используя точку или нотацию кронштейна, которые мы будем решать дальше.

Обозначение точек и нотации кронштейна – это два способа доступа и использовать свойства объекта. Вы, вероятно, окажетесь до Dot Nonational, поэтому мы начнем с этого.

Как добавить пару клавишной пары с точечной записью в JavaScript

Я создам пустую книга объект ниже.

const book = {};

Чтобы добавить пару ключ-значение, используя точечную обозначение, используйте синтаксис:

ObjectName.kyname.

Это код, чтобы добавить ключ (автор) и значение («Джейн Смит») к книга объект:

book.author = "Jane Smith";

Вот разбивка вышеуказанного кода:

• книга Имя объекта
• Отказ (точка)
• Автор это имя ключа
• = (равна)
• "Джейн Смит" это значение

Когда я распечатаю объект книги, увижу новую пару добавленного ключа.

console.log(book);
//Result: { author: 'Jane Smith' }

Я добавлю другую пару ключ-значение для книга объект.

book.publicationYear = 2006;

книга Объект теперь имеет два свойства.

console.log(book);
//Result: { author: 'Jane Smith', publicationYear: 2006 }

Как получить доступ к данным в объекте JavaScript с помощью нотации DOT

Вы также можете использовать точечную обозначение на ключ к Доступ связанное значение.

Рассмотрим это БаскетболПодносидер объект.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

Скажем, вы хотите получить значение «стрельба». Это синтаксис для использования:

ObjectName.kyname.

Давайте поместим этот синтаксис, чтобы использовать, чтобы получить и распечатать значение «Съемка охраны».

console.log(basketballPlayer.position);
//Result: shooting guard

Вот разбивка вышеуказанного кода:

• Баскетболист Имя объекта
• Отказ (точка)
• позиция это имя ключа

Это еще один пример.

console.log(basketballPlayer.name);
//Result: James

Как удалить валючевую пару в JavaScript

Чтобы удалить парную пару, используйте Удалить оператор. Это синтаксис:

Удалить название объекта. KKY Name

Итак, чтобы удалить Высота ключ и его значение из БаскетболПодносидер Объект, вы бы написали этот код:

delete basketballPlayer.height;

В результате БаскетболПодносидер Объект теперь имеет три пары ключевых значений.

console.log(basketballPlayer);
//Result: { name: 'James', averagePointsPerGame: 20, position: 'shooting guard' }

Вы, вероятно, окажетесь часто достигнув до DOT NOOTION, хотя есть определенные требования, чтобы быть в курсе.

При использовании точечной обозначения ключевые имена не могут содержать пробелы, дефис или начать с номера.

Например, скажем, я пытаюсь добавить ключ, содержащий пробелы, используя точечную обозначение. Я получу ошибку.

basketballPlayer.shooting percentage = "75%";
//Results in an error

Таким образом, точечная запись не будет работать в любой ситуации. Вот почему есть еще один вариант: нотация кронштейна.

Как добавить пару ключ, используя нотацию кронштейна в JavaScript

Просто как точечная запись, вы можете использовать нотацию кронштейна для добавления пары значения ключа на объект.

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

Я создам сотрудник объект ниже.

const employee = {};

Теперь я хочу добавить пару ключ, используя нотацию кронштейна. Это синтаксис:

ObjectName [«KeyName»]

Так вот как я бы добавил ключ (продажи) и стоимость («занятие») к объекту сотрудника:

employee["occupation"] = "sales";

Вот разбивка вышеуказанного кода:

• сотрудник Имя объекта
• «Оккупация» это имя ключа
• = (равна)
• "Продажи" это значение

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

//Add multi-word key name
employee["travels frequently"] = true;
 
//Add key name that starts with a number and includes a hyphen
employee["1st-territory"] = "Chicago";
 
//Add a key name that starts with a number
employee["25"] = "total customers";

Когда я печатаю сотрудник Объект, это выглядит так:

{
  '25': 'total customers',
  occupation: 'sales',
  'travels frequently': true,
  '1st-territory': 'Chicago'
}

С учетом этой информации мы можем добавить ключ «процент съемки» к БаскетболПодносидер объект сверху.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

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

basketballPlayer.shooting percentage = "75%";
//Results in an error

Но нотация кронштейна оставляет нас без ошибок, как вы можете видеть здесь:

basketballPlayer["shooting percentage"] = "75%";

Это результат, когда я печатаю объект:

{
  name: 'James',
  averagePointsPerGame: 20,
  height: '6 feet, 2 inches',
  position: 'shooting guard',
  'shooting percentage': '75%'
}

Как получить доступ к данным в объекте JavaScript с использованием нотации кронштейна

Вы также можете использовать нотацию кронштейна на ключ к Доступ связанное значение.

Вспомнить животное объект с начала статьи.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Давайте получим значение, связанное с ключом, Имя Отказ Чтобы сделать это, оберните ключевые кавычки названия и поместите его в скобки. Это синтаксис:

ObjectName [«KeyName»]

Вот код, который вы бы написали с помощью нотации кронштейна: животное [«название»]; Отказ

Это расстройство вышеуказанного кода:

• животное Имя объекта
• [«Имя»] это ключевое имя, заключенное в квадратные скобки

Вот еще один пример.

console.log(animal["sounds"]());

//Result: 
meow meow
undefined

Обратите внимание, что Звуки () Это метод, поэтому я добавил скобки в конце, чтобы вызвать его.

Вот как вы бы вызовули метод, используя точечную обозначение.

console.log(animal.sounds());

//Result: 
meow meow
undefined

Вы знаете, как получить доступ к конкретным свойствам. Но что, если вы хотите Все ключей или Все значений от объекта?

Есть два метода, которые дадут вам необходимую информацию.

const runner = {
   name: "Jessica",
   age: 20,
   milesPerWeek: 40,
   race: "marathon"
};

Используйте Object.keys () Способ извлечения всех ключевых имен из объекта.

Это синтаксис:

Object.keys (ObjectName)

Мы можем использовать этот метод на вышеуказанном бегун объект.

Object.keys(runner);

Если вы распечатаете результат, вы получите массив клавиш объекта.

console.log(Object.keys(runner));
//Result: [ 'name', 'age', 'milesPerWeek', 'race' ]

Аналогично, вы можете использовать Object.values () Способ получения всех значений от объекта. Это синтаксис:

Object.values (ObjectName)

Теперь мы получим все значения из бегун объект.

console.log(Object.values(runner));
//Result: [ 'Jessica', 20, 40, 'marathon' ]

Мы покрывали много земли. Вот краткое изложение ключевых идей:

Объекты:

• Используйте объекты для хранения данных в качестве свойств (пары ключей).
• Ключевые имена должны быть строки, символы или цифры.
• Значения могут быть любым типом.

Свойства объекта доступа:

• Точечная запись: ObjectName.kyname.
• Обозначение кронштейна: ObjectName [«KeyName»]

Удалить свойство:

• Удалить название объекта. KKY Name

Есть много, что вы можете сделать с объектами. И теперь у вас есть некоторые основы, чтобы вы могли воспользоваться этим мощным типом данных JavaScript.

Я пишу о том, чтобы учиться программировать, и лучшие способы идти об этом на amymhaddad.com . I также Чирикать о программировании, обучении и производительности: @amymhaddad. .