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

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

Резюме

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

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

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