Полезные приёмы работы с массивами в javascript

Array Methods

Here is a list of the methods of the Array object along with their description.

Sr.No.	Method & Description
1	concat() Returns a new array comprised of this array joined with other array(s) and/or value(s).
2	every() Returns true if every element in this array satisfies the provided testing function.
3	filter() Creates a new array with all of the elements of this array for which the provided filtering function returns true.
4	forEach() Calls a function for each element in the array.
5	indexOf() Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.
6	join() Joins all elements of an array into a string.
7	lastIndexOf() Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
8	map() Creates a new array with the results of calling a provided function on every element in this array.
9	pop() Removes the last element from an array and returns that element.
10	push() Adds one or more elements to the end of an array and returns the new length of the array.
11	reduce() Apply a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.
12	reduceRight() Apply a function simultaneously against two values of the array (from right-to-left) as to reduce it to a single value.
13	reverse() Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
14	shift() Removes the first element from an array and returns that element.
15	slice() Extracts a section of an array and returns a new array.
16	some() Returns true if at least one element in this array satisfies the provided testing function.
17	toSource() Represents the source code of an object
18	sort() Sorts the elements of an array
19	splice() Adds and/or removes elements from an array.
20	toString() Returns a string representing the array and its elements.
21	unshift() Adds one or more elements to the front of an array and returns the new length of the array.

In the following sections, we will have a few examples to demonstrate the usage of Array methods.

Previous Page
Print Page

Next Page  

Создание (объявление) массива

Массивы очень удобны, потому что в них можно хранить столько данных, сколько нужно. Максимально возможный размер js-массива— 232 элемента.

Нужно сказать JavaScript, что мы хотим создать именно массив. Для этого есть два варианта: значение в квадратных скобках или ключевое слово new.

Короткая запись: при помощи квадратных скобок

Заключённый в квадратные скобки список значений, разделённых запятыми.

var myArray = ;

Содержимое массива определяется тем, что находится между квадратными скобками. При этом каждое значение отделяется запятой.

Значения задаются так же, как и простые переменные, то есть строки нужно объявлять заключёнными в кавычки и т.д.

Чтобы объявить пустой массив, оставьте скобки пустыми:

var myArray = [];

Длинная запись: при помощи конструктора Array()

var lostArray = new Array("Джек", "Сойер", "Джон", "Дезмонд" );
var twinPeaksArray = new Array("Лора", 2, );

Ключевое слово new говорит JavaScript создать новый массив, значения которого передаются как параметры.

Если вы заранее знаете, сколько элементов будет в вашем массиве, можно сразу передать это значение в конструкторе.

var myArray = new Array(80);

Выражение, приведенное выше, создаст пустой массив, состоящий из 80 слотов со значениями undefined.

Объявление пустого массива:

var myArray = new Array();

Доступ к элементам массива

С помощью индекса каждого элемента можно работать с любыми данными в массиве, обращаясь к ним при помощи оператора []:

var myArray = ;
console.log(myArray); // Выводит “Джек”
console.log(myArray); // Выводит “Дезмонд”

В массиве может быть несколько уровней, то есть каждый элемент может сам быть массивом. В итоге получится двумерный js-массив. Как же обратиться к этим массивам, которые располагаются внутри других — «многомерным массивам»?

Для примера давайте рассмотрим массив, представляющий семью. Дети из этой семьи записаны отдельным массивом внутри главного:

var familyArray = ];

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

1	2
Мардж	Гомер	1	2
Барт	Лиза	Мэгги

Что делать, если мы хотим обратиться к значению «Лиза»? Можно обозначить позицию «Лизы» оранжевым: это индекс 1 внутри массива, расположенного на индексе 2 главного массива:

1	2
Мардж	Гомер	1	2
Барт	Лиза	Мэгги

Для обращения к значению «Лиза»:

var lisa = familyArray;
console.log(lisa); // выводит «Лиза»

Так можно продолжать практически бесконечно, что позволяет хранить в массивах вложенные друг в друга наборы данных и обращаться к ним при помощи индексов.

Как добавить элемент в массив JS

Мы разобрались, как обращаться к элементам массива при помощи соответствующих им индексов. Похожим образом можно добавлять (или изменять) элементы, объявляя, например:

var myArray = ;
myArray = "Джулиет";
console.log(myArray); // Выводит "Кейт, Сун, Джулиет"

В примере, приведенном выше, я добавил индекс 2 со значением «Джулиет», которого до этого не было.

Что произойдёт, если я объявлю элемент с индексом, перед которым нет других элементов? Массив сам создаст все недостающие элементы и присвоит им значение undefined:

var myArray = ;
myArray = "Джулиет";
console.log(myArray.length); // Выводит «6»
console.log(myArray); // Prints 

Узнать какова длина js-массива можно, воспользовавшись свойством length. В примере, приведенном выше, в массиве шесть элементов, и для трёх из них не было задано значение — они обозначены как undefined.

Метод push()

С помощью метода push() можно добавить в js-массив один или несколько элементов. Push() принимает неограниченное количество параметров, все они будут добавлены в конец массива.

var myArray = ;
myArray.push("Джулиет"); // Добавляет в конец массива элемент "Джулиет"
myArray.push("Либби", "Шеннон");// Добавляет в конец массива элементы "Либби" и "Шеннон"
console.log(myaArray); // Prints 

Метод unshift()

Метод unshift() работает также как и push(), только добавляет элементы в начало массива.

var myArray = ;
myArray.unshift("Джулиет"); // Добавляет в начало массива элемент "Джулиет"
myArray.unshift("Либби", "Шеннон"); // Добавляет в начало массива элементы "Либби" и "Шеннон"
console.log(myArray); // Выводит 

Methods pop/push, shift/unshift

A queue is one of the most common uses of an array. In computer science, this means an ordered collection of elements which supports two operations:

• appends an element to the end.
• get an element from the beginning, advancing the queue, so that the 2nd element becomes the 1st.

Arrays support both operations.

In practice we need it very often. For example, a queue of messages that need to be shown on-screen.

There’s another use case for arrays – the data structure named stack.

It supports two operations:

• adds an element to the end.
• takes an element from the end.

So new elements are added or taken always from the “end”.

A stack is usually illustrated as a pack of cards: new cards are added to the top or taken from the top:

For stacks, the latest pushed item is received first, that’s also called LIFO (Last-In-First-Out) principle. For queues, we have FIFO (First-In-First-Out).

Arrays in JavaScript can work both as a queue and as a stack. They allow you to add/remove elements both to/from the beginning or the end.

In computer science the data structure that allows this, is called deque.

Methods that work with the end of the array:

Extracts the last element of the array and returns it:

Append the element to the end of the array:

The call is equal to .

Methods that work with the beginning of the array:

Extracts the first element of the array and returns it:

Add the element to the beginning of the array:

Methods and can add multiple elements at once:

Associative Arrays

Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative
arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays always use numbered indexes.  

Example

const person = [];
person = «John»;
person = «Doe»;
person = 46;
person.length;    // Will return 3
person;        // Will return «John»

WARNING !!
If you use named indexes, JavaScript will redefine the array to an object.

After that, some array methods and properties will produce incorrect
results.

 Example:

const person = [];
person = «John»;
person = «Doe»;
person = 46;
person.length;     // Will return 0
person;         // Will return undefined

Методы перебора элементов

1. Перебор элементов массива с помощью метода forEach().

Пример:

2. Метод map() проходится по элементам массива и как результат возвращает новый массив.

Пример:

3. Метод filter() предназначен для фильтрации массива через функцию. Данный метод вернет новый массив в зависимости от истинности выполненного условия для каждого элемента.

Пример:

4. Метод every() используется для проверки значений массива на равенство. Если при вызове колкэк-функции каждый элемент массива будет соответствовать условиям, то данный метод вернет true.

Пример:

5. Метод some() похож на метод every(), но при этом он отличается тем, что возвращает true, если при вызове колбэк-функции хотя бы один из элементов будет равен указанному условию.

Пример:

6. Метод reduce() позволяет обойти каждый элемент массива с возможностью сохранения промежуточного результата. Reduce() часто используется в качестве замены нескольких методов, которые потребовалось бы применить для достижения аналогичного результата.

Пример:

7. Метод reduceRight() работает так же как и reduce(), но идет по элементам массива справа налево.

reduce/reduceRight

Метод «arr.reduce(callback)» используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата.

Это один из самых сложных методов для работы с массивами. Но его стоит освоить, потому что временами с его помощью можно в несколько строк решить задачу, которая иначе потребовала бы в разы больше места и времени.

Метод используется для вычисления на основе массива какого-либо единого значения, иначе говорят «для свёртки массива». Чуть далее мы разберём пример для вычисления суммы.

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

Аргументы функции :

• – последний результат вызова функции, он же «промежуточный результат».
• – текущий элемент массива, элементы перебираются по очереди слева-направо.
• – номер текущего элемента.
• – обрабатываемый массив.

Кроме , методу можно передать «начальное значение» – аргумент . Если он есть, то на первом вызове значение будет равно , а если у нет второго аргумента, то оно равно первому элементу массива, а перебор начинается со второго.

Проще всего понять работу метода на примере.

Например, в качестве «свёртки» мы хотим получить сумму всех элементов массива.

Вот решение в одну строку:

Разберём, что в нём происходит.

При первом запуске – исходное значение, с которого начинаются вычисления, равно нулю (второй аргумент ).

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

Поток вычислений получается такой

В виде таблицы где каждая строка – вызов функции на очередном элементе массива:

			результат
первый вызов
второй вызов
третий вызов
четвёртый вызов
пятый вызов

Как видно, результат предыдущего вызова передаётся в первый аргумент следующего.

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

Посмотрим, что будет, если не указать в вызове :

Результат – точно такой же! Это потому, что при отсутствии в качестве первого значения берётся первый элемент массива, а перебор стартует со второго.

Таблица вычислений будет такая же, за вычетом первой строки.

Метод arr.reduceRight работает аналогично, но идёт по массиву справа-налево.

Slicing an Array

The method slices out a piece of an array into a new
array.

This example slices out a part of an array starting from array element 1
(«Orange»):

const fruits = ;
const citrus = fruits.slice(1);

The method creates a new array. It does not remove any elements from
the source array.

This example slices out a part of an array starting from array element 3
(«Apple»):

const fruits = ;
const citrus = fruits.slice(3);

The method can take two arguments like .

The method then selects elements from the start argument, and up to (but not
including) the end argument.

const fruits = ;
const citrus = fruits.slice(1, 3);

If the end argument is omitted, like in the first examples, the
method slices out the rest of the array.

Циклы перебора элементов массива

1. Цикл for является «классикой» для перебора элементов массива и используется в JavaScript с начала его создания.

Пример:

2. Цикл for..in – так как массивы в JS это объекты, имеется возможность использовать данный цикл для переборов объектов.

Пример:

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

3. Цикл for..of – данный цикл возвращает значение элементов, но при этом он не предоставляет доступ к номерам элементов. Это является главным его недостатком.

Пример:

После циклов давайте разберем методы, которые имеют массивы перебора элементов.

Перебор элементов

Одним из самых старых способов перебора элементов массива является цикл for по цифровым индексам:

Но для массивов возможен и другой вариант цикла, :

Цикл не предоставляет доступа к номеру текущего элемента, только к его значению, но в большинстве случаев этого достаточно. А также это короче.

Технически, так как массив является объектом, можно использовать и вариант :

Но на самом деле это – плохая идея. Существуют скрытые недостатки этого способа:

1. Цикл выполняет перебор всех свойств объекта, а не только цифровых.

   В браузере и других программных средах также существуют так называемые «псевдомассивы» – объекты, которые выглядят, как массив. То есть, у них есть свойство и индексы, но они также могут иметь дополнительные нечисловые свойства и методы, которые нам обычно не нужны. Тем не менее, цикл выведет и их. Поэтому, если нам приходится иметь дело с объектами, похожими на массив, такие «лишние» свойства могут стать проблемой.

2. Цикл оптимизирован под произвольные объекты, не массивы, и поэтому в 10-100 раз медленнее. Увеличение скорости выполнения может иметь значение только при возникновении узких мест. Но мы всё же должны представлять разницу.

В общем, не следует использовать цикл для массивов.

JS Учебник

JS ГлавнаяJS ВведениеJS Что? Где? Куда?JS ВыводJS ЗаявленияJS СинтаксисJS КомментарииJS ПеременныеJS ОператорыJS АрифметикаJS ПрисваиванияJS Типы данныхJS ФункцииJS ОбъектыJS СобытияJS СтрокиJS Методы строкJS ЧислаJS Методы чиселJS МассивыJS Методы массиваJS Сортировка массиваJS Итерация массиваJS Объекты датJS Формат датJS Метод получения датJS Метод набора датJS Математические…JS Случайные числаJS БулевыJS Сравнение…JS Заявления if…elseJS Заявление switchJS Цикл forJS Цикл whileJS Заявление break…JS Преобразование…JS Битовые…JS Регулярные выраженияJS ОшибкиJS ОбластьJS ПодъемныйJS СтрогийJS Ключевое слово thisJS Ключевое слово letJS КонстантыJS Функция стрелкиJS КлассыJS ОтладчикJS Руководство стиляJS ПрактикаJS Распространенные ошибкиJS ЭффективностьJS Зарезервированные словаJS ВерсииJS Версия ES5JS Версия ES6JS Версия 2016JS Версия 2017JS JSON

Поиск по массиву

Если вы хотите найти в массиве определенное значение, вы можете просто использовать indexOf() и lastIndexOf(). Если значение найдено, оба метода возвращают индекс, представляющий элемент массива. Если значение не найдено, возвращается -1. Метод indexOf() возвращает первый индекс, тогда как lastIndexOf() возвращает последний.

var fruits = ;

document.write(fruits.indexOf("Apple")); // Результат: 0
document.write(fruits.indexOf("Banana")); // Результат: 1
document.write(fruits.indexOf("Pineapple")); // Результат: -1

Оба метода также принимают необязательный целочисленный параметр, который указывает индекс в массиве, с которого начинается поиск (по умолчанию — с первого или последнего элемента соответственно).

Вы также можете использовать метод includes(), чтобы узнать, содержит ли массив определенный элемент или нет. Этот метод принимает те же параметры, что и методы indexOf() и lastIndexOf(), но вместо номера индекса возвращает true или false. Например:

var arr = ;

document.write(arr.includes(1)); // Результат: true
document.write(arr.includes(6)); // Результат: false

Если вы хотите выполнить поиск в массиве по определенному условию, вы можете использовать метод JavaScript find(), который недавно появился в ES6. Этот метод возвращает значение первого элемента в массиве, который удовлетворяет предоставленной функции тестирования. В противном случае он возвращает неопределенное значение (undefined).

var arr = ;

var result = arr.find(function(element) {
  return element > 4;
});
document.write(result); // Результат: 5

Есть еще один метод, похожий на find(), это метод findIndex(), который возвращает индекс найденного элемента в массиве вместо его значения.

Метод find() ищет только первый элемент, который удовлетворяет условиям предоставленной функции тестирования. Однако, если вы хотите получить все совпадающие элементы, вы можете использовать метод filter().

Метод filter() создает новый массив со всеми элементами, которые успешно проходят данный тест. Следующий пример покажет вам, как это на самом деле работает:

var arr = ;

var result = arr.filter(function(element) {
  return element > 4;
});
document.write(result); // Результат: 5,7
document.write(result.length); // Результат: 2

блок 3

JavaScript new Array()

JavaScript has a built in array constructor .

But you can safely use instead.

These two different statements both create a new empty array named points:

const points = new Array();
const points = [];

These two different statements both create a new array containing 6 numbers:

const points = new Array(40, 100, 1, 5, 25, 10);
const points = ;

The keyword can produce some unexpected results:

// Create an array with three elements:
const points = new Array(40, 100, 1);

// Create an array with two elements:
const points = new Array(40, 100);

// Create an array with one element ???
const points = new Array(40);  

A Common Error

const points = ;

is not the same as:

const points = New Array(40);

// Create an array with one element:
const points = ;

// Create an array with 40 undefined elements:
const points = new Array(40);  

Работа с массивами JS — метод slice

Можно извлечь часть массива с помощью метода slice(begin):
var arr = ;
var arr2 = arr.slice(0,2) // принимает 2 элемента, начиная с 0
alert(arr2.join(', ')) // "Why, learn"

Обратите внимание, что этот метод не изменяет в JavaScript количество элементов в массиве, а копирует его часть. Можно опустить второй аргумент, чтобы получить все элементы, начиная с определенного индекса:

Можно опустить второй аргумент, чтобы получить все элементы, начиная с определенного индекса:

var arr = ;
var arr2 = arr.slice(1) // принимает все элементы, начиная с 1
alert(arr2.join(', ')) // "learn, JavaScript"

Метод поддерживает отрицательные индексы, так же, как String#slice.

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS LetJS ConstJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS String SearchJS String TemplatesJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS Array ConstJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop For InJS Loop For OfJS Loop WhileJS BreakJS IterablesJS SetsJS MapsJS TypeofJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS Arrow FunctionJS ClassesJS JSONJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved Words

Работа с массивами JS — join и split

Иногда нужен быстрый способ преобразовать JavaScript массив в строку. Именно для этого предназначен метод join.

Он объединяет массив в строку, используя заданный разделитель:

var fruits = ;
var str = fruits.join(', ');
alert(str);

Обратное преобразование легко выполняется с помощью метода split:

var fruits = "Apple,Orange,Peach";
var arr = fruits.split(',');
// arr содержит теперь 
alert(arr);

Задание для самостоятельного выполнения

Объект включает в себя свойство className, которое содержит имена классов, разделенные пробелами:

var obj = {
	className: 'open menu' 
}

Напишите функцию addClass(obj, cls), которая добавляет класс cls, но только если он не существует:

ddClass(obj, 'new') // obj.className='open menu new'
addClass(obj, 'open')  // без изменений (class already exists)
addClass(obj, 'me') // obj.className='open menu new me'
alert(obj.className)  //

Решение

Нужно разделить className и цикл на части. Если класс не найден, тогда он добавляется.

Цикл немного оптимизирован для увеличения производительности:

function addClass(elem, cls) {
  for(var c = elem.className.split(' '), i=c.length-1; i>=0; i--) {
    if (c == cls) return
  }
	
  elem.className += ' '+cls
}
var obj = { className: 'open menu' }
addClass(obj, 'new')
addClass(obj, 'open') 
alert(obj.className)   // open menu new

В приведенном выше примере переменная c определяется в начале цикла, и для ее последнего индекса задается значение i.

Сам цикл обрабатывается в обратном направлении, заканчиваясь условием i>=0. Потому что i>=0 проверить быстрее, чем i. Что в JavaScript ускоряет поиск в массиве.

5 ответов

Лучший ответ

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

Хорошо, теперь, когда фактические правила были раскрыты (используйте только для удаления значений, а не временных массивов), вот метод, который использует только для удаления значений из массива. Предполагается, что исходный порядок не нужно сохранять (хотя это можно сделать с помощью большего количества кода). Это работает в обратном порядке через массив и каждый раз, когда он находит отрицательное значение, он меняет это значение на последнее значение в массиве, а затем сбрасывает это отрицательное значение:

Рабочая демонстрация: http://jsfiddle.net/jfriend00/wo8fhoor/

И вот версия, которая сохраняет порядок массива, используя только для удаления элементов из массива. Когда он находит отрицательное значение, он копирует все последующие элементы после него в массив (таким образом удаляя его) и затем использует , чтобы сократить массив на единицу:

Рабочая демонстрация: http://jsfiddle.net/jfriend00/uvqx6hq0/

Эти версии кода появились до того, как были раскрыты полные правила.

Вы можете циклически перемещаться по массиву, каждый раз выталкивая последний элемент, а затем создавать новый массив только с теми значениями, которые вам нравятся:

Рабочая демонстрация: http://jsfiddle.net/jfriend00/2atz6ck9/

удаляет только последний элемент в массиве. Для удаления этого конкретного элемента не требуется аргумент, поэтому вы не можете использовать его для удаления n-го элемента в массиве.

В реальном мире вы либо использовали бы для создания нового массива, либо использовали бы для удаления отдельных элементов.

Вот решение:

Рабочая демонстрация: http://jsfiddle.net/jfriend00/gqt5avLb/

И вот решение с использованием :

Или в ES6:

2

jfriend00
11 Дек 2018 в 21:06

Это , несмотря на мои предыдущие комментарии, возможно с , но оно требует создания другого массива, итерируя по существующему массиву:

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

David says reinstate Monica
22 Фев 2015 в 00:54

Попробуй это:

Конечно, это не хороший способ удалить негативы.

Oriol
22 Фев 2015 в 00:52

Возможно, вы можете использовать 2D-массив.

Это ни в коем случае не эффективное решение, но если у вас есть небольшое количество элементов, это должно быть хорошо.

EDIT :

Вот функция для создания 2D-массива:

Lee Yi
22 Фев 2015 в 02:20

Вы можете достичь того, чего хотите, используя функцию .

Кроме того, вы не можете одновременно пытаться перебирать элементы массива и удалять элементы из этого массива. Это не имеет смысла. Вы можете фильтровать элементы массива, вы можете удалять определенные элементы, вы можете добавлять элементы в массив, но вы определенно не можете циклически просматривать его элементы и в то же время удалять элементы из него.

Christos
22 Фев 2015 в 00:55

Как извлечь часть массива

Если вы хотите извлечь часть массива (то есть подмассив), но оставить исходный массив без изменений, вы можете использовать метод slice(). Этот метод принимает 2 параметра: начальный индекс (индекс, с которого начинается извлечение) и необязательный конечный индекс (индекс, перед которым заканчивается извлечение), например arr.slice(startIndex, endIndex). Пример:

var fruits = ;
var subarr = fruits.slice(1, 3);
document.write(subarr); // Результат: Banana,Mango

Если параметр endIndex опущен — извлекаются все элементы до конца массива. Вы также можете указать отрицательные индексы или смещения — в этом случае метод slice() извлекает элементы из конца массива, а не из начала.