Js Drip #4 Что такое Array?

Опубликовано Ср. 21 Январь 2015 в Translations

Вольный перевод Js Drip#4 What is an Array?

Для опытного разработчика этот вопрос покажется простейшим, но в контексте JavaSript все гораздо интересней.

В общем, массив это список значений, которые могут быть получены с помощью целого числа как "ключа". Список начинается с 0 и до конца. Если мы опишем массив в нотации объектов JavaScript, то он будет выглядеть так:

fakeArray = {
    0: "value 1",
    1: "value 2"
}

Тебе не кажется, что мы кое-что пропустили? Ох, мы знаем. Это надоедливое свойство length.

fakeArray = {
    0: "value 1",
    1: "value 2",
    length: 2
}

Это подозрительно похоже на массив. И как мы говорили раньше, работает точно так же, как и объект arguments. Мы также упоминали, что он работает именно так "под капотом" движка JavaScript.

По-правде, в JavaScript массивы - это объекты специального типа, встроенные в язык. Это можно легко увидеть, сравнивая поведения массивов и объектов.

fakeArray = {
    0: "value 1",
    1: "value 2",
    length: 2
};

// Выведет "value 1"
console.log(fakeArray[0]);

realArray = ["value 1", "value 2"];
realArray.text = "some text";

// Выведет "some text"
console.log(realArray.text);

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

Но что насчет специальных методов массива? Всяких там indexOf, slice и sort? Оказывается, что это просто функции, добавленные к объекту массива. (Точнее они добавлены в прототип массива, но не будем забегать вперед)

realArray = ["value 1", "value 2"];

// Выведет "0"
console.log(realArray.indexOf("value 1"));

realArray.indexOf = function() {
    return "I'll never tell.";
};

// Выведет "I'll never tell."
console.log(realArray.indexOf("value 1"));

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

fakeArray = {
    length: 0,
    push: function (val) {
        // Добавим новое значение в объект
        // со следующим доступным ключом
        this[this.length] = val;

        // Изменим свойство length
        this.length = this.length + 1;

        // Возвращаем измененную длину
        return this.length;
    }
};

fakeArray.push("first value");
fakeArray.push("second value");

// Выведет "first value"
console.log(fakeArray[0]);

// Выведет "second value"
console.log(fakeArray[1]);

Но одну вещь мы не сможем переписать - удобный синтаксис для создания массива (квадратные скобки). Но мы всегда можем использовать конструктор. По-сути, эти два варианта полностью эквиваленты.

literalWay = ["value 1"];

constructorWay = new Array("value 1");

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

myCustomArray = new CustomArray("value 1");

Теперь ты знаешь (если не знал) как работают массивы в JavaScript.

Яндекс.Метрика