Jun 13 2023 at 20:06

Создаем свой массив или почему массив — это объект в JavaScript

Invite pending

JavaScript - это язык программирования, который предоставляет различные структуры данных для работы с информацией. Одной из наиболее часто используемых структур данных является массив. В JavaScript массивы представляют собой особый тип объектов. Однако, новички часто не до конца понимают, почему массив является объектом и почему typeof [] показываетobject.

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

Создаем массив используя синтаксис JavaScript

В JavaScript есть множество способов создания массива, но я бы хотел подробнее остановиться на одном из них - создание массива с помощью конструктора Array.

const array = new Array(1, 2, 3, 4); // массив с элементами [1, 2, 3, 4]

Как мы знаем, конструктор - это функция, которая используется для создания новых объектов. Она определяет и инициализирует свойства и методы объекта. Почему бы нам тогда не попробовать написать свой конструктор для создания массива?

Создаем свой CustomArray

Давайте создадим базовую функцию-конструктор:

function CustomArray(...items) {
  this.length = items.length || 0;
  this.data = {};

  for (let i = 0; i < this.length; i++) {
    this.data[i] = items[i];
  }
}

Мы добавили поля length и data, которые будут являться свойствами нашего объекта. Функция-конструктор будет принимать любое количество аргументов, чтобы можно было инициализировать массив сразу с данными. Аргументы, если они есть, будут записываться в поле data с помощью цикла for.

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

function CustomArray(...items) {
  this.length = items.length || 0;
  this.data = {};

  for (let i = 0; i < this.length; i++) {
    this.data[i] = items[i];
  }
  
  // Получение элемента по индексу  
    this.get = function(index) {
      return this.data[index];
    };
  
    // Добавление элемента в конец массива
    this.push = function(item) {
      this.data[this.length] = item;
      this.length++;
    };
  
    // Удаление элемента с конца массива
    this.pop = function() {
      if (this.length === 0) {
        return undefined;
      }

    // Сохраним удаленный элемент, чтоб его вернуть, как у оригиналального Array.pop()
      const lastItem = this.data[this.length - 1];
      delete this.data[this.length - 1];
      this.length--;
      return lastItem;
    };
};

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

// Удаление элемента по индексу
this.delete = function(index) {
  const deletedItem = this.data[index];
  // Не забудем подвинуть индексы элементов после изменения
  this.shiftItems(index);
  return deletedItem;
};

// Сдвиг элементов массива после удаления
this.shiftItems = function(index) {
  for (let i = index; i < this.length - 1; i++) {
    this.data[i] = this.data[i + 1];
  }

  delete this.data[this.length - 1];
  this.length--;
};

В методе delete, мы сохраняем значение элемента, который будет удален, в переменной deletedItem. Затем мы вызываем метод shiftItems для сдвига оставшихся элементов после удаления.
Метод shiftItems отвечает за сдвиг элементов массива. Он начинает со сдвига элемента с указанного индекса и перезаписывает его значением следующего элемента. Затем он удаляет последний элемент массива и уменьшает значение length.

Итак, наш базовый класс готов, пришло время его опробовать!

const myArray = new CustomArray("a");
myArray.push("b");
myArray.push("c");

console.log(myArray.length); // 3
console.log(myArray.data); // { '0': 'a', '1': 'b', '2': 'c' }

console.log(myArray.get(1)); // 'b'

myArray.pop();
console.log(myArray); // { length: 2, data: { '0': 'a', '1': 'b' } }

myArray.delete(0);
console.log(myArray); // { length: 1, data: { '0': 'b' } }

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

Hubs:

JavaScript