Javascript добавить значение в массив. Все способы перебора массива в JavaScript. Методы pop() и shift()
Я описал лишь часть методов для работы с массивами.
Здесь мы поговорим о добавлении, удалении элементов массива. О переворачивании и сортировке массива, а так же о нарезке, замене и комбинировании массивов.
Добавление элементов в массив.Вы можете использовать свойство length для добавления новых элементов в массив:
Var myArray = ["Apple", "Microsoft", "Google", "Facebook"]; myArray = "Yahoo!"; console.log(myArray); // ["Apple", "Microsoft", "Google", "Facebook", "Yahoo!"]
Это сработает, т.к. элементы массива нумеруются с нуля, а length на единицу больше. Length всегда эквивалентно index + 1 , поэтому очень легко добавить новый элемент в конец массива. Странно, но вы можете добавить элемент на позицию, которая намного больше, чем длина самого массива:
Var myArray = ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards"]; myArray = "Lindsey Buckingham"; console.log(myArray); // ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards", undefined × 95, "Lindsey Buckingham"] console.log(myArray.length); // 100
Как показано в комментариях, будет добавлено 95 пустых слотов и элемент «Lindsey Buckingham» в конец массива. После этого мы получим длину 100. Еще один способ добавить новый элемент в массив — использовать метод push():
Var myArray = ["Paul McCartney", "John Lennon", "George Harrison"]; myArray.push("Ringo Starr", "George Martin"); console.log(myArray); // ["Paul McCartney", "John Lennon", "George Harrison", "Ringo Starr", "George Martin"]
Метод push() всегда возвращает новую длину массива (в нашем случае 5). Добавить элемент можно с помощью splice():
Var myArray = ["acorn", "beech", "mongongo", "macadamia"]; myArray.splice(2, 0, "cashew"); // adds "cashew" into index 2 console.log(myArray); // ["acorn", "beech", "cashew", "mongongo", "macadamia"]
Когда второй аргумент 0, то это означает, что ни один элемент не будет удален, а поэтому любые последующие аргументы будут добавлены в массив в позицию, указанную в первом аргументе.
Удаление элементов из массиваУдалить элемент немножко сложнее, чем его добавить. Чтобы удалить элемент из конца массива, можно использовать pop():
Var myArray = ["7-up", "Sprite", "Ginger Ale", "Lemonade"]; myArray.pop(); console.log(myArray); // ["7-up", "Sprite", "Ginger Ale"]
Метод pop() всегда удаляет последний элемент в массиве и возвращает его.
Вы так же можете использовать splice() метод:
Var myArray = ["cassava", "nutmeg", "lupin", "rhubarb"]; myArray.splice(2, 1); // удалить элемент с индексом 2 console.log(myArray); // ["cassava", "nutmeg", "rhubarb"]
В отличии от метода splice(), который используется для добавления элементов, здесь вторым аргументом идет 1, которая говорит, что мы хотим удалить элемент с индексом 2 (или 3-ий по счету). В данном случае удалился элемент «lupin».
Вы можете удалить элемент массива используя оператор delete:
Var myArray = ["Byte Bandit", "Eliza", "Jeefo", "Michelangelo"]; console.log(myArray.length); // 4 delete myArray; // удалить Eliza console.log(myArray.length); // 4 console.log(myArray); // ["Byte Bandit", undefined × 1, "Jeefo", "Michelangelo"]
Первое важное замечание: delete() не изменяет длину массива после удаления элемента (даже, если это был последний элемент в массиве). Второе: delete() изменяет значение удаляемого элемента на undefined, поэтому при обращении myArray = undefined .
Хороший способ удалить элемент из массива — использовать John Resig’s Array.remove . Ниже пример использования, взятый с его страницы:
// Array Remove - By John Resig (MIT Licensed) Array.prototype.remove = function(from, to) { var rest = this.slice((to || from) + 1 || this.length); this.length = from < 0 ? this.length + from: from; return this.push.apply(this, rest); }; // Удаление 2 элемента из массива array.remove(1); // Удаление 2-ого элемента с конца массива array.remove(-2); // Удаление второго и третьего элемента array.remove(1,2); // Удаление последнего и предпоследнего элемента array.remove(-2,-1);
Возможно вы захотите посмотреть решение by Viral Patel , одну из функций в Underscore.js , или jQuery’s grep() .
Дополнительно, в JavaScript есть метод shift(), который удаляет первый элемент в массиве и возвращает его значение. Посмотрим код:
Var myArray = ["Matt Kramer", "Jason Bieler", "Tom Defile", "Phil Varone"]; console.log(myArray.length); // 4 var firstItem = myArray.shift(); console.log(firstItem); // Matt Kramer console.log(myArray.length); // 3 console.log(myArray); // ["Jason Bieler", "Tom Defile", "Phil Varone"]
С помощью метода shift() мы удалили элемент, но сохранили его значение в нашей переменной firstItem. Длина массива изменилась с 4 на 3.
Этот метод может быть полезен вместе с методом push(). Используя их вместе мы можем эффективно выстраивать очередь элементов в массиве. Мы сохраняем длину массива удаляя элемент с начала и добавляя новый в конец.
Наоборот, мы можем использовать метод unshift() для добавления элемент в начало массива:
Var myArray = ["apito", "castanets", "maraca"]; console.log(myArray.length); // 3 myArray.unshift("chime bar", "tan-tan"); console.log(myArray.length); // 5 console.log(myArray); // ["chime bar", "tan-tan", "apito", "castanets", "maraca"]
Используя метод unshift() с методом pop(), вы можете создавать очереди в обратную сторону, добавляя элементы в начало и удаляя с конца массива.
Переворачивание и сортировка элементов массива.Чтобы перевернуть элементы в массиве, мы можем использовать reverse():
Var myArray = ["countdown", "final", "the"]; console.log(myArray); // ["countdown", "final", "the"] myArray = myArray.reverse(); console.log(myArray); // ["the", "final", "countdown"]
Сортировать элементы массива в алфавитном порядке возможно с помощью метода sort():
Var myArray = ["xylophones", "zebras", "juggernauts", "avocados"]; console.log(myArray); // ["xylophones", "zebras", "juggernauts", "avocados"] myArray = myArray.sort(); console.log(myArray); // ["avocados", "juggernauts", "xylophones", "zebras"]
Но это не будет работать с числами.
Var myArray = ; console.log(myArray); // myArray = myArray.sort(); console.log(myArray); //
Если нужно отсортировать числа, то можно использовать следующий код:
Function compareNumbers(a, b) { return a - b; } var myArray = ; console.log(myArray); // myArray = myArray.sort(compareNumbers); console.log(myArray); //
Как показано выше, с помощью простой функции, вставленной в sort(), массив, содержащий числа, будет отсортирован правильно.
Объединение массивов.Мы можете объединить 2 или больше массивов и получить 1 массив, который содержит элементы соединенных массивов. Для этого используем метод concat():
Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myArray2 = ["Chris Murphy", "Patrick Pentland"]; var myNewArray = myArray.concat(myArray2); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]
Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myNewArray = myArray.concat("Chris Murphy", "Patrick Pentland"); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]
Разделение массива.Мы можете создать новый массив, содержащий 1 или более элементов из существующего массива, используя функцию slice():
Var myArray = ["Vocals", "Bass", "Guitar", "Drums", "Apples", "Oranges"]; var myNewArray = myArray.slice(4); console.log(myNewArray); // ["Apples", "Oranges"]
Метод slice() принимает 1 или 2 аргумента. Если передан 1 аргумент (индекс), то новый массив создается из всех элементов старого, начиная с данного индекса. Если передано 2 аргумента, то новый массив создается из элементов, начиная с первого аргумента и до элемента с индексом, переданным во втором параметре, не включая последний. Чтобы было понятней, посмотрим код ниже:
Var myArray = ["Vocals", "Bass", "Guitar", "Drums", "Apples", "Oranges"]; var myNewArray = myArray.slice(0, 4); console.log(myNewArray); // ["Vocals", "Bass", "Guitar", "Drums"]
Замена элементов в массиве.Мы используем splice() для удаления элементов из массива, но мы так же можем заменить элемент в массиве на новые элементы:
Var myArray = ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Matt Sharp"]; myArray.splice(3, 1, "Scott Shriner"); // заменить 1 элемент с индексом 3 console.log(myArray); // ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Scott Shriner"]
Метод splice() всегда возвращает массив, содержащий элементы, которые были удалены. В строчке 2 будет возвращен 1 элемент «Brian Bell».
ЗаключениеВ данных статьях были описаны методы работы с массивами в JavaScript. Некоторые дополнительные элементы можно посмотреть на MDN , которые я не включил в данный пост. Они работают только в IE9+, поэтому могут оказаться бесполезными.
Есть что добавить? Или знаете какую-нибудь интересную библиотеку, которая поможет управлять массивами? Комментируйте, пожалуйста!
На этом уроке мы познакомимся с массивами, научимся их создавать, выполнять операции над их элементами, а также рассмотрим основные методы и свойства, доступные при работе с ними.
Понятие массиваМассив – это упорядоченный набор данных, который имеет имя и является экземпляром объекта Array. Он состоит из элементов, доступ к которым осуществляется с помощью их порядкового номера (индекса). Нумерация элементов в массиве начинается не с 1, а с 0.
На следующем рисунке приведён числовой массив, состоящий из 7 элементов. Элементы данного массива содержат следующие данные: 1 элемент (0 индекс) - число 123, 2 элемент (1 индекс) - число 214, 3 элемент (2 индекс) - число 315 и т.д.
//элемент в который будем выводить массив
//создание числового массива
var numberArray = new Array(123,214,315,312,124,206,218);
//вывести массив в элемент, имеющий id="myP"
document.getElementById("myP").innerHTML =
"1 Элемент массива: " + numberArray +
"
" +
"2 Элемент массива: " + numberArray +
"
" +
"3 Элемент массива: " + numberArray +
"
" +
"4 Элемент массива: " + numberArray +
"
" +
"5 Элемент массива: " + numberArray +
"
" +
"6 Элемент массива: " + numberArray +
"
" +
"7 Элемент массива: " + numberArray;
Создание массива на языке JavaScript осуществляется с помощью оператора new и функции-конструктора Array . В круглых скобках функции-конструктора Array можно указать одно из следующих значений:
- Число. В этом случае данная функция создаст массив, состоящий из указанного числа элементов. Все эти элементы будут иметь значения undefined .
- Несколько значений через запятую. В данном случае функция-конструктор Array создаст массив, состоящий из указанного количества элементов, и присвоит им соответствующие значения.
- Ничего. В этом случае данная функция создаст пустой массив.
В отличие от многих других языков программирования массивы в JavaScript автоматически меняют свой размер, т.е. они изначально являются динамическими. Таким массивам не надо задавать какие-либо размеры. Ещё одной отличительной чертой массивов JavaScript является то, что в разных элементах одного и того же массива могут содержаться различные типы данных.
Работа с элементами массиваДля того чтобы обратиться к определённому элементу массива, необходимо указать имя этого массива и в квадратных скобках его индекс. Данная операция ещё называется операцией индексации.
Например, создадим пустой массив и добавим в него 4 текстовых элемента:
//создание пустого массива smartphoneColors var smartphoneColors = new Array(); //присваиваем 1 элементу массива (индекс 0) значение "Black" smartphoneColors = "Black"; //присваиваем 2 элементу массива (индекс 1) значение "White" smartphoneColors = "White"; //присваиваем 3 элементу массива (индекс 2) значение "Grey" smartphoneColors = "Grey"; //присваиваем 4 элементу массива (индекс 3) значение "Blue" smartphoneColors = "Blue";
Например, выведем в консоль браузера (F12) значения 2 и 4 элемента массива smartphoneColors:
Console.log("2 элемент = " + smartphoneColors); console.log("4 элемент = " + smartphoneColors);
Определение количества элементов в массиве осуществляется с помощью свойства length .
//создадим массив путём перечисления значений элементов в функции Array var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //переменной lengthArray присвоим длину массива volumeHDDs var lengthArray = volumeHDDs.length;
Как получить первый элемент массиваПолучение значения первого элемента массива осуществляется с помощью указания в квадратных скобках этого массива числа 0:
//создание массива, состоящего из 3 элементов var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //получение значения первого элемента массива var firstValue = volumeHDDs;
Как получить последний элемент массиваПолучение значения последнего элемента массива осуществляется с помощью указания в квадратных скобках этого массива выражения имя_массива.length-1:
//создание массива, состоящего из 3 элементов var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //получение значения последнего элемента массива var lastValue = volumeHDDs;
Перебор массиваПеребор элементов массива осуществляется с помощью цикла for .
Например, переберём все элементы массива и выведем их значения в консоль браузера (F12):
//создание массива nameStudents, состоящего из 4 элементов var nameStudents = new Array("Петя","Вася","Коля","Максим"); //перебор элементов массива от 0 до длины массива-1 for (var i=0; i