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

1656662890 obekty javascript kvadratnye skobki i algoritmy

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

Rj27VVmEt699nVSwP3J30foFIDCxaCVMwePu

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

Объекты интро

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

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

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

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

Давайте рассмотрим пример, где мы можем использовать это. Скажем, мы управляем рестораном и хотим получить информацию о ценах на продукты нашего меню. Один из способов сделать это – использовать if/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;  }}

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

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

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

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

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, итерация миллионов книг могла бы быть очень медленной и дорогой из вычислений.

Нотация Big O используется в информатике для описания производительности алгоритма. Например, если п это количество книг в нашей коллекции, стоимость использования итерации для поиска книги в самом худшем случае (книга, которую мы ищем, является последней в списке) будет составлять 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 для каждого объекта. Мы получаем значение непосредственно с карты с помощью ключа.

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

Подведение итогов

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

Хотите проверить свои новые навыки? Попробуйте упражнение Crash Override на Codewars.

Хотите научиться писать веб-приложения с помощью JavaScript? Я провожу Constructor Labs, 12-недельный тренинг по кодированию JavaScript в Лондоне. Преподаваемые технологии включают HMTL, CSS, JavaScript, Реагировать, Redux, Узел и Postgres. Все, что вам нужно, чтобы создать целую веб-приложение с нуля и получить первую работу в отрасли. Плата составляет 3000 фунтов стерлингов, а следующая когорта начнется 29 мая. Заявки уже открыты.

Добавить комментарий

Ваш адрес email не будет опубликован.