Array
Массив ( Array ) в JavaScript является глобальным объектом, который используется для создания массивов; которые представляют собой высокоуровневые спископодобные объекты.
Создание массива
var fruits = ["Яблоко", "Банан"]; console.log(fruits.length); // 2
Доступ к элементу массива по индексу
var first = fruits[0]; // Яблоко var last = fruits[fruits.length - 1]; // Банан
Итерирование по массиву
.forEach(function (item, index, array) console.log(item, index); >); // Яблоко 0 // Банан 1
Добавление элемента в конец массива
var newLength = fruits.push("Апельсин"); // ["Яблоко", "Банан", "Апельсин"]
Удаление последнего элемента массива
var last = fruits.pop(); // удалим Апельсин (из конца) // ["Яблоко", "Банан"];
Удаление первого элемента массива
var first = fruits.shift(); // удалим Яблоко (из начала) // ["Банан"];
Добавление элемента в начало массива
var newLength = fruits.unshift("Клубника"); // добавляет в начало // ["Клубника", "Банан"];
Поиск номера элемента в массиве
.push("Манго"); // ["Клубника", "Банан", "Манго"] var pos = fruits.indexOf("Банан"); // 1
Удаление элемента с определённым индексом
var removedItem = fruits.splice(pos, 1); // так можно удалить элемент // ["Клубника", "Манго"]
Удаление нескольких элементов, начиная с определённого индекса
var vegetables = ["Капуста", "Репа", "Редиска", "Морковка"]; console.log(vegetables); // ["Капуста", "Репа", "Редиска", "Морковка"] var pos = 1, n = 2; var removedItems = vegetables.splice(pos, n); // так можно удалить элементы, n определяет количество элементов для удаления, // начиная с позиции(pos) и далее в направлении конца массива. console.log(vegetables); // ["Капуста", "Морковка"] (исходный массив изменён) console.log(removedItems); // ["Репа", "Редиска"]
Создание копии массива
var shallowCopy = fruits.slice(); // так можно создать копию массива // ["Клубника", "Манго"]
Синтаксис
[element0, element1, . elementN] new Array(element0, element1[, . [, elementN]]) new Array(arrayLength)
Массив в JavaScript инициализируется с помощью переданных элементов, за исключением случая, когда в конструктор Array передаётся один аргумент и этот аргумент является числом (см. ниже). Стоит обратить внимание, что этот особый случай применяется только к JavaScript-массивам, создаваемым с помощью конструктора Array , а не к литеральным массивам, создаваемым с использованием скобочного синтаксиса.
Если конструктору Array передаётся единственный аргумент, являющийся целым числом в диапазоне от 0 до 232-1 (включительно), будет возвращён новый пустой JavaScript-массив, длина которого установится в это число (примечание: это означает массив, содержащий arrayLength пустых ячеек, а не ячеек со значениями undefined ). Если аргументом будет любое другое число, возникнет исключение RangeError .
Описание
Массивы являются спископодобными объектами, чьи прототипы содержат методы для операций обхода и изменения массива. Ни размер JavaScript-массива, ни типы его элементов не являются фиксированными. Поскольку размер массива может увеличиваться и уменьшаться в любое время, то нет гарантии, что массив окажется плотным. То есть, при работе с массивом может возникнуть ситуация, что элемент массива, к которому вы обратитесь, будет пустым и вернёт undefined . В целом, это удобная характеристика; но если эта особенность массива не желательна в вашем специфическом случае, вы можете рассмотреть возможность использования типизированных массивов.
Некоторые полагают, что вы не должны использовать массив в качестве ассоциативного массива. В любом случае, вместо него вы можете использовать простые объекты , хотя у них есть и свои подводные камни. Смотрите пост Легковесные JavaScript-словари с произвольными ключами(англ.) в качестве примера.
Доступ к элементам массива
Массивы в JavaScript индексируются с нуля: первый элемент массива имеет индекс, равный 0 , а индекс последнего элемента равен значению свойства массива length минус 1.
var arr = ["первый элемент", "второй элемент", "последний элемент"]; console.log(arr[0]); // напечатает 'первый элемент' console.log(arr[1]); // напечатает 'второй элемент' console.log(arr[arr.length - 1]); // напечатает 'последний элемент'
Элементы массива являются свойствами, точно такими же, как, например, свойство toString , однако попытка получить элемент массива по имени его свойства приведёт к синтаксической ошибке, поскольку имя свойства не является допустимым именем JavaScript:
.log(arr.0); // синтаксическая ошибка
Это не особенность массивов или их свойств. В JavaScript к свойствам, начинающимся с цифры, невозможно обратиться посредством точечной нотации; к ним можно обратиться только с помощью скобочной нотации. Например, если у вас есть объект со свойством, названным ‘3d’ , вы сможете обратиться к нему только посредством скобочной нотации. Примеры:
var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; console.log(years.0); // синтаксическая ошибка console.log(years[0]); // работает как положено
.3d.setTexture(model, 'character.png'); // синтаксическая ошибка renderer['3d'].setTexture(model, 'character.png'); // работает как положено
Обратите внимание, что во втором примере 3d заключено в кавычки: ‘3d’ . Индексы можно заключать в кавычки (например years[‘2’] вместо years[2] ), но в этом нет необходимости. Значение 2 в выражении years[2] будет неявно приведено к строке движком JavaScript через метод преобразования toString . Именно по этой причине ключи ‘2’ и ’02’ будут ссылаться на два разных элемента в объекте years и следующий пример выведет true :
.log(years["2"] != years["02"]);
Аналогично, к свойствам объекта, являющимся зарезервированными словами(!) можно получить доступ только посредством скобочной нотации:
var promise = var: "text", array: [1, 2, 3, 4], >; console.log(promise["array"]);
Взаимосвязь свойства length с числовыми свойствами
Свойство массивов length взаимосвязано с числовыми свойствами. Некоторые встроенные методы массива (например, join , slice , indexOf и т.д.) учитывают значение свойства length при своём вызове. Другие методы (например, push , splice и т.д.) в результате своей работы также обновляют свойство length массива.
var fruits = []; fruits.push("банан", "яблоко", "персик"); console.log(fruits.length); // 3
При установке свойства в массиве, если свойство имеет действительный индекс и этот индекс выходит за пределы текущих границ массива, движок соответствующим образом обновит свойство length :
[5] = "манго"; console.log(fruits[5]); // 'манго' console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] console.log(fruits.length); // 6
Увеличиваем свойство length
.length = 10; console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] console.log(fruits.length); // 10
Однако, уменьшение свойства length приведёт к удалению элементов.
.length = 2; console.log(Object.keys(fruits)); // ['0', '1'] console.log(fruits.length); // 2
Более подробно эта тема освещена на странице, посвящённой свойству Array.length .
Создание массива с использованием результата сопоставления
Результатом сопоставления регулярного выражения строке является JavaScript-массив. Этот массив имеет свойства и элементы, предоставляющие информацию о сопоставлении. Подобные массивы возвращаются методами RegExp.exec , String.match и String.replace . Чтобы было проще понять, откуда и какие появились свойства и элементы, посмотрите следующий пример и обратитесь к таблице ниже:
// Сопоставляется с одним символом d, за которым следует один // или более символов b, за которыми следует один символ d // Запоминаются сопоставившиеся символы b и следующий за ними символ d // Регистр игнорируется var myRe = /d(b+)(d)/i; var myArray = myRe.exec("cdbBdbsbz");
Свойства и элементы, возвращаемые из данного сопоставления, описаны ниже:
| Свойство/Элемент | Описание | Пример |
|---|---|---|
| input | Свойство только для чтения, отражающее оригинальную строку, с которой сопоставлялось регулярное выражение. | cdbBdbsbz |
| index | Свойство только для чтения, являющееся индексом (отсчёт начинается с нуля) в строке, с которого началось сопоставление. | 1 |
| [0] | Элемент только для чтения, определяющий последние сопоставившиеся символы. | dbBd |
| [1], . [n] | Элементы только для чтения, определяющие сопоставившиеся подстроки, заключённые в круглые скобки, если те включены в регулярное выражение. Количество возможных подстрок не ограничено. | [1]: bB [2]: d |
Свойства
Значение свойства length конструктора массива равно 1.
Позволяет добавлять свойства ко всем объектам массива.
Методы
Array.from() Экспериментальная возможность
Создаёт новый экземпляр Array из массивоподобного или итерируемого объекта.
Возвращает true , если значение является массивом, иначе возвращает false .
Асинхронно наблюдает за изменениями в массиве, подобно методу Object.observe() для объектов. Метод предоставляет поток изменений в порядке их возникновения.
Создаёт новый экземпляр Array из любого количества аргументов, независимо от их количества или типа.
Экземпляры массива
Все экземпляры массива наследуются от Array.prototype . Изменения в объекте прототипа конструктора массива затронет все экземпляры Array .
Array.prototype.map()
Метод map() создаёт новый массив с результатом вызова указанной функции для каждого элемента массива.
Синтаксис
const new_array = arr.map(function callback( currentValue[, index[, array]]) < // Возвращает элемент для new_array >[, thisArg])
Параметры
Функция, вызываемая для каждого элемента массива arr . Каждый раз, когда callback выполняется, возвращаемое значение добавляется в new_array .
Функция callback , создающая элемент в новом массиве, принимает три аргумента:
Текущий обрабатываемый элемент массива.
Индекс текущего обрабатываемого элемента в массиве.
Массив, по которому осуществляется проход.
Необязательный параметр. Значение, используемое в качестве this при вызове функции callback
Возвращаемое значение
Новый массив, где каждый элемент является результатом callback функции.
Описание
Метод map вызывает переданную функцию callback один раз для каждого элемента, в порядке их появления и конструирует новый массив из результатов её вызова. Функция callback вызывается только для индексов массива, имеющих присвоенные значения, включая undefined . Она не вызывается для пропущенных элементов массива (то есть для индексов, которые никогда не были заданы, которые были удалены или которым никогда не было присвоено значение.
Функция callback вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.
Если в метод map был передан параметр thisArg , при вызове callback он будет использоваться в качестве значения this . В противном случае в качестве значения this будет использоваться значение undefined . В конечном итоге, значение this , наблюдаемое из функции callback , определяется согласно обычным правилам определения this , видимого из функции.
Метод map не изменяет массив, для которого он был вызван (хотя функция callback может это делать).
Диапазон элементов, обрабатываемых методом map , устанавливается до первого вызова функции callback . Элементы, добавленные в массив после начала выполнения метода map , не будут посещены функцией callback . Если существующие элементы массива изменяются функцией callback , их значения, переданные в функцию, будут значениями на тот момент времени, когда метод map посетит их; удалённые элементы посещены не будут.
Примеры
Пример: отображение массива чисел на массив квадратных корней
Следующий код берёт массив чисел и создаёт новый массив, содержащий квадратные корни чисел из первого массива.
const numbers = [1, 4, 9]; const roots = numbers.map(Math.sqrt); // теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9]
Пример: отображение массива чисел с использованием функции, содержащей аргумент
Следующий код показывает, как работает отображение, когда функция требует один аргумент. Аргумент будет автоматически присваиваться каждому элементу массива, когда map проходит по оригинальному массиву.
const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); // теперь doubles равен [2, 8, 18], а numbers всё ещё равен [1, 4, 9]
Пример: обобщённое использование map
Этот пример показывает, как использовать map на объекте строки String для получения массива байт в кодировке ASCII, представляющего значения символов:
const map = Array.prototype.map; const charCodes = map.call("Hello World", (x) => x.charCodeAt(0)); // теперь charCodes равен [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
Пример: обобщённое использование map вместе с querySelectorAll
Этот пример показывает, как пройтись по коллекции объектов, собранных с помощью querySelectorAll . В данном случае мы получаем все выбранные опции на экране и печатаем их в консоль:
const elems = document.querySelectorAll("select option:checked"); const values = Array.prototype.map.call(elems, ( value >) => value);
Более простым способом будет использование метода Array.from() .
Пример: использование map для переворачивания строки
const string = "12345"; const reversed = Array.prototype.map .call(string, (x) => x) .reverse() .join(""); // reversed равен '54321' // Бонус: используйте '===' для проверки того, является ли строка палиндромом
Более простым способом будет использование метода String.split() (см. пример обращение строки при помощи метода split()).
Пример: хитрый вариант использования
Распространённой практикой является использование колбэк-функции с одним аргументом (элемент, над которым производится операция). Некоторые функции также широко используется с одним аргументом, хотя они принимают дополнительные необязательные аргументы. Эти привычки могут привести к неожиданному поведению программы.
// Рассмотрим пример: ["1", "2", "3"].map(parseInt); // Хотя ожидаемый результат вызова равен [1, 2, 3], // в действительности получаем [1, NaN, NaN] // Функция parseInt часто используется с одним аргументом, но она принимает два. // Первый аргумент является выражением, а второй - основанием системы счисления. // В функцию callback Array.prototype.map передаёт 3 аргумента: // элемент, его индекс и сам массив. // Третий аргумент игнорируется parseInt, но не второй, следовательно, // возможна путаница. Смотрите запись в блоге для дополнительной информации. const returnInt = (element) => parseInt(element, 10); ["1", "2", "3"].map(returnInt); // Результатом является массив чисел (как и ожидалось) // Простейший способ добиться вышеозначенного поведения и избежать чувства "чё за!?": ["1", "2", "3"].map(Number); // [1, 2, 3]
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-array.prototype.map |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Polyfill of Array.prototype.map in core-js
- Array.prototype.forEach()
- объект Map (en-US)
- Array.from()
Как добавить новый объект в массив объекта?
А можно чуточку деталей? Пока не понятно, что у Вас не так. Но могу предложить метод concat для добавления нового элемента в массив, через конкатенацию массива без его изменения, либо через spread syntax (три точки), либо может подойдет push метод. Пока не понятно что и куда Вам не удается добавить.
17 сен 2019 в 9:17
Изначально menu.orders это пустой массив. Я хочу по клику добавить элемент массива из menu.products в массив menu.orders и проверить если такой массив который я пытаюсь добавить в массив orders уже существует тогда просто изменить count этого массива на +1. если нет то добавить этот элемент в массив orders
17 сен 2019 в 9:29
О стороне клиента. Экран разделен на две части в левом выводится на экран Продукты а в правом Заказы.
17 сен 2019 в 9:31
Так, задачу примерно понял, а что не работает? Что Вы ожидаете и что в результате? Добавленные комментарии по-хорошему бы перенести в вопрос, и дополнить его конкретной проблемой, которая у Вас возникает.
17 сен 2019 в 10:41
Не работает функция(именно эта функция) по клику! Я динамически вывожу на экран массив продуктов и плюс добавляю кнопки + (для первого раза: добавляет этот продукт в массив заказов (и для заказов тоже сделал динамический вывод на экран по перебору массива orders) а когда уже второй клик он просто будет увеличивать кол-во продукта на единицу ) вторая кнопка минус работает аналогичном образом в обратную сторону и когда кол-во заказа будет равняться единице и будет еще нажата кнопка минус заказ удаляется из массива тем же временем и с экрана!
Array.prototype.splice()
Метод splice() изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.
Синтаксис
array.splice(start[, deleteCount[, item1[, item2[, . ]]]])
Параметры
Индекс, по которому начинает изменять массив. Если больше длины массива, реальный индекс будет установлен на длину массива. Если отрицателен, указывает индекс элемента с конца.
Целое число, показывающее количество старых удаляемых из массива элементов. Если deleteCount равен 0, элементы не удаляются. В этом случае вы должны указать как минимум один новый элемент. Если deleteCount больше количества элементов, оставшихся в массиве, начиная с индекса start , то будут удалены все элементы до конца массива.
Необязательные параметры. Добавляемые к массиву элементы. Если вы не укажете никакого элемента, splice() просто удалит элементы из массива.
Возвращаемое значение
Массив, содержащий удалённые элементы. Если будет удалён только один элемент, вернётся массив из одного элемента. Если никакие элементы не будут удалены, вернётся пустой массив.
Описание
Если количество указанных вставляемых элементов будет отличным от количества удаляемых элементов, массив изменит длину после вызова.
Примеры
Удаляет 0 элементов по индексу 2 и вставляет «drum»
var myFish = ["angel", "clown", "mandarin", "sturgeon"]; var removed = myFish.splice(2, 0, "drum"); // myFish равен ["angel", "clown", "drum", "mandarin", "sturgeon"] // removed равен [], ничего не удалено
Удаляет 1 элемент по индексу 3
var myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"]; var removed = myFish.splice(3, 1); // removed равен ["mandarin"] // myFish равен ["angel", "clown", "drum", "sturgeon"]
Удаляет 1 элемент по индексу 2 и вставляет «trumpet»
var myFish = ["angel", "clown", "drum", "sturgeon"]; var removed = myFish.splice(2, 1, "trumpet"); // myFish равен ["angel", "clown", "trumpet", "sturgeon"] // removed равен ["drum"]
Удаляет 2 элемента начиная с индекса 0 и вставляет «parrot», «anemone» и «blue»
var myFish = ["angel", "clown", "trumpet", "sturgeon"]; var removed = myFish.splice(0, 2, "parrot", "anemone", "blue"); // myFish равен ["parrot", "anemone", "blue", "trumpet", "sturgeon"] // removed равен ["angel", "clown"]
Удаляет 2 элемента начиная с индекса 2
var myFish = ["parrot", "anemone", "blue", "trumpet", "sturgeon"]; var removed = myFish.splice(myFish.length - 3, 2); // myFish равен ["parrot", "anemone", "sturgeon"] // removed равен ["blue", "trumpet"]
Удаляет 1 элемент по индексу -2
var myFish = ["angel", "clown", "mandarin", "sturgeon"]; var removed = myFish.splice(-2, 1); // myFish равен ["angel", "clown", "sturgeon"] // removed равен s ["mandarin"]
Удаляет все элементы после индекса 2 (включительно)
var myFish = ["angel", "clown", "mandarin", "sturgeon"]; var removed = myFish.splice(2); // myFish равен ["angel", "clown"] // removed равен ["mandarin", "sturgeon"]
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-array.prototype.splice |
Совместимость с браузерами
BCD tables only load in the browser
Обратная совместимость
В JavaScript 1.2 метод splice() возвращал удалённый элемент только если был удалён один элемент (параметр deleteCount равен 1); в противном случае метод возвращал массив с удалёнными элементами. Обратите внимание, что последним браузером, использующим JavaScript 1.2, был Netscape Navigator 4, так что вы можете считать, что splice() всегда возвращает массив.
Смотрите также
- push() / pop() — добавление / удаление элементов с конца массива
- unshift() / shift() — добавление / удаление элементов с начала массива
- concat() — возвращает новый массив, состоящий из данного массива, соединённого с другими массивами и/или значениями
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 4 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.