Объекты JavaScript, квадратные скобки и алгоритмы

Дмитрий Грабов

Одним из самых мощных аспектов JavaScript является возможность динамически относиться к свойствам объектов. В этой статье мы посмотрим, как это работает и какие преимущества это может дать нам. Мы возьмем быстрый взгляд на некоторые из структур данных, используемых в информатике. Кроме того, мы рассмотрим что-то называемое нотацией Big O, которое используется для описания производительности алгоритма.

Объекты вступления

Давайте начнем с создания простого объекта, представляющего автомобиль. Каждый объект имеет что называется свойства Отказ Свойство – это переменная, которая принадлежит объекту. Наш автомобильный объект будет иметь три свойства: сделать , модель и цвет Отказ

Посмотрим, что это может выглядеть так:

const car = {  make: 'Ford',  model: 'Fiesta',  color: 'Red'};

Мы можем обратиться к отдельным свойствам объекта, используя точечную обозначение. Например, если мы хотели выяснить, какой цвет нашей машины мы можем использовать точечную обозначение, как этот Car.Color Отказ

Мы могли бы даже вывести его, используя console.log :

console.log(car.color); //outputs: Red

Еще один способ обратиться к недвижимости использует квадратный кронштейн обозначения:

console.log(car['color']); //outputs: Red

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

То есть, вместо того, чтобы жесткодировать конкретное имя свойства, мы можем указать его как строку в переменной:

const propertyName = 'color';const console.log(car[propertyName]); //outputs: Red

Использование динамического поиска с квадратным нотацией кронштейна

Давайте посмотрим на пример, где мы можем использовать это. Допустим, мы запустим ресторан, и мы хотим получить цены на товары в нашем меню. Один из способов делать это, использует Если/else заявления.

Давайте напишем функцию, которая примет название элемента и вернуть цену:

function getPrice(itemName){  if(itemName === 'burger') {    return 10;  } else if(itemName === 'fries') {    return 3;  } else if(itemName === 'coleslaw') {    return 4;  } else if(itemName === 'coke') {    return 2;  } else if(itemName === 'beer') {    return 5;  }}

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

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

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

В этом случае ключом будет название и значение элемента будет цена товара:

const menu = {  burger: 10,  fries: 3,  coleslaw: 4,  coke: 2,  beer: 5};

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

• объект меню
• Строка с именем элемента

и вернуть цену этого товара:

const menu = {  burger: 10,  fries: 3,  coleslaw: 4,  coke: 2,  beer: 5};

function getPrice(itemName, menu){  const itemPrice = menu[itemName];  return itemPrice;}

const priceOfBurger = getPrice('burger', menu);console.log(priceOfBurger); // outputs: 10

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

Структуры и алгоритмы данных

Карта в области компьютерной науки является структура данных, которая представляет собой коллекцию пар ключевых/значений, где каждая ключевые карты на соответствующее значение. Мы можем использовать его, чтобы посмотреть значение, которое соответствует определенному ключу. Это то, что мы делаем в предыдущем примере. У нас есть ключ, который является именем элемента, и мы можем посмотреть соответствующую цену этого элемента, используя наш объект меню. Мы используем объект для реализации структуры данных карты.

Давайте посмотрим на пример того, почему мы можем захотеть использовать карту. Допустим, мы запустим книжный магазин и иметь список книг. Каждая книга имеет уникальный идентификатор под названием «Международный стандартный номер книги» (ISBN), который является 13-значным номером. Мы храним наши книги в массиве и хотите иметь возможность смотреть их с помощью ISBN.

Один из способов сделать это – зацикливаться над массивом, проверяя значение ISBN каждой книги, и если она соответствует его возвращению:

const books = [{  isbn: '978-0099540946',  author: 'Mikhail Bulgakov',  title: 'Master and Margarita'}, {  isbn: '978-0596517748',  author: 'Douglas Crockford',  title: 'JavaScript: The Good Parts'}, {  isbn: '978-1593275846',  author: 'Marijn Haverbeke',  title: 'Eloquent JavaScript'}];

function getBookByIsbn(isbn, books){  for(let i = 0; i < books.length; i++){    if(books[i].isbn === isbn) {      return books[i];    }  }}

const myBook = getBookByIsbn('978-1593275846', books);

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

Большая O обозначение используется в информатике, чтобы описать производительность алгоритма. Например, если n Является ли количество книг в нашей коллекции, стоимость использования итерации, чтобы посмотреть книгу в худшем случае (книга, которую мы ищем, – это последний в списке), будет На) . Это означает, что количество книг в нашей коллекции удваивается, стоимость нахождения книги с использованием итерации будет удвоиться.

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

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

Ключ будет ISBN, и значение будет соответствующей книжной объектой:

const books = {  '978-0099540946':{    isbn: '978-0099540946',    author: 'Mikhail Bulgakov',    title: 'Master and Margarita'  },  '978-0596517748': {    isbn: '978-0596517748',    author: 'Douglas Crockford',    title: 'JavaScript: The Good Parts'  },  '978-1593275846': {    isbn: '978-1593275846',    author: 'Marijn Haverbeke',    title: 'Eloquent JavaScript'  }};

function getBookByIsbn(isbn, books){  return books[isbn];}

const myBook = getBookByIsbn('978-1593275846', books);

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

С точки зрения производительности, поиск карты обеспечит огромное улучшение итерации. Это связано с тем, что поиск карты имеет постоянную стоимость с точки зрения вычислений. Это может быть написано, используя большие o обозначения как O (1) . Неважно, если у нас есть три или три миллиона книг, мы можем получить книгу, которую мы хотим так же быстро, выполнив поиск карты с помощью клавиши ISBN.

Реконструировать

• Мы видели, что мы можем получить доступ к значениям свойств объекта, используя точечную обозначение и нотацию квадратного кронштейна
• Мы узнали, как мы можем динамически посмотреть значения свойства, используя переменные с квадратной обозначениями кронштейна
• Мы также узнали, что структура карты карты отображает ключи к значениям. Мы можем использовать ключи, чтобы напрямую смотреть значения в карте, которую мы реализуем с помощью объекта.
• У нас был первый взгляд на то, как используют производительность алгоритма, используя Большой o Обозначение. Кроме того, мы видели, как мы можем улучшить производительность поиска, преобразуя массив объектов на карту и использую прямой поиск, а не итерацию.

Хотите проверить свои новые найденные навыки? Попробуйте Перераспределение аварии Упражнение на кодовых ценах.

Хотите узнать, как писать веб-приложения, используя JavaScript? Я бегу Конструкторные лаборатории 12 неделя JavaScript Coding BootCamp В Лондоне. Технологии, которые включают HTML , CSS , JavaScript , Реагировать , Redux , Узел и Postgres Отказ Все, что вам нужно, чтобы создать целое веб-приложение с нуля и получить первую работу в отрасли. Сборы £ 3000 и следующая когорта начинается 29 мая. Приложения открыты сейчас Отказ

Оригинал: “https://www.freecodecamp.org/news/javascript-objects-square-brackets-and-algorithms-e9a2916dc158/”