12 сентября 2009 :Javascript - о массивах и объектах

Итак, сегодня покопалась в списке тем для статей которые хотела бы написать, и решила написать про работу с массивами в яваскриптах.

Создание массива

Создать массив в яваскрипте можно следующими способами:

var a = new Array(); // Создание массива через объект Array
var a = new Object(); // Создание объекта через объект объект! =)
var a = []; // создание массива используя спецсимволы
var a = {}; // создание объекта. Его тоже можно использовать как массив

Массив можно создавать сразу с переменными

var a = new Array(10); // Создаёт пустой массив ограниченный 10ю элементами
var a = [1,2,3]; // массив из 3х элементов
var a = ['вася','петя']; // массив из 2х элементов

Можно создавать ассоциативные массивы

var a = [];
a['вася']='Пупкин';

Нельзя создать массив с перечислением ассоциативных значений, т.к. Ассоциативность в массивах поддерживается с применением свойств объектов. Свойство length в яваскриптах не учитывает ассоциативные элементы.

var a = ['вася':'Пупкин'];

Но можно создать такой объект

var a = {'вася':'Пупкин'};

и обращаться к нему как к массиву

alert(a['вася'));

Удаление элемента массива

Про удаление чего-либо вообще рекомендую прочитать следующий референс - delete Operator.

При удалении элемента массива

var my_array = [4,5,6];
delete my_array[1]; // Возвращает true
alert(my_array); // Выведет [4, undefined, 6]

У нас не измениться длина (my_array.length) массива и не сам массив не сдвинется на единицу.

В данном случае удобно использовать метод splice()

var my_array = [4,5,6];
my_array.splice(1, 1); //  Удаляет 1 элемент, функция возвращает значения удалённых элементов
alert(my_array) // [4, 6]

Очень часто нужно удалить конкретное значение из массива, тогда можно использовать следующее

var visibleIds = [4,5,6];
visibleIds.splice(visibleIds.indexOf(5), 1);
alert(visibleIds); //[4, 6]

Копирование массива

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

Пример:

a=document.title; // Присваиваем переменной a - значение заголовка документа
a='test'; // присваиваем переменной другое значение, заголовок документа не меняется


a=document; // присваиваем переменной значение документа
a.title='test'; // присваиваем заголовку значение - меняется заголовок окна.

Трудность в том что в яваскриптах нельзя просто сказать языку присвоить переменной ссылку или значение. В Php например ссылку можно создать только специально, используя оператор =&.

Итак, решение следующее. Для массивов всё предельно просто

var foo = [1, 2, 3];
var bar = foo;
bar[1] = 5;
alert(foo[1]);
// alerts 5

var foo = [1, 2, 3];
var bar = foo.slice(0);
bar[1] = 5;
alert(foo[1]);
// alerts 2

Метод slice(0) означает, вернуть кусок массива от элемента 0 до конца. Т.е. сам массив. Вуаля, копия массива.

Следует помнить что этот метод работает только на типизированных массивах. Т.е. не подойдёт для многомерных массивов и объектов. С объектами вообще нет встроенного метода который бы вернул копию объекта. Поэтому можем использовать его прототип.

Object.prototype.clone = function() {
  var newObj = (this instanceof Array) ? [] : {};
  for (i in this) {
    if (i == 'clone') continue;
if (this[i] && typeof this[i] == "object") {
newObj[i] = this[i].clone();
} else newObj[i] = this[i]
} return newObj;
};

В данном случае мы рекурсивно проходим по объекту и если его свойство тоже является объектом или массивом мы проходимся по нему так же. Итак чтобы проверим как оно работает:

var foo = {a: 1, b: 2, c: 3};
var bar = foo;
bar.b = 5;
alert(foo.b);
// alerts 5

var foo = {a: 1, b: 2, c: 3};
var bar = foo.clone();
bar.b = 5;
alert(foo.b);
// alerts 2

цикл For в ассоциативном массиве

Если кто не в курсе, проход по всем ключам массива реализуется очень просто.

var a={'a':1,'b':2};
for(i in a)
   alert(a[i]);


Я думаю если вы прочитали эту статью, то вы освоили такой важный элемент как массив в яваскриптах.

Буду рада комментариям.

P.S. Также рекомендую почитать Mastering Javascript Arrays, там интересно написано о том как яваскрипт поддерживает ассоциативные массивы и почему.