Объект Array. Работа с массивами
Объект Array представляет массив и предоставляет ряд свойств и методов, с помощью которых мы можем управлять массивом.
Инициализация массива
Можно создать пустой массив, используя квадратные скобки или конструктор Array:
var users = new Array(); var people = []; console.log(users); // Array[0] console.log(people); // Array[0]Можно сразу же инициализировать массив некоторым количеством элементов:
var users = new Array("Tom", "Bill", "Alice");
var people = ["Sam", "John", "Kate"];
alert("users: " + users + "\npeople" + people);
Можно определить массив и по ходу определять в него новые элементы:
var car = new Array();
car[1] = "Nissan";
car[2] = "Ford";
alert("Car[1]: " + car[1] + "n\Car[2]" + car[2]);
При этом не важно, что по умолчанию массив создается с нулевой длиной.
С помощью индексов мы можем подставить на конкретный индекс в массиве тот или иной элемент.
length
Чтобы узнать длину массива, используется свойство length:
var fruit = new Array();
fruit[0] = "яблоки";
fruit[1] = "груши";
fruit[2] = "сливы";
document.write("В массиве fruit " + fruit.length + " элемента: <.br/>");
for(var i=0; i < .fruit.length; i++)
document.write(fruit[i] + "<.br/>");
По факту длиной массива будет индекс последнего элемента с добавлением единицы. Например:
var users = new Array(); // в массиве 0 элементов
users[0] = "Tom";
users[1] = "Kate";
users[4] = "Sam";
for(var i=0; i<.users.length;i++)
console.log(users[i]);
Вывод браузера:
Tom
Kate
undefined
undefined
Sam
Несмотря на то, что для индексов 2 и 3 мы не добавляли элементов, но длиной массива в данном случае будет число 5. Просто элементы с индексами 2 и 3 будут иметь значение undefined.
Копирование массива. slice()
Копирование массива может быть поверхностным или неглубоким (shallow copy) и глубоким (deep copy).
При неглубоком копировании достаточно присвоить переменной значение другой переменной, которая хранит массив:
var users = ["Tom", "Sam", "Bill"]; console.log(users); // ["Tom", "Sam", "Bill"] var people = users; // неглубокое копирование people[1] = "Mike"; // изменяем второй элемент console.log(users); // ["Tom", "Mike", "Bill"]В данном случае переменная people после копирования будет указывать на тот же массив, что и переменная users. Поэтому при изменении элементов в people, изменятся элементы и в users, так как фактически это один и тот же массив.
Такое поведение не всегда является желательным. Например, мы хотим, чтобы после копирования переменные указывали на отдельные массивы. И в этом случае можно использовать глубокое копирование с помощью метода slice():
var users = ["Tom", "Sam", "Bill"]; console.log(users); // ["Tom", "Sam", "Bill"] var people = users.slice(); // глубокое копирование people[1] = "Mike"; // изменяем второй элемент console.log(users); // ["Tom", "Sam", "Bill"] console.log(people); // ["Tom", "Mike", "Bill"]В данном случае после копирования переменные будут указывать на разные массивы, и мы сможем изменять их отдельно друг от друга.
Также метод slice() позволяет скопировать часть массива:
var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var people = users.slice(1, 4); console.log(people); // ["Sam", "Bill", "Alice"]В метод slice() передается начальный и конечный индексы, которые используются для выборки значений из массива. То есть в данном случае выборка в новый массив идет начиная с 1 индекса по индекс 4 не включая.
push()
Метод push() добавляет элемент в конец массива:
var fruit = [];
fruit.push("яблоки");
fruit.push("груши");
fruit.push("сливы");
fruit.push("вишня","абрикос");
document.write("В массиве fruit " + fruit.length + " элемента:
");
document.write(fruit); // яблоки,груши,сливы,вишня,абрикос
pop()
Метод pop() удаляет последний элемент из массива:
var fruit = ["яблоки", "груши", "сливы"];
var lastFruit = fruit.pop(); // извлекаем из массива последний элемент
document.write(lastFruit + "<.br/>");
document.write("В массиве fruit " + fruit.length + " элемента:
");
for(var i=0; i <.fruit.length; i++)
document.write(fruit[i] + "<.br/>");
Вывод браузера:
сливы
В массиве fruit 2 элемента:
яблоки
груши
shift()
Метод shift() извлекает и удаляет первый элемент из массива:
var fruit = ["яблоки", "груши", "сливы"];
var firstFruit = fruit.shift();
document.write(firstFruit + "<.br/>");
document.write("В массиве fruit " + fruit.length + " элемента:
");
for(var i=0; i <.fruit.length; i++)
document.write(fruit[i] + "<.br/>");
Вывод браузера:
яблоки
В массиве fruit 2 элемента:
груши
сливы
unshift()
Метод unshift() добавляет новый элемент в начало массива:
var fruit = ["яблоки", "груши", "сливы"];
fruit.unshift("абрикосы");
document.write(fruit);
Вывод браузера:
абрикосы,яблоки,груши,сливы
Удаление элемента по индексу. splice()
Метод splice() удаляет элементы с определенного индекса. Например, удаление элементов с третьего индекса:
var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(3); console.log(deleted); // [ "Alice", "Kate" ] console.log(users); // [ "Tom", "Sam", "Bill" ]Метод slice возвращает удаленные элементы.
В данном случае удаление идет с начала массива. Если передать отрицательный индекс, то удаление будет производиться с конца массива. Например, удалим последний элемент:
var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(-1); console.log(deleted); // [ "Kate" ] console.log(users); // [ "Tom", "Sam", "Bill", "Alice" ]Дополнительная версия метода позволяет задать конечный индекс для удаления. Например, удалим с первого по третий индекс:
var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(1,3); console.log(deleted); // [ "Sam", "Bill", "Alice" ] console.log(users); // [ "Tom", "Kate" ]Еще одна версия метода splice позволяет вставить вместо удаляемых элементов новые элементы:
var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(1,3, "Ann", "Bob"); console.log(deleted); // [ "Sam", "Bill", "Alice" ] console.log(users); // [ "Tom", "Ann", "Bob", "Kate" ]В данном случае удаляем три элемента с 1-й по 3-й индексы и вместо них вставляем два элемента.
concat()
Метод concat() служит для объединения массивов:
var fruit = ["яблоки", "груши", "сливы"]; var vegetables = ["помидоры", "огурцы", "картофель"]; var products = fruit.concat(vegetables); for(var i=0; i <. products.length; i++) document.write(products[i] + "<.br/>");При этом необязательно объединять только однотипные массивы. Можно и разнотипные:
var fruit = ["яблоки", "груши", "сливы"]; var prices = [20, 30, 80]; var products = fruit.concat(prices);
join()
Метод join() объединяет все элементы массива в одну строку:
var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"];
var fruitString = fruit.join(", ");
document.write(fruitString);
В метод join() передается разделитель между элементами массива. В данном случае в качестве разделителя будет использоваться запятая и пробел (", ").
sort()
Метод sort() сортирует массив по возрастанию:
var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"]; fruit.sort(); for(var i=0; i < fruit.length; i++) document.write(fruit[i] + "
"); Вывод в браузере: абрикосы груши персики сливы яблоки
reverse()
Метод reverse() переворачивает массив задом наперед:
var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"];
fruit.reverse();
for(var i=0; i <. fruit.length; i++)
document.write(fruit[i] + "<.br/>");
Вывод в браузере:
персики
абрикосы
сливы
груши
яблоки
В сочетании с методом sort() можно отсортировать массив по убыванию:
var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"]; fruit.sort().reverse(); for(var i=0; i < fruit.length; i++) document.write(fruit[i] + "Методы indexOf() и lastIndexOf() возвращают индекс первого и последнего включения элемента в массиве. Например:
"); Вывод в браузере: яблоки сливы персики груши абрикосы Поиск индекса элемента
var fruit = ["яблоки", "груши", "сливы", "яблоки", "груши"];
var firstIndex = fruit.indexOf("яблоки");
var lastIndex = fruit.lastIndexOf("яблоки");
var otherIndex = fruit.indexOf("вишни");
document.write(firstIndex); // 0
document.write(lastIndex); // 3
document.write(otherIndex); // -1
firstIndex имеет значение 0, так как первое включение стоки "яблоки" в массиве приходится на индекс 0, а последнее на индекс 3.
Если же элемент отсутствует в массиве, то в этом случае методы indexOf() и lastIndexOf() возвращают значение -1.
every()
Метод every() проверяет, все ли элементы соответствуют определенному условию:
var numbers = [ 1, -12, 8, -4, 25, 42 ];
function condition(value, index, array) {
var result = false;
if (value > 0) {
result = true;
}
return result;
};
var passed = numbers.every(condition);
document.write(passed); // false
В метод every() в качестве параметра передается функция,
представляющая условие. Эта функция принимает три параметра:
function condition(value, index, array) {
}
Параметр value представляет текущий перебираемый элемент массива,
параметр index представляет индекс этого элемента,
а параметр array передает ссылку на массив.
В этой функции мы можем проверить переданное значение элемента на соответствие какому-нибудь условию. Например, в данном примере мы проверяем каждый элемент массива, больше ли он нуля. Если больше, то возвращаем значение true, то есть элемент соответствует условию. Если меньше, то возвращаем false - элемент не соответствует условию.
В итоге, когда происходит вызов метода numbers.every(condition) он перебирает все элементы массива numbers и по очереди передает их в функцию condition. Если эта функция возвращает значение true для всех элементов, то и метод every() возвращает true. Если хотя бы один элемент не соответствует условию, то метод every() возвращает значение false.
some()
Метод some() похож на метод every(), только он проверяет, соответствует ли хотя бы один элемент условию. И в этом случае метод some() возвращает true. Если элементов, соответствующих условию, в массиве нет, то возвращается значение false:
var numbers = [ 1, -12, 8, -4, 25, 42 ];
function condition(value, index, array) {
var result = false;
if (value === 8) {
result = true;
}
return result;
};
var passed = numbers.some(condition); // true
filter()
Метод filter(), как some() и every(), принимает функцию условия. Но при этом возвращает массив тех элементов, которые соответствуют этому условию:
var numbers = [ 1, -12, 8, -4, 25, 42 ];
function condition(value, index, array) {
var result = false;
if (value > 0) {
result = true;
}
return result;
};
var filteredNumbers = numbers.filter(condition);
for(var i=0; i <. filteredNumbers.length; i++)
document.write(filteredNumbers[i] + "<.br/>");
Вывод в браузере:
1
8
25
42
forEach() и map()
Методы forEach() и map() осуществляют перебор элементов и выполняют с ними определенный операции. Например, для вычисления квадратов чисел в массиве можно использовать следующий код:
var numbers = [ 1, 2, 3, 4, 5, 6];
for(var i = 0; i<.numbers.length; i++){
var result = numbers[i] * numbers[i];
document.write("Квадрат числа " + numbers[i] + " равен " + result + "
");
}
Но с помощью метода forEach() можно упростить эту конструкцию:
var numbers = [ 1, 2, 3, 4, 5, 6];
function square(value, index, array) {
var result = value * value;
document.write("Квадрат числа " + value + " равен " + result + "
");
};
numbers.forEach(square);
Метод forEach() в качестве параметра принимает все ту же функцию, в которую при переборе элементов передается текущий перебираемый элемент и над ним выполняются операции.
Метод map() похож на метод forEach, он также в качестве параметра принимает функцию, с помощью которой выполняются операции над перебираемыми элементами массива, но при этом метод map() возвращает новый массив с результатами операций над элементами массива.
Например, применим метод map к вычислению квадратов чисел массива:
var numbers = [ 1, 2, 3, 4, 5, 6];
function square(value, index, array) {
return result = value * value;
};
var squareArray = numbers.map(square);
document.write(squareArray);
Функция, которая передается в метод map() получает текущий перебираемый элемент, выполняет над ним операции и возвращает некоторое значение. Это значение затем попадает в результирующий массив squareArray
Output