Массивы в JavaScript

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

Так как объект в JavaScript — это набор свойств и их значений в памяти, на которые можно сослаться с помощью идентификатора, а массив, в свою очередь, является объектом, его также можно представить в виде набора свойств и их значений:

именование свойства, или ключ - это номер (индекс) элемента массива;
значение свойства - собственно значение элемента массива.

Пример

numArray = [12, 45, 67, 456, 34];

for(key in numArray){
  console.log(`Ключ ${key}, значение ${numArray[key]}`)
}
// Ключ 0, значение 12
// Ключ 1, значение 45
// Ключ 2, значение 67
// Ключ 3, значение 456
// Ключ 4, значение 34

numArray = [12, 45, 67, 456, 34];

for(key in numArray){

console.log(`Ключ ${key}, значение ${numArray[key]}`)

}

// Ключ 0, значение 12

// Ключ 1, значение 45

// Ключ 2, значение 67

// Ключ 3, значение 456

// Ключ 4, значение 34

[свернуть]

Ни размер JavaScript-массива, ни типы его элементов не являются фиксированными.

numArray = [12, true, "67", null, NaN, undefined];

for (key in numArray) {
  console.log(key, numArray[key], typeof numArray[key]);
}
// 0 12 number
// 1 true boolean
//  2 67 string
// 3 null object
// 4 NaN number
// 5 undefined undefined

numArray = [12, true, "67", null, NaN, undefined];

for (key in numArray) {

console.log(key, numArray[key], typeof numArray[key]);

}

// 0 12 number

// 1 true boolean

// 2 67 string

// 3 null object

// 4 NaN number

// 5 undefined undefined

Прототипы массива содержат методы для операций обхода и изменения массива.

Проверка объекта на тип "массив" (метод isArray):

Метод Array.isArray(obj) возвращает true, если объект obj является массивом и false, если он массивом не является.

numArray = [12, 45, 67, 456, 34];
value = Array.isArray(numArray);
console.log(value, numArray); // true Array(5) [ 12, 45, 67, 456, 34 ]

numArray = [12, 45, 67, 456, 34];

value = Array.isArray(numArray);

console.log(value, numArray); // true Array(5) [ 12, 45, 67, 456, 34 ]

Примеры

// Все следующие вызовы вернут true

Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());

Array.isArray(Array.prototype); // Малоизвестный факт: Array.prototype сам является массивом

// Все следующие вызовы вернут false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray("Array");
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

// Все следующие вызовы вернут true

Array.isArray([]);

Array.isArray([1]);

Array.isArray(new Array());

Array.isArray(Array.prototype); // Малоизвестный факт: Array.prototype сам является массивом

// Все следующие вызовы вернут false

Array.isArray();

Array.isArray({});

Array.isArray(null);

Array.isArray(undefined);

Array.isArray(17);

Array.isArray("Array");

Array.isArray(true);

Array.isArray(false);

Array.isArray({ __proto__: Array.prototype });

[свернуть]

Варианты неправильного применения массивов:

Добавление свойства, отличного от типа number, например: arr.test = 5.
Создание «дыр», например: добавление arr[0], затем arr[1000] (между ними ничего нет) (подробнее...).
Заполнение массива в обратном порядке, например: arr[1000], arr[999] и т. д.

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

Если вам в объекте нужны произвольные ключи, то вполне возможно, лучше подойдёт обычный объект {}.

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

Существует два варианта синтаксиса для создания (объявления) пустого массива:

let arr = new Array();
let arr = [];

1 2	let arr = new Array(); let arr = [];

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

var val= new Array(5,7,9);
console.log(val); // Array(3) [ 5, 7, 9 ]

var fruits = ['Яблоко', 'Банан'];
console.log(fruits.length); // 2

const numArray = [12, 45, 67, 456, 34];
console.log(numArray.length); // 5

var val= new Array(5,7,9);

console.log(val); // Array(3) [ 5, 7, 9 ]

var fruits = ['Яблоко', 'Банан'];

console.log(fruits.length); // 2

const numArray = [12, 45, 67, 456, 34];

console.log(numArray.length); // 5

ВАЖНО! Массив в JavaScript инициализируется с помощью переданных элементов, за исключением случая, когда в конструктор Array передаётся один аргумент и этот аргумент является числом.

Если конструктору Array передаётся единственный аргумент, являющийся целым числом в диапазоне от 0 до 2³²-1 (включительно), будет возвращён новый пустой JavaScript-массив, длина которого установится в это число:

var val= new Array(3);
console.log(val); // Array(3) [ undefined, undefined, undefined ]

1 2	var val= new Array(3); console.log(val); // Array(3) [ undefined, undefined, undefined ]

Если аргументом будет любое другое число, возникнет исключение RangeError.

Многомерные массивы

Массивы могут содержать элементы, которые тоже являются массивами. Это можно использовать для создания многомерных массивов, например, для хранения матриц:

let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];

alert( matrix[1][1] ); // 5, центральный элемент

let matrix = [

[1, 2, 3],

[4, 5, 6],

[7, 8, 9]

];

alert( matrix[1][1] ); // 5, центральный элемент

[свернуть]

Получение клона массива с использованием оператора rest:

const members = ["Alex", ["login", "age"]]; // исходный массив

// Получение клона массива
const [...newMembers] = members;
// или
const newMembers = [...members];

console.log(newMembers); // Array(3) [ "Alex", ["NAV", "age 35" ]] (клон массива)

// Проверка клонирования
console.log(members === newMembers); // false
members[1] = "Olga";
console.log("members: ", members); // members: Array [ "Alex", "Olga" ]
console.log("newMembers: ", newMembers); // newMembers: Array [ "Alex", (2) […] ]

const members = ["Alex", ["login", "age"]]; // исходный массив

// Получение клона массива

const [...newMembers] = members;

// или

const newMembers = [...members];

console.log(newMembers); // Array(3) [ "Alex", ["NAV", "age 35" ]] (клон массива)

// Проверка клонирования

console.log(members === newMembers); // false

members[1] = "Olga";

console.log("members: ", members); // members: Array [ "Alex", "Olga" ]

console.log("newMembers: ", newMembers); // newMembers: Array [ "Alex", (2) […] ]

Клонирование массива с добавлением (изменением) элементов:

// Добавление элемента
const members = ["Alex", ["login", "age"]]; // исходный массив

const newMembers = [...members, 'newAge']; 
console.log(newMembers); // Array(3) [ "Alex", (2) […], "newAge" ]

// Добавление элемента

const members = ["Alex", ["login", "age"]]; // исходный массив

const newMembers = [...members, 'newAge'];

console.log(newMembers); // Array(3) [ "Alex", (2) […], "newAge" ]

// Изменение значения элемента
const user = {
  firstName: "Alex",
  lastName: "NAV",
  age: 35,
  info: { adress: "Russia", skills: ["JavaScript", "teacher"] }
};
let newUser = { ...user, firstName: "Olga" };
console.log(newUser); // Object { firstName: "Olga", lastName: "NAV", age: 35, info: {…} }

// Изменение значения элемента

const user = {

firstName: "Alex",

lastName: "NAV",

age: 35,

info: { adress: "Russia", skills: ["JavaScript", "teacher"] }

};

let newUser = { ...user, firstName: "Olga" };

console.log(newUser); // Object { firstName: "Olga", lastName: "NAV", age: 35, info: {…} }

Создание массива методом Array.of()

Метод Array.of() создаёт новый экземпляр массива Array из произвольного числа аргументов (вне зависимости от числа или типа аргумента).

Разница между Array.of() и конструктором Array:

заключается в обработке целочисленных аргументов:
1. Array.of(7) создаёт массив с одним элементом 7,
2. Array(7) создаёт пустой массив со значением свойства length равным 7 (подразумевается 7 пустых слотов, а не слоты со значением undefined).

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // массив с 7 пустыми слотами
Array(1, 2, 3); // [1, 2, 3]

Array.of(undefined); // [undefined]

var arr = ["Alex", "Mary", "Serg"];
Array.of(undefined,arr); // [ [undefined] Array(3) [ "Alex", "Mary", "Serg" ] ]

Array.of(7); // [7]

Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // массив с 7 пустыми слотами

Array(1, 2, 3); // [1, 2, 3]

Array.of(undefined); // [undefined]

var arr = ["Alex", "Mary", "Serg"];

Array.of(undefined,arr); // [ [undefined] Array(3) [ "Alex", "Mary", "Serg" ] ]

Возвращаемое значение: новый массив Array.

[свернуть]

Создание массива методом Array.from()

Метод Array.from() позволяет создавать массивы из:

массивоподобных объектов (объектов со свойством length и элементами по индексным ключам) или
итерируемых объектов (объектов, из которых вы можете достать их элементы, например Map или Set).

Синтаксис:

Array.from(arrayLike[, mapFn[, thisArg]])

где
arrayLike - массивоподобный или итерируемый объект, преобразуемый в массив;
mapFn (необязательный) - отображающая функция, вызываемая для каждого элемента массива;
thisArg (необязательный) - значение, используемое в качестве this при выполнении функции mapFn.

Метод Array.from() возвращает новый экземпляр Array.

var arr = ["Alex", "Mary", "Serg"];

arr_1 = Array.from(arr); // создаем новый экземпляр (дубль) массива (не копирование по ссылке)
arr_1[1] = "Olga";
console.log(arr_1); // Array(3) [ "Alex", "Olga", "Serg" ]
console.log(arr); // Array(3) [ "Alex", "Mary", "Serg" ]

console.log(Array.from("foo")); // Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x)); // Array [2, 4, 6]

// Генерирование последовательности чисел
Array.from({ length: 5 }, (v, k) => k); // [0, 1, 2, 3, 4]

var arr = ["Alex", "Mary", "Serg"];

arr_1 = Array.from(arr); // создаем новый экземпляр (дубль) массива (не копирование по ссылке)

arr_1[1] = "Olga";

console.log(arr_1); // Array(3) [ "Alex", "Olga", "Serg" ]

console.log(arr); // Array(3) [ "Alex", "Mary", "Serg" ]

console.log(Array.from("foo")); // Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x)); // Array [2, 4, 6]

// Генерирование последовательности чисел

Array.from({ length: 5 }, (v, k) => k); // [0, 1, 2, 3, 4]

[свернуть]

Создание нового массива из данного с изменением элементов переданной функцией ( Array.map() )

Метод Array.map() создаёт новый массив с результатами вызова указанной функции на каждом элементе данного массива.

var new_array = arr.map(function callback(currentValue, index, array) {
// код, изменяющий элемент для new_array
}[, thisArg])

var new_array = arr.map(function callback(currentValue, index, array) {

// код, изменяющий элемент для new_array

}[, thisArg])

Параметры метода Array.map():

callback - функция, создающая элемент в новом массиве, принимает три аргумента:
1. currentValue - текущий обрабатываемый элемент массива;
2. index - индекс текущего обрабатываемого элемента в массиве;
3. array - массив, по которому осуществляется проход;
thisArg (необязательный) - значение, используемое в качестве this при вызове функции callback.

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

Метод map вызывает переданную функцию callback один раз для каждого элемента, в порядке их появления и конструирует новый массив из результатов её вызова. Функция callback вызывается только для индексов массива, имеющих присвоенные значения, включая undefined. Она не вызывается для пропущенных элементов массива (то есть для индексов, которые никогда не были заданы, которые были удалены или которым никогда не было присвоено значение.

Если в метод map был передан параметр thisArg, при вызове callback он будет использоваться в качестве значения this. В противном случае в качестве значения this будет использоваться значение undefined. В конечном итоге, значение this, наблюдаемое из функции callback, определяется согласно обычным правилам определения this, видимого из функции.

Метод map не изменяет массив, для которого он был вызван (хотя функция callback может это делать).

Диапазон элементов, обрабатываемых методом map, устанавливается до первого вызова функции callback. Элементы, добавленные в массив после начала выполнения метода map, не будут посещены функцией callback. Если существующие элементы массива изменяются функцией callback, их значения, переданные в функцию, будут значениями на тот момент времени, когда метод map посетит их; удалённые элементы посещены не будут.

var arr = ["Есть", "жизнь", "на", "Марсе"];

var arrLength = [];
for (var i = 0; i < arr.length; i++) {
  arrLength[i] = arr[i].length;
}
console.log(arrLength); // 4,5,2,5

// более короткая запись с помощью метода map()

const arrLengthNew = arr.map(item => item.length);
console.log(arrLengthNew); // 4,5,2,5

var arr = ["Есть", "жизнь", "на", "Марсе"];

var arrLength = [];

for (var i = 0; i < arr.length; i++) {

arrLength[i] = arr[i].length;

}

console.log(arrLength); // 4,5,2,5

// более короткая запись с помощью метода map()

const arrLengthNew = arr.map(item => item.length);

console.log(arrLengthNew); // 4,5,2,5

Отображение массива квадратных корней из массива чисел:

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt); //  roots = [1, 2, 3], а numbers = [1, 4, 9] (не изменился)

1 2	var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); // roots = [1, 2, 3], а numbers = [1, 4, 9] (не изменился)

Отображение массива чисел с использованием функции, содержащей аргумент:

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
}); // doubles = [2, 8, 18], а numbers = [1, 4, 9] (не изменился)

// или с использованием стрелочной функции

const doubleNew = numbers.map(item => (item *= 2));
console.log(doubleNew); // Array(3) [ 2, 8, 18 ]

var numbers = [1, 4, 9];

var doubles = numbers.map(function(num) {

return num * 2;

}); // doubles = [2, 8, 18], а numbers = [1, 4, 9] (не изменился)

// или с использованием стрелочной функции

const doubleNew = numbers.map(item => (item *= 2));

console.log(doubleNew); // Array(3) [ 2, 8, 18 ]

Использование метода map() на объекте строки String для получения массива байт в кодировке ASCII, представляющего значения символов:

var map = Array.prototype.map;
var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
// a = [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

var map = Array.prototype.map;

var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });

// a = [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

Подробнее в примерах о методе map()

[свернуть]

ВАЖНО! Некоторые методы обхода массивов принимают в качестве аргументов функции, вызываемые при обработке массива. Если вам нужно изменить массив, лучше скопируйте его в новый массив. Подробнее...

Работа с элементами массива в JS

Массивы в JavaScript индексируются с нуля:

первый элемент массива имеет индекс, равный 0,
индекс последнего элемента равен значению свойства массива length минус 1.

var arr = ['первый элемент', 'второй элемент', 'последний элемент'];
console.log(arr[0]); // 'первый элемент'
console.log(arr[1]); // 'второй элемент'
console.log(arr[arr.length - 1]); // 'последний элемент'

var arr = ['первый элемент', 'второй элемент', 'последний элемент'];

console.log(arr[0]); // 'первый элемент'

console.log(arr[1]); // 'второй элемент'

console.log(arr[arr.length - 1]); // 'последний элемент'

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

Подробнее

Например, если у вас есть объект со свойством, названным '3d', вы сможете обратиться к нему только посредством скобочной нотации. Примеры:

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0); // синтаксическая ошибка
console.log(years[0]); // работает как положено
renderer.3d.setTexture(model, 'character.png'); // синтаксическая ошибка
renderer['3d'].setTexture(model, 'character.png'); // работает как положено

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];

console.log(years.0); // синтаксическая ошибка

console.log(years[0]); // работает как положено

renderer.3d.setTexture(model, 'character.png'); // синтаксическая ошибка

renderer['3d'].setTexture(model, 'character.png'); // работает как положено

Индексы можно заключать в кавычки (например years['2'] вместо years[2]), но в этом нет необходимости. Значение 2 в выражении years[2] будет неявно приведено к строке движком JavaScript через метод преобразования toString. Именно по этой причине ключи '2' и '02' будут ссылаться на два разных элемента в объекте years и следующий пример выведет true:

console.log(years['2'] != years['02']);

1	console.log(years['2'] != years['02']);

Аналогично, к свойствам объекта, являющимся зарезервированными словами(!) можно получить доступ только посредством скобочной нотации:

var promise = {
'var' : 'text',
'array': [1, 2, 3, 4]
};

console.log(promise['array']);

var promise = {

'var' : 'text',

'array': [1, 2, 3, 4]

};

console.log(promise['array']);

[свернуть]

Взаимосвязь свойства length с числовыми свойствами массивов

Свойство массивов length взаимосвязано с числовыми свойствами. Некоторые встроенные методы массива (например, join, slice, indexOf и т.д.) учитывают значение свойства length при своём вызове. Другие методы (например, push, splice и т.д.) в результате своей работы также обновляют свойство length массива.

При установке свойства в массиве, если свойство имеет действительный индекс и этот индекс выходит за пределы текущих границ массива, движок соответствующим образом обновит свойство length:

const numArray = [12, 45, 67, 456, 34];
let value;

value = numArray.length;
console.log(value, numArray); // 5 Array(5) [ 12, 45, 67, 456, 34 ]

numArray.length = 0;
console.log(value, numArray); // 5 Array [] - получили пустой массив

numArray.length = 100;
console.log(value, numArray); // 5 Array(100) [] - получили массив из 100 значений undefined, так как перезаписали свойство массива length

const numArray = [12, 45, 67, 456, 34];

let value;

value = numArray.length;

console.log(value, numArray); // 5 Array(5) [ 12, 45, 67, 456, 34 ]

numArray.length = 0;

console.log(value, numArray); // 5 Array [] - получили пустой массив

numArray.length = 100;

console.log(value, numArray); // 5 Array(100) [] - получили массив из 100 значений undefined, так как перезаписали свойство массива length

Уменьшение свойства length приводит к удалению элементов массива:

var arr = ["Alex", "Mary", "Serg"];

console.log(arr.length); // 3
console.log(arr); // Array(3) [ "Alex", "Mary", "Serg" ]

arr.length= 1;
console.log(arr); // Array [ "Alex" ]

var arr = ["Alex", "Mary", "Serg"];

console.log(arr.length); // 3

console.log(arr); // Array(3) [ "Alex", "Mary", "Serg" ]

arr.length= 1;

console.log(arr); // Array [ "Alex" ]

[свернуть]

Поиск индекса (номера) элемента в массиве ( Array.indexOf(), Array.lastIndexOf() )

Метод Array.indexOf() возвращает:

первый (наименьший) индекс элемента внутри массива, равный указанному значению;
или -1, если значение не найдено.

const fruits=["Клубника", "Банан", "Манго"];

var pos = fruits.indexOf('Банан'); 
console.log(pos); // 1

const fruits=["Клубника", "Банан", "Манго"];

var pos = fruits.indexOf('Банан');

console.log(pos); // 1

Метод Array.lastIndexOf() возвращает:

последний (наибольший) индекс элемента внутри массива, равный указанному значению;
или -1, если значение не найдено.

const numArr = [67, 45, 67, 456, 34];
console.log(numArr.lastIndexOf(67)); // 2

1 2	const numArr = [67, 45, 67, 456, 34]; console.log(numArr.lastIndexOf(67)); // 2

[свернуть]

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

var fruits = ['Яблоко', 'Банан']; 
var first = fruits[0]; // Яблоко
var last = fruits[fruits.length - 1]; // Банан

const numArr = [12, 45, 67, 456, 34];
value=numArr[4];
console.log(value); // 34

var fruits = ['Яблоко', 'Банан'];

var first = fruits[0]; // Яблоко

var last = fruits[fruits.length - 1]; // Банан

const numArr = [12, 45, 67, 456, 34];

value=numArr[4];

console.log(value); // 34

[свернуть]

Итерирование (перебор элементов) массива ( Array.forEach() )

Для перебора элементов массива используется метод forEach(callback[, thisArg]), который для каждого элемента массива вызывает функцию callback. При этом в функцию он передаёт три параметра callback(item, i, arr), где:

item – очередной элемент массива;
i – номер элемента массива;
arr – массив, который перебирается.

Второй, необязательный аргумент forEach позволяет указать контекст this для callback.

Метод forEach ничего не возвращает, его используют только для перебора (вместо цикла for).

var arr = ["Alex", "Mary", "Serg"];
arr.forEach(function(item, i, arr) {
  console.log(i + ": " + item + " (массив: " + arr + ")"); 
});

// 0: Alex (массив: Alex,Mary,Serg)
// 1: Mary (массив: Alex,Mary,Serg)
// 2: Serg (массив: Alex,Mary,Serg)

var arr = ["Alex", "Mary", "Serg"];

arr.forEach(function(item, i, arr) {

console.log(i + ": " + item + " (массив: " + arr + ")");

});

// 0: Alex (массив: Alex,Mary,Serg)

// 1: Mary (массив: Alex,Mary,Serg)

// 2: Serg (массив: Alex,Mary,Serg)

[свернуть]

Добавление и удаление элемента массива: push(), unshift(), pop(), shift()

Добавление элемента в конец массива (метод push() )

Метод push():

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

Метод push не является привязанным к типу Array: этот метод может быть вызван или применён и к массивоподобным объектам.

Особенности метода push():

Если свойство length не может быть преобразовано в число, будет использован индекс 0. Если свойство length не существует, то в этом случае оно будет создано.
К строкам (как массивоподобным объектам) метод push() применён быть не может, так как строки являются неизменяемыми.

const numArray = [12, 45, 67, 456, 34];
let value;

value = numArray.push(100); // добавление элемента в конец массива, переменная value принимает новое значение свойства length
console.log(value, numArray); // 6 Array(6) [ 12, 45, 67, 456, 2525, 100 ]

const numArray = [12, 45, 67, 456, 34];

let value;

value = numArray.push(100); // добавление элемента в конец массива, переменная value принимает новое значение свойства length

console.log(value, numArray); // 6 Array(6) [ 12, 45, 67, 456, 2525, 100 ]

Примеры

Функция, которая принимает значение переменной n и возвращает массив, заполненный числами от 1 до n

function getArray(num) {
  const arr = [];
  for (let i = 0; i < num; i++) {
    arr.push[i]; // в данном случае это аналог arr[i] = i + 1;    
  }
  return arr;
}

// ИЛИ

function returnArray(n) {
  let myArray = [];
  while (n > 0) {
    myArray.push(n);
    n--;
  }
  return myArray;
}

function getArray(num) {

const arr = [];

for (let i = 0; i < num; i++) {

arr.push[i]; // в данном случае это аналог arr[i] = i + 1;

}

return arr;

}

// ИЛИ

function returnArray(n) {

let myArray = [];

while (n > 0) {

myArray.push(n);

n--;

}

return myArray;

}

[свернуть]

Добавление элемента в начало массива (метод unshift() )

Метод unshift():

добавляет элементы в начало массива;
возвращает новое значение свойства length объекта, для которого был вызван данный метод.

Метод unshift() не является привязанным к типу Array: этот метод может быть вызван или применён и к массивоподобным объектам.

const numberArray = [12, 45, 67, 456, 34];
let value;

value = numberArray.unshift(200,100); // добавление элементов в начало массива, переменная value принимает новое значение свойства length 
console.log(value, numberArray); // 7 Array (7) [200, 100, 12, 45, 67, 456, 34]

// Ещё пример

const numArray = [10];
numArray.unshift([-200]); // добавление элементов в начало массива
console.log(numArray); // Array (2) [[-200], 10]

const numberArray = [12, 45, 67, 456, 34];

let value;

value = numberArray.unshift(200,100); // добавление элементов в начало массива, переменная value принимает новое значение свойства length

console.log(value, numberArray); // 7 Array (7) [200, 100, 12, 45, 67, 456, 34]

// Ещё пример

const numArray = [10];

numArray.unshift([-200]); // добавление элементов в начало массива

console.log(numArray); // Array (2) [[-200], 10]

Удаление элемента с конца массива (метод pop() )

Метод pop():

удаляет последний элемент из массива (изменяет длину массива);
возвращает значение удаленного из массива элемента (или undefined, если массив пуст).

Метод pop() не является привязанным к типу Array: этот метод может быть вызван или применён и к массивоподобным объектам.

const numberArray = [200, 12, 45, 67, 456, 34, 100];
let value;

value = numberArray.pop(); // удаление элемента с конца массива 
console.log(value, numberArray); // 100 Array(6) [ 200, 12, 45, 67, 456, 34 ]

const numberArray = [200, 12, 45, 67, 456, 34, 100];

let value;

value = numberArray.pop(); // удаление элемента с конца массива

console.log(value, numberArray); // 100 Array(6) [ 200, 12, 45, 67, 456, 34 ]

Удаление элемента из начала массива (метод shift() )

Метод shift():

удаляет первый элемент из массива (изменяет длину массива, последовательно сдвигая значения индексов по направлению к нулю);
возвращает значение удаленного из массива элемента (или undefined, если массив пуст).

const numberArray = [200, 12, 45, 67, 456, 34, 100];
let value;

value = numberArray.shift(); // удаление элемента из начала массива, в value записывается значение удаленного элемента 
console.log(value, numberArray); // 200 Array(6) [ 12, 45, 67, 456, 34, 100 ]
console.log(numberArray[0]); // 12 (индексы сдвинуты к началу)

const numberArray = [200, 12, 45, 67, 456, 34, 100];

let value;

value = numberArray.shift(); // удаление элемента из начала массива, в value записывается значение удаленного элемента

console.log(value, numberArray); // 200 Array(6) [ 12, 45, 67, 456, 34, 100 ]

console.log(numberArray[0]); // 12 (индексы сдвинуты к началу)

[свернуть]

Обрезка массива ( Array.slice() )

Метод slice() возвращает новый массив, содержащий копию части исходного массива.

arr.slice([begin[, end]])

1	arr.slice([begin[, end]])

Параметры метода slice ():

begin (необязательный, включительно) - индекс, с которого начинается извлечение (отсчёт начинается с 0):
1. если индекс отрицательный, begin указывает смещение от конца последовательности (т.е. вызов slice(-2) извлечёт два последних элемента последовательности);
2. если begin не определен, slice() начинает работать с индекса 0;
3. если begin больше длины последовательности - вернется пустой массив.
end (необязательный, исключая) - индекс (счёт начинается с нуля), по которому заканчивать извлечение:
1. если индекс отрицательный, end указывает смещение от конца последовательности (т.е. вызов slice(2, -1) извлечёт из последовательности элементы начиная с третьего элемента с начала и заканчивая вторым с конца);
2. если end опущен, slice() извлекает все элементы до конца последовательности (arr.length).

Метод slice() извлекает элементы с индексом меньше end (т.е. вызов slice(1, 4) извлечёт элементы со второго по четвёртый (элементы по индексам 1, 2 и 3).

Возвращаемое значение: новый массив, содержащий извлеченные элементы.

Метод slice() не изменяет исходный массив, а возвращает новую «одноуровневую» копию, содержащую копии элементов, вырезанных из исходного массива.

Элементы исходного массива копируются в новый массив по следующим правилам:

Метод slice() копирует значения строк и чисел (но не объекты String и Number) в новый массив:
- изменения строки или числа в одном массиве никак не затрагивает другой;
- если к любому массиву будет добавлен новый элемент, это никак не повлияет на другой массив.
Метод slice() копирует ссылки на объекты в новый массив (копирование "по ссылке"). И оригинал, и новый массив ссылаются на один и тот же объект: если объект по ссылке будет изменён, изменения будут видны и в новом, и в исходном массивах.

var fruits = ['Банан', 'Апельсин', 'Лимон', 'Яблоко', 'Манго'];
var citrus = fruits.slice(1, 3); // citrus содержит ['Апельсин', 'Лимон']

const numArray = [12, 45, 67, 456, 34]; 
let value;
value = numArray.slice(0, 3); // обрезка массива (вернет с 0 по 3-й элемент)
console.log(value, numArray); // Array(3) [ 12, 45, 67 ] Array(5) [ 12, 45, 67, 456, 34]

var fruits = ['Банан', 'Апельсин', 'Лимон', 'Яблоко', 'Манго'];

var citrus = fruits.slice(1, 3); // citrus содержит ['Апельсин', 'Лимон']

const numArray = [12, 45, 67, 456, 34];

let value;

value = numArray.slice(0, 3); // обрезка массива (вернет с 0 по 3-й элемент)

console.log(value, numArray); // Array(3) [ 12, 45, 67 ] Array(5) [ 12, 45, 67, 456, 34]

[свернуть]

Добавление и удаление элементов массива с определённым индексом ( Array.splice() )

var arr = ["Alex", "Mary", "Serg"];
var val = arr.splice(0, 2);
console.log(val); // Array [ "Alex", "Mary" ], т.е. вырезано 2 элемента. начиная с 0-го
console.log(arr); // Array [ "Serg" ] - оставшиеся элементы массива

// ИЛИ 

const numArray = [12, 45, 67, 456, 34]; 
let value;

value = numArray.splice(0, 2, "one", "two"); // удаление 2-х элементов массива (с 0-го, 2 элемента добавляем)
console.log(value, numArray); // Array [ 12, 45 ] Array(5) [ "one", "two", 67, 456, 2525 ]

value = numArray.splice(1, 0, "AAA", "BBB"); // добавление элементов массива (с 1,  добавляем 2 элемента)
console.log(value, numArray); // Array [] Array(7) [ "one", "AAA", "BBB", "two", 67, 456, 2525 ]

var arr = ["Alex", "Mary", "Serg"];

var val = arr.splice(0, 2);

console.log(val); // Array [ "Alex", "Mary" ], т.е. вырезано 2 элемента. начиная с 0-го

console.log(arr); // Array [ "Serg" ] - оставшиеся элементы массива

// ИЛИ

const numArray = [12, 45, 67, 456, 34];

let value;

value = numArray.splice(0, 2, "one", "two"); // удаление 2-х элементов массива (с 0-го, 2 элемента добавляем)

console.log(value, numArray); // Array [ 12, 45 ] Array(5) [ "one", "two", 67, 456, 2525 ]

value = numArray.splice(1, 0, "AAA", "BBB"); // добавление элементов массива (с 1, добавляем 2 элемента)

console.log(value, numArray); // Array [] Array(7) [ "one", "AAA", "BBB", "two", 67, 456, 2525 ]

[свернуть]

Соединение (конкатенация) массивов ( Array.concat() )

Метод Array.concat() возвращает новый массив, состоящий из массива, на котором он был вызван, соединённого с другими массивами и/или значениями, переданными в него в качестве аргументов.

let new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

1	let new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

Параметры метода Array.concat():

valueN - объекты и (или) значения, соединяемые в новый массив.

Возвращаемое значение: новый экземпляр Array.

Метод concat создаёт новый массив, состоящий из элементов массива, на котором он был вызван, за которыми по порядку следуют (для каждого аргумента):

все элементы аргумента (если аргумент является массивом), либо
сам аргумент (если он массивом не является).

Метод concat не изменяет исходный массив или любой из объектов, переданных в аргументах, а вместо этого возвращает поверхностную копию, содержащую копии тех элементов, что были объединены с исходным массивом.

ВАЖНО! Любая операция над новым массивом (если только элемент не является ссылкой) не будет затрагивать исходные массивы, и наоборот.

Метод concat копирует в новый массив:

значения строк и чисел;
ссылки на объекты (т.е. копирование по ссылке: и оригинал, и новый массив ссылаются на один и тот же объект; если объект по ссылке будет изменён, изменения будут видны и в новом массиве, и в исходном объекте).

// Соединение двух массивов
var alpha = ['a', 'b', 'c'],
numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric);
console.log(alphaNumeric); // Результат: ['a', 'b', 'c', 1, 2, 3]

// Соединение массива и других объектов:
const users = {
  name: "Alex",
  age: 40,
};
let myArray = [12, 45];
let alpha = ["a", "b", "c"];
let newArray = myArray.concat(alpha, users);
console.log(newArray); 		// (6) [12, 45, "a", "b", "c", {…}]

// Соединение двух массивов

var alpha = ['a', 'b', 'c'],

numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric);

console.log(alphaNumeric); // Результат: ['a', 'b', 'c', 1, 2, 3]

// Соединение массива и других объектов:

const users = {

age: 40,

};

let myArray = [12, 45];

let alpha = ["a", "b", "c"];

let newArray = myArray.concat(alpha, users);

console.log(newArray); // (6) [12, 45, "a", "b", "c", {…}]

[свернуть]

Наличие в массиве указанного элемента ( Array.includes() )

Метод Array.includes() определяет, содержится ли в массиве указанный элемент, возвращая, соответственно, true или false.

Метод includes() является общим: он не требует чтобы this являлся массивом, и может быть применён к другим типам объектов (например, к массивоподобным объектам).

Отличие includes() от indexOf():

он использует алгоритм SameValueZero вместо строгого сравнения на равенство, что позволяет обнаруживать элементы массива NaN;
он не пропускает отсутствующие элементы массива, вместо этого обрабатывая их как неопределенные (undefined).

arr.includes(searchElement[, fromIndex = 0])

1	arr.includes(searchElement[, fromIndex = 0])

Параметры метода Array.includes():

searchElement - искомый элемент;
fromIndex (необязательный) - позиция (индекс элемента, включительно) в массиве, с которой начинать поиск элемента searchElement:
1. значение по умолчанию равно 0;
2. при отрицательных значениях (если fromIndex < 0) поиск производится начиная с индекса (array.length + fromIndex) по возрастанию;
3. если fromIndex >= array.length, то возвращается false. При этом поиск не производится.

Возвращаемое значение: тип Boolean.

[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

[1, 2, 3].includes(2); // true

[1, 2, 3].includes(4); // false

[1, 2, 3].includes(3, 3); // false

[1, 2, 3].includes(3, -1); // true

[1, 2, NaN].includes(NaN); // true

var arr = ['a', 'b', 'c'];

arr.includes('c', 3); // false
arr.includes('c', 100); // false

var arr = ['a', 'b', 'c'];

arr.includes('c', 3); // false

arr.includes('c', 100); // false

Если fromIndex отрицательный, то вычисляется индекс (array.length + fromIndex), начиная с которого будет производиться поиск элемента searchElement. Если вычисленный индекс меньше нуля, то поиск будет производиться во всём массиве.

// длина массива равна 3, fromIndex равен -100, вычисленный индекс равен 3 + (-100) = -97

var arr = ['a', 'b', 'c'];

arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true

// длина массива равна 3, fromIndex равен -100, вычисленный индекс равен 3 + (-100) = -97

var arr = ['a', 'b', 'c'];

arr.includes('a', -100); // true

arr.includes('b', -100); // true

arr.includes('c', -100); // true

Пример ниже показывает использование метода includes() на объекте arguments.

(function() {
console.log([].includes.call(arguments, 'a')); // true
console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

(function() {

console.log([].includes.call(arguments, 'a')); // true

console.log([].includes.call(arguments, 'd')); // false

})('a','b','c');

[свернуть]

Объединение элементов массива в строку ( Array.join() )

Метод Array.join() преобразует все элементы массива в строки и объединяет их в одну большую строку.

Элемент массива с типом undefined или null преобразуется в пустую строку.

arr.join([separator])

1	arr.join([separator])

Параметры метода Array.join():

separator (необязательный) - определяет строку, разделяющую элементы массива; в случае необходимости тип разделителя приводится к типу string:
1. если он не задан, элементы массива разделяются запятой ',';
2. если разделитель - пустая строка, элементы массива ничем не разделяются в возвращаемой строке.

Возвращаемое значение: строка, содержащая все элементы массива. Если arr.length == 0, то будет возвращена пустая строка.

var a = ['Ветер', 'Дождь', 'Огонь'];
var myVar1 = a.join(); // присвоит 'Ветер,Дождь,Огонь' переменной myVar1
var myVar2 = a.join(', '); // присвоит 'Ветер, Дождь, Огонь' переменной myVar2
var myVar3 = a.join(' + '); // присвоит 'Ветер + Дождь + Огонь' переменной myVar3
var myVar4 = a.join(''); // присвоит 'ВетерДождьОгонь' переменной myVar4

var a = ['Ветер', 'Дождь', 'Огонь'];

var myVar1 = a.join(); // присвоит 'Ветер,Дождь,Огонь' переменной myVar1

var myVar2 = a.join(', '); // присвоит 'Ветер, Дождь, Огонь' переменной myVar2

var myVar3 = a.join(' + '); // присвоит 'Ветер + Дождь + Огонь' переменной myVar3

var myVar4 = a.join(''); // присвоит 'ВетерДождьОгонь' переменной myVar4

Соединение элементов массивоподобного объекта:

В следующем примере соединяется массивоподобный объект (в данном случае список аргументов функции) с использованием вызова Function.prototype.call для Array.prototype.join.

function f(a, b, c) {
var s = Array.prototype.join.call(arguments);
console.log(s); // '1,a,true'
}
f(1, 'a', true);

function f(a, b, c) {

var s = Array.prototype.join.call(arguments);

console.log(s); // '1,a,true'

}

f(1, 'a', true);

Ещё пример:

// Вывод в консоль аргументов (оранжевым цветом, разделенных символом новой строки)

const print = (...args) => {
  const style = "color: orange;";
  console.log(`%c${args.join('\n')}`, style);
};

print('arg_1', 25);

// Вывод в консоль аргументов (оранжевым цветом, разделенных символом новой строки)

const print = (...args) => {

const style = "color: orange;";

console.log(`%c${args.join('\n')}`, style);

};

print('arg_1', 25);

См. также метод split() (разделение строки на массив строк)

[свернуть]

Возвращение строкового представления массива ( Array.toString() )

Метод Array.toString() соединяет массив и возвращает одну строку, содержащую каждый элемент массива, разделённый запятыми.

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

const numArr = [12, 45, 67, 456, 34];
console.log(numArr.toString()); // 12,45,67,456,2525

var monthNames = ['Янв', 'Фев', 'Мар', 'Апр'];
var myVar = monthNames.toString(); // присваивает 'Янв,Фев,Мар,Апр' переменной myVar

const numArr = [12, 45, 67, 456, 34];

console.log(numArr.toString()); // 12,45,67,456,2525

var monthNames = ['Янв', 'Фев', 'Мар', 'Апр'];

var myVar = monthNames.toString(); // присваивает 'Янв,Фев,Мар,Апр' переменной myVar

JavaScript вызывает метод toString автоматически, когда массив представляется текстовым значением или когда массив находится в контексте конкатенации строк. Если массив имеет метод join(), то будет вызван именно он. В противном случае будет вызван метод Object.toString(), и будет возвращён результат его работы.

[свернуть]

Возвращение локализованного строкового представления массива и его элементов

Метод Array.toLocaleString() возвращает локализованное строковое представление массива и его элементов. Переопределяет метод Object.toLocaleString(). Элементы преобразуются в строки с использованием своих собственных методов toLocaleString и эти строки разделяются локале-зависимой строкой (например, запятой «,»).

var number = 1337;
var date = new Date();
var myArr = [number, date, 'foo'];

var str = myArr.toLocaleString();

console.log(str); // 1 337,08.02.2020, 15:43:25,foo

var number = 1337;

var date = new Date();

var myArr = [number, date, 'foo'];

var str = myArr.toLocaleString();

console.log(str); // 1 337,08.02.2020, 15:43:25,foo

[свернуть]

Проверка элементов массива на условие ( Array.every() ) (для всех элементов)

Метод Array.every() возвращает true, если все элементы в массиве удовлетворяют условию проверяющей (передаваемой) функции.

Внимание! Метод Array.every() возвращает true при любом условии для пустого массива.

arr.every(callback(currentValue[, index[, array]])[, thisArg])

1	arr.every(callback(currentValue[, index[, array]])[, thisArg])

Параметры метода Array.every():

callback - функция проверки каждого элемента, принимает три аргумента:
1. currentValue - текущий обрабатываемый элемент массива;
2. index (необязательный) - индекс текущего обрабатываемого элемента массива;
3. array (необязательный) - массив, по которому осуществляется проход;
thisArg (необязательный) - значение, используемое в качестве this при выполнении функции callback.

Возвращаемое значение: true, если функция проверки возвращает truthy значение для каждого элемента массива. Иначе, false.

Метод every() вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдет такой, для которого callback вернет ложное значение (значение, становящееся равным false при приведении его к типу Boolean). Если такой элемент найден, метод every() немедленно вернёт false. В противном случае, если callback вернёт true для всех элементов массива, метод every() вернёт true.

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

Если в метод every() был передан параметр thisArg, при вызове callback он будет использоваться в качестве значения this. В противном случае в качестве значения this будет использоваться значение undefined. В конечном итоге, значение this, наблюдаемое из функции callback, определяется согласно обычным правилам определения this, видимого из функции.

Метод every() не изменяет массив, для которого он был вызван.

Диапазон элементов, обрабатываемых методом every(), устанавливается до первого вызова функции callback. Элементы, добавленные в массив после начала выполнения метода every(), не будут посещены функцией callback. Если существующие элементы массива изменятся, значения, переданные в функцию callback, будут значениями на тот момент времени, когда метод every() посетит их; удалённые элементы посещены не будут.

// Проверка размера всех элементов массива

function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

// Проверка размера всех элементов массива

function isBigEnough(element, index, array) {

return element >= 10;

}

[12, 5, 8, 130, 44].every(isBigEnough); // false

[12, 54, 18, 130, 44].every(isBigEnough); // true

Стрелочные функции предоставляют более краткий синтаксис для подобных проверок.

[12, 5, 8, 130, 44].every(elem => elem >= 10); // false
[12, 54, 18, 130, 44].every(elem => elem >= 10); // true

1 2	[12, 5, 8, 130, 44].every(elem => elem >= 10); // false [12, 54, 18, 130, 44].every(elem => elem >= 10); // true

[свернуть]

Проверка элементов массива на условие ( Array.some() ) (для какого-либо элемента)

Метод some() проверяет, удовлетворяет ли какой-либо (один) элемент массива условию, заданному в передаваемой функции.

Внимание! Метод возвращает false при любом условии для пустого массива.

arr.some(callback(element[, index[, array]])[, thisArg])

1	arr.some(callback(element[, index[, array]])[, thisArg])

Параметры метода Array.some():

callback - функция проверки каждого элемента, принимает три аргумента:
1. element - текущий обрабатываемый элемент массива;
2. index (необязательный) - индекс текущего обрабатываемого элемента массива;
3. array (необязательный) - массив, по которому осуществляется проход;
4. thisArg (необязательный) - значение, используемое в качестве this при выполнении функции callback.

Возвращаемое значение: true, если функция проверки возвращает truthy значение хотя бы для одного элемента массива. Иначе, false.

Метод some() вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве до тех пор, пока не найдет такой, для которого callback вернет истинное значение (значение, становящееся равным true при приведении его к типу Boolean). Если такой элемент найден, метод some() немедленно вернёт true. В противном случае, если callback вернёт false для всех элементов массива, метод some() вернёт false.

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

Если в метод some() был передан параметр thisArg, при вызове callback он будет использоваться в качестве значения this. В противном случае в качестве значения this будет использоваться значение undefined. В конечном итоге, значение this, наблюдаемое из функции callback, определяется согласно обычным правилам определения this, видимого из функции.

Метод some() не изменяет массив, для которого он был вызван.

Диапазон элементов, обрабатываемых методом some(), устанавливается до первого вызова функции callback. Элементы, добавленные в массив после начала выполнения метода some(), не будут посещены функцией callback. Если существующие элементы массива изменятся, значения, переданные в функцию callback, будут значениями на тот момент времени, когда метод some() посетит их; удалённые элементы посещены не будут.

Проверка значений элементов массива:

function isBiggerThan10(element, index, array) {
  return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

function isBiggerThan10(element, index, array) {

return element > 10;

}

[2, 5, 8, 1, 4].some(isBiggerThan10); // false

[12, 5, 8, 1, 4].some(isBiggerThan10); // true

Проверка элементов массива с использованием стрелочных функций:

[2, 5, 8, 1, 4].some(elem => elem > 10); // false
[12, 5, 8, 1, 4].some(elem => elem > 10); // true

1 2	[2, 5, 8, 1, 4].some(elem => elem > 10); // false [12, 5, 8, 1, 4].some(elem => elem > 10); // true

Проверка наличия элемента в массиве:

const fruits = ['apple', 'banana', 'mango', 'guava'];

function checkAvailability(arr, val) {
  return arr.some(function(arrVal) {
    return val === arrVal;
});
}

checkAvailability(fruits, 'kela'); // false
checkAvailability(fruits, 'banana'); // true

const fruits = ['apple', 'banana', 'mango', 'guava'];

function checkAvailability(arr, val) {

return arr.some(function(arrVal) {

return val === arrVal;

});

}

checkAvailability(fruits, 'kela'); // false

checkAvailability(fruits, 'banana'); // true

Проверка наличия элемента в массиве с использованием стрелочной функции:

const fruits = ['apple', 'banana', 'mango', 'guava'];

function checkAvailability(arr, val) {
  return arr.some(arrVal => val === arrVal);
}

checkAvailability(fruits, 'kela'); // false
checkAvailability(fruits, 'banana'); // true

const fruits = ['apple', 'banana', 'mango', 'guava'];

function checkAvailability(arr, val) {

return arr.some(arrVal => val === arrVal);

}

checkAvailability(fruits, 'kela'); // false

checkAvailability(fruits, 'banana'); // true

[свернуть]

Выборка (поиск) нескольких элементов массива по заданному условию ( Array.filter() )

Метод Array.filter() создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

1	var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

Параметры метода Array.filter ():

callback - функция, которая будет вызвана для каждого элемента массива. Если функция возвращает true, то элемент остаётся в массиве, если false, то удаляется. В функцию будет передано три аргумента:
- element - текущий обрабатываемый элемент в массиве;
- index (необязательный) - индекс текущего обрабатываемого элемента в массиве;
- array (необязательный) - массив, по которому осуществляется проход;
thisArg (необязательный) - значение, используемое в качестве this при вызове функции callback (контекст вызова callback).

Возвращаемое значение: новый массив с элементами, которые проходят по условию (callback вернёт true). Если ни один элемент не пройдет по условию, то будет возвращен пустой массив. Исходный массив не изменяется.

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

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

Элементы массива, не прошедшие проверку функцией callback, просто пропускаются и не включаются в новый массив.

Если в метод filter() был передан параметр thisArg, при вызове callback он будет использоваться в качестве значения this. В противном случае, в качестве значения this будет использоваться значение undefined. В конечном итоге, значение this, наблюдаемое из функции callback, определяется согласно обычным правилам определения this, видимого из функции.

Метод filter() не изменяет массив, для которого он был вызван.

Диапазон элементов, обрабатываемых методом filter(), устанавливается до первого вызова функции callback. Элементы, добавленные в массив после начала выполнения метода filter(), не будут посещены функцией callback. Если существующие элементы массива изменятся, значения, переданные в функцию callback, будут значениями на тот момент времени когда метод filter() посетит их; удалённые элементы посещены не будут.

подробнее...

Фильтрация строковых элементов массива:

const words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];

let longWords = words.filter(word => word.length > 6); // Отфильтрованный массив longWords ["exuberant", "destruction", "present"]

const words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];

let longWords = words.filter(word => word.length > 6); // Отфильтрованный массив longWords ["exuberant", "destruction", "present"]

Фильтрация числовых значений массива:

function isBigEnough(value) {
return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // массив filtered равен [12, 130, 44]

function isBigEnough(value) {

return value >= 10;

}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // массив filtered равен [12, 130, 44]

Или:

const array = [4, 8, 15, null, 23, undefined];

// императивный подход
const imperative = []
for (let i = 0, len = array.length; i < len; ++i) {
    if (array[i]) {
        imperative.push(array[i])
    }
}

// декларативный подход
const declarative = array.filter(Boolean)

console.log(imperative) // (4) [4, 8, 15, 23]
console.log(declarative) // (4) [4, 8, 15, 23]

const array = [4, 8, 15, null, 23, undefined];

// императивный подход

const imperative = []

for (let i = 0, len = array.length; i < len; ++i) {

if (array[i]) {

imperative.push(array[i])

}

// декларативный подход

const declarative = array.filter(Boolean)

console.log(imperative) // (4) [4, 8, 15, 23]

console.log(declarative) // (4) [4, 8, 15, 23]

Фильтрация неверных записей в JSON:

var arr = [
{ id: 15 },
{ id: -1 },
{ id: 0 },
{ id: 3 },
{ id: 12.2 },
{ },
{ id: null },
{ id: NaN },
{ id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
return obj!== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
if (isNumber(item.id) && item.id !== 0) {
return true;
}
invalidEntries++;
return false;
}

var arrByID = arr.filter(filterByID);

console.log('Отфильтрованный массив\n', arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Количество ошибочных записей = ', invalidEntries);
// Number of Invalid Entries = 5

var arr = [

{ id: 15 },

{ id: -1 },

{ id: 0 },

{ id: 3 },

{ id: 12.2 },

{ },

{ id: null },

{ id: NaN },

{ id: 'undefined' }

];

var invalidEntries = 0;

function isNumber(obj) {

return obj!== undefined && typeof(obj) === 'number' && !isNaN(obj);

}

function filterByID(item) {

if (isNumber(item.id) && item.id !== 0) {

return true;

}

invalidEntries++;

return false;

}

var arrByID = arr.filter(filterByID);

console.log('Отфильтрованный массив\n', arrByID);

// Filtered Array

// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Количество ошибочных записей = ', invalidEntries);

// Number of Invalid Entries = 5

Поиск в массиве по условию:

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
* Элементы массива фильтруется на основе критериев поиска (query)
*/
function filterItems(query) {
  return fruits.filter(function(el) {
    return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
})
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

// С использованием стрелочной функции

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
* Элементы массива фильтруется на основе критериев поиска (query)
*/
const filterItems = (query) => {
  return fruits.filter((el) =>
  el.toLowerCase().indexOf(query.toLowerCase()) > -1
);
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**

* Элементы массива фильтруется на основе критериев поиска (query)

function filterItems(query) {

return fruits.filter(function(el) {

return el.toLowerCase().indexOf(query.toLowerCase()) > -1;

})

}

console.log(filterItems('ap')); // ['apple', 'grapes']

console.log(filterItems('an')); // ['banana', 'mango', 'orange']

// С использованием стрелочной функции

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**

* Элементы массива фильтруется на основе критериев поиска (query)

const filterItems = (query) => {

return fruits.filter((el) =>

el.toLowerCase().indexOf(query.toLowerCase()) > -1

);

}

console.log(filterItems('ap')); // ['apple', 'grapes']

console.log(filterItems('an')); // ['banana', 'mango', 'orange']

Ещё пример:

const users = [
  {
    age: 36,
    name: "Kari Waters",
    gender: "female"
  },
  {
    age: 33,
    name: "Berg Zimmerman",
    gender: "male"
  },
  {
    age: 37,
    name: "Deann Winters",
    gender: "female"
  }
];

function funcGetUsers(arr, key, value) {
  if (!Array.isArray(arr) || !key || !value)
    return console.log("Введите данные!");
    const newArr = arr.filter(function(element) {
    return element[key] === value;
  });
  // или через стрелочную функцию:
  // const newArr = arr.filter(element=>{
  //   return element[key] === value;
  // });
  return newArr;
}
res = funcGetUsers(users, "gender", "female"); 
console.log(res);

const users = [

{

age: 36,

gender: "female"

{

age: 33,

gender: "male"

{

age: 37,

gender: "female"

}

];

function funcGetUsers(arr, key, value) {

if (!Array.isArray(arr) || !key || !value)

return console.log("Введите данные!");

const newArr = arr.filter(function(element) {

return element[key] === value;

});

// или через стрелочную функцию:

// const newArr = arr.filter(element=>{

// return element[key] === value;

// });

return newArr;

}

res = funcGetUsers(users, "gender", "female");

console.log(res);

[свернуть]

Выборка (поиск) одного элемента массива по заданному условию ( Array.find() )

Метод Array.find() возвращает значение первого найденного в массиве элемента, которое удовлетворяет условию переданному в callback функции. В противном случае возвращается undefined.

Если вам нужно найти позицию элемента или наличие элемента в массиве, используйте Array.indexOf() или Array.includes() соответственно.

arr.find(callback[, thisArg])

1	arr.find(callback[, thisArg])

Параметры метода Array.find():

callback - функция, вызывающаяся для каждого значения в массиве, принимает три аргумента:
1. element - текущий обрабатываемый элемент в массиве;
2. index - индекс текущего обрабатываемого элемента в массиве;
3. array - массив, по которому осуществляется проход;
thisArg (необязательный) - значение, используемое в качестве this при выполнении функции callback.

Возвращаемое значение: значение элемента из массива, если элемент прошёл проверку, иначе undefined.

Метод find вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве, до тех пор, пока она не вернёт true. Если такой элемент найден, метод find немедленно вернёт значение этого элемента. В противном случае, метод find вернёт undefined.

Если в метод find был передан параметр thisArg, при вызове callback он будет использоваться в качестве значения this. В противном случае в качестве значения this будет использоваться значение undefined.

Метод find не изменяет массив, для которого он был вызван.

Диапазон элементов, обрабатываемых методом find, устанавливается до первого вызова функции callback. Элементы, добавленные в массив после начала выполнения метода find, не будут посещены функцией callback. Если существующие, не посещённые элементы массива изменяются функцией callback, их значения, переданные в функцию, будут значениями на тот момент времени когда метод find посетит их; удалённые элементы все еще будут посещены.

Поиск простого числа в массиве:

function isPrime(element, index, array) {
var start = 2;
while (start <= Math.sqrt(element)) {
  if (element % start++ < 1) {
    return false;
  }
}
  return element > 1;
}

console.log([4, 6, 8, 12].find(isPrime)); // undefined, не найдено
console.log([4, 5, 8, 12].find(isPrime)); // 5

function isPrime(element, index, array) {

var start = 2;

while (start <= Math.sqrt(element)) {

if (element % start++ < 1) {

return false;

}

return element > 1;

}

console.log([4, 6, 8, 12].find(isPrime)); // undefined, не найдено

console.log([4, 5, 8, 12].find(isPrime)); // 5

Еще обрывок кода:

  function getUserInfo(ev) {
    let userName = ev.target.textContent; // получаем имя пользователя при клике на div
    let res = users.find((value, index) => { // обходим массив объектов с данными пользователей
      if (value.name == userName) { // при совпадении имен
        return true; // метод возвращает true и имя в переменной res
      }
    });
    console.log(res);
  }
});

function getUserInfo(ev) {

let userName = ev.target.textContent; // получаем имя пользователя при клике на div

let res = users.find((value, index) => { // обходим массив объектов с данными пользователей

if (value.name == userName) { // при совпадении имен

return true; // метод возвращает true и имя в переменной res

}

});

console.log(res);

}

});

[свернуть]

Определение (поиск) индекса одного элемента массива, соответствующего заданному условию ( Array.findIndex() )

Метод Array.prototype.findIndex() возвращает индекс элемента в массиве, если элемент в массиве удовлетворяет условию проверяющей функции, или -1, если такое значение не найдено.

arr.findIndex(callback[, thisArg])

1	arr.findIndex(callback[, thisArg])

Параметры метода Array.prototype.findIndex():

callback - функция, вызывающаяся для каждого значения в массиве, принимает три аргумента:
1. element - текущий обрабатываемый элемент в массиве;
2. index - индекс текущего обрабатываемого элемента в массиве;
3. array - массив, по которому осуществляется проход;
thisArg (необязательный) - значение, используемое в качестве this при выполнении функции callback.

Метод findIndex вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве, до тех пор, пока она не вернёт true. Если такой элемент найден, метод findIndex немедленно вернёт индекс этого элемента. В противном случае, метод findIndex вернёт -1. Функция callback вызывается только для индексов массива, имеющих присвоенные значения; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались.

Если в метод findIndex был передан параметр thisArg, при вызове callback он будет использоваться в качестве значения this. В противном случае в качестве значения this будет использоваться значение undefined.

Метод findIndex не изменяет массив, для которого он был вызван.

Диапазон элементов, обрабатываемых методом findIndex, устанавливается до первого вызова функции callback. Элементы, добавленные в массив после начала выполнения метода findIndex, не будут посещены функцией callback. Если существующие, не посещённые элементы массива изменяются функцией callback, их значения, переданные в функцию, будут значениями на тот момент времени, когда метод findIndex посетит их; удалённые элементы посещены не будут.

Поиск индекса простого числа в массиве:

function isPrime(element, index, array) {
var start = 2;
while (start <= Math.sqrt(element)) {
  if (element % start++ < 1) {
    return false;
  }
}
  return element > 1;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, не найдено
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

function isPrime(element, index, array) {

var start = 2;

while (start <= Math.sqrt(element)) {

if (element % start++ < 1) {

return false;

}

return element > 1;

}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, не найдено

console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

[свернуть]

Возвращение ключей каждого индекса элементов массива ( Array.keys() )

Метод Array.prototype.keys() возвращает новый итератор массива, содержащий ключи каждого индекса в массиве.

// Базовое использование
var arr = ['a', 'b', 'c'];
var iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

// Итератор, возвращаемый методом keys(), не пропускает дырки в массиве
var arr = ['a', , 'c'];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // [0, 2]
console.log(denseKeys); // [0, 1, 2]

// Базовое использование

var arr = ['a', 'b', 'c'];

var iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }

console.log(iterator.next()); // { value: 1, done: false }

console.log(iterator.next()); // { value: 2, done: false }

console.log(iterator.next()); // { value: undefined, done: true }

// Итератор, возвращаемый методом keys(), не пропускает дырки в массиве

var arr = ['a', , 'c'];

var sparseKeys = Object.keys(arr);

var denseKeys = [...arr.keys()];

console.log(sparseKeys); // [0, 2]

console.log(denseKeys); // [0, 1, 2]

[свернуть]

Методы изменения массива в JavaScript

Копирование пoследовательности элементов массива внутри массива ( Array.copyWithin() )

arr.copyWithin(target, start[, end = this.length])

1	arr.copyWithin(target, start[, end = this.length])

Метод copyWithin() копирует последовательность элементов массива внутри него в позицию, начинающуюся по индексу target. Копия берётся по индексам, задаваемым вторым и третьим аргументами start и end. Аргумент end является необязательным и по умолчанию равен длине массива.

Параметры метода copyWithin():

target - начальный индекс позиции цели (куда копировать элементы);
start - начальный индекс позиции источника, с которой начинают копироваться элементы;
end (необязательный параметр) - конечный индекс позиции источника, на которой заканчивается копирование элементов.

Аргументы target, start и end приводятся к Number и обрезаются до целых значений.

Если аргумент start является отрицательным, он трактуется как length+start где length — это длина массива. Если аргумент end является отрицательным, он трактуется как length+end.

Функция copyWithin намеренно является обобщённой, она не требует, чтобы значение this внутри неё было объектом Array, и кроме того, функция copyWithin является изменяющим методом, она изменит объект this и вернёт его, а не просто вернёт копию.

[1, 2, 3, 4, 5].copyWithin(0, 3); 
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4); 
// [4, 2, 3, 4, 5]

const fruits=["Клубника", "Банан", "Манго"];
fruits.copyWithin(0, 1, 3); 
// Array(3) [ "Банан", "Манго", "Манго" ]

[1, 2, 3, 4, 5].copyWithin(0, -2, -1); 
// [4, 2, 3, 4, 5]

[].copyWithin.call({length: 5, 3: 1}, 0, 3);
// {0: 1, 3: 1, length: 5}

// Типизированные массивы ES6 являются подклассами Array
var i32a = new Int32Array([1, 2, 3, 4, 5]);

i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// На платформах, которые ещё не совместимы с ES6:
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3);

// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4);

// [4, 2, 3, 4, 5]

const fruits=["Клубника", "Банан", "Манго"];

fruits.copyWithin(0, 1, 3);

// Array(3) [ "Банан", "Манго", "Манго" ]

[1, 2, 3, 4, 5].copyWithin(0, -2, -1);

// [4, 2, 3, 4, 5]

[].copyWithin.call({length: 5, 3: 1}, 0, 3);

// {0: 1, 3: 1, length: 5}

// Типизированные массивы ES6 являются подклассами Array

var i32a = new Int32Array([1, 2, 3, 4, 5]);

i32a.copyWithin(0, 2);

// Int32Array [3, 4, 5, 4, 5]

// На платформах, которые ещё не совместимы с ES6:

[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);

// Int32Array [4, 2, 3, 4, 5]

[свернуть]

Заполнение всех элементов массива от начального индекса до конечного индекса указанным значением ( Array.fill() )

Элементы массива заполняются в полузакрытом интервале [start, end).

arr.fill(value[, start = 0[, end = this.length]])

1	arr.fill(value[, start = 0[, end = this.length]])

Параметры метода arr.fill():

value -значение, заполняющее массив;
start (необязательный параметр) - начальный индекс;
end (необязательный параметр) - конечный индекс.

Возвращаемое значение: изменённый массив (метод fill является изменяющим методом, он изменит объект this и вернёт его, а не его копию).

Аргументы start и end являются необязательными со значениями по умолчанию, равными 0 и length объекта this соответственно.

Если аргумент start является отрицательным, он трактуется как length+start, где length — это длина массива. Если аргумент end является отрицательным, он трактуется как length+end.

Метод fill намеренно является обобщённым, он не требует, чтобы значение this внутри него было объектом Array.

Если аргумент value является объектом, тo метод fill заполнит массив ссылками на этот объект.

[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}

// Объекты заполняются по ссылке.
var arr = Array(3).fill({}) // [{}, {}, {}];
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

[1, 2, 3].fill(4); // [4, 4, 4]

[1, 2, 3].fill(4, 1); // [1, 4, 4]

[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]

[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]

[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]

[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]

[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]

[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]

Array(3).fill(4); // [4, 4, 4]

[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}

// Объекты заполняются по ссылке.

var arr = Array(3).fill({}) // [{}, {}, {}];

arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

[свернуть]

Переворачивание порядка элементов в массиве ( Array.reverse() )

Метод reverse() переворачивает порядок элементов в массиве: первый элемент становится последним, а последний — первым. Т.е. указанный метод на месте переставляет элементы массива, на котором он был вызван, изменяет массив и возвращает ссылку на него.

array.reverse() параметров не имеет и возвращает перевернутый (обращенный) массив.

var myArray = ['один', 'два', 'три'];
myArray.reverse();
console.log(myArray) // ['три', 'два', 'один']

var myArray = ['один', 'два', 'три'];

myArray.reverse();

console.log(myArray) // ['три', 'два', 'один']

[свернуть]

Сортировка элементов массива ( Array.sort() )

Подробнее...

Метод Array.sort() сортирует элементы массива на месте и возвращает отсортированный массив.

Порядок сортировки по умолчанию соответствует порядку кодовых точек Unicode.

arr.sort([compareFunction])

1	arr.sort([compareFunction])

Параметры метода Array.sort():

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

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

var fruit = ['арбузы', 'бананы', 'Вишня'];
fruit.sort(); // ['Вишня', 'арбузы', 'бананы']

var scores = [1, 2, 10, 21];
scores.sort(); // [1, 10, 2, 21]

var things = ['слово', 'Слово', '1 Слово', '2 Слова'];
things.sort(); // ['1 Слово', '2 Слова', 'Слово', 'слово']
// В Unicode, числа находятся перед буквами в верхнем регистре,
// а те, в свою очередь, перед буквами в нижнем регистре.

var fruit = ['арбузы', 'бананы', 'Вишня'];

fruit.sort(); // ['Вишня', 'арбузы', 'бананы']

var scores = [1, 2, 10, 21];

scores.sort(); // [1, 10, 2, 21]

var things = ['слово', 'Слово', '1 Слово', '2 Слова'];

things.sort(); // ['1 Слово', '2 Слова', 'Слово', 'слово']

// В Unicode, числа находятся перед буквами в верхнем регистре,

// а те, в свою очередь, перед буквами в нижнем регистре.

Функция в методе sort будет выполнена для каждой пары элементов внутри массива (текущий-следующий или предыдущий-следующий). Т.о. если функция сравнения compareFunction предоставлена, элементы массива сортируются в соответствии с её возвращаемым значением. Если сравниваются два элемента a и b, то:

если compareFunction(a, b) < 0, сортировка поставит a по меньшему индексу, чем b, то есть, a идёт первым ( a будет сдвинут в начало массива, и b станет следующим после a);
если compareFunction(a, b) = 0, сортировка оставит a и b неизменными по отношению друг к другу, но отсортирует их по отношению ко всем другим элементам;
если compareFunction(a, b) > 0, сортировка поставит b по меньшему индексу, чем a.

Функция compareFunction(a, b) должна всегда возвращать одинаковое значение для определённой пары элементов a и b. Если будут возвращаться непоследовательные результаты, порядок сортировки будет не определён.

[свернуть]

Разворачивание массива массивов. Применение функции к аккумулятору и каждому значению массива (слева-направо), сводя массив к одному значению ( Array.reduce() )

Метод Array.reduce() применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению (возвращая одно результирующее значение). Т.е. метод попарно берет свой результат на прошлой итерации и новый элемент из массива, а на выходе возвращается одна переменная.

Array.reduceRight() применяет функцию к аккумулятору и каждому значению массива (справа-налево), сводя его к одному значению.

array.reduce(callback(accumulator, currentValue [, index] [, array] [, initialValue])

1	array.reduce(callback(accumulator, currentValue [, index] [, array] [, initialValue])

Параметры метода Array.reduce():

callback - функция, выполняющаяся для каждого элемента массива, принимает четыре аргумента:
1. accumulator - аккумулятор, аккумулирующий значение, которое возвращает функция callback после посещения очередного элемента, либо значение initialValue, если оно предоставлено;
2. currentValue - текущий обрабатываемый элемент массива;
3. index (необязательный) - индекс текущего обрабатываемого элемента массива;
4. array (необязательный) - массив, для которого была вызвана функция reduce;
5. initialValue (необязательный) - объект, используемый в качестве первого аргумента при первом вызове функции callback.

Метод reduce() выполняет функцию callback один раз для каждого элемента, присутствующего в массиве, за исключением пустот.

При первом вызове функции, параметры accumulator и currentValue могут принимать одно из двух значений. Если при вызове reduce() передан аргумент initialValue, то значение accumulator будет равным значению initialValue, а значение currentValue будет равным первому значению в массиве. Если аргумент initialValue не задан, то значение accumulator будет равным первому значению в массиве, а значение currentValue будет равным второму значению в массиве.

Если массив пустой и аргумент initialValue не указан, будет брошено исключение TypeError. Если массив состоит только из одного элемента (независимо от его положения в массиве) и аргумент initialValue не указан, или если аргумент initialValue указан, но массив пустой, то будет возвращено одно это значение, без вызова функции callback.

let numbersNew = [1, 2, 3, 4, 5, 6];

function sum(total, value) {
  return total + value;
}

let total = numbersNew.reduce(sum, 0); 
console.log(total); // 21
console.log(typeof total); // number

// ИЛИ 

let numbersNew = [1, 2, '3', 4, 5, 6];

function sum(total, value) {
  return total + value;
}

let total = numbersNew.reduce(sum, 0); 
console.log(total); // 33456
console.log(typeof total); // string

let numbersNew = [1, 2, 3, 4, 5, 6];

function sum(total, value) {

return total + value;

}

let total = numbersNew.reduce(sum, 0);

console.log(total); // 21

console.log(typeof total); // number

// ИЛИ

let numbersNew = [1, 2, '3', 4, 5, 6];

function sum(total, value) {

return total + value;

}

let total = numbersNew.reduce(sum, 0);

console.log(total); // 33456

console.log(typeof total); // string

Примеры отсюда...

Примеры

Суммирование всех значений в массиве:

var total = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
}); // total == 6

var total = [0, 1, 2, 3].reduce(function(a, b) {

return a + b;

}); // total == 6

Суммирование значений в массиве объектов:

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

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue.x;
}, initialValue) // sum == 6

// Тоже самое со стрелочной функцией:

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
  (accumulator, currentValue) => accumulator + currentValue.x,
initialValue
); // sum == 6

var initialValue = 0;

var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {

return accumulator + currentValue.x;

}, initialValue) // sum == 6

// Тоже самое со стрелочной функцией:

var initialValue = 0;

var sum = [{x: 1}, {x:2}, {x:3}].reduce(

(accumulator, currentValue) => accumulator + currentValue.x,

initialValue

); // sum == 6

Разворачивание массива массивов:

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
}); // flattened равен [0, 1, 2, 3, 4, 5]

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {

return a.concat(b);

}); // flattened равен [0, 1, 2, 3, 4, 5]

Склеивание массивов, содержащихся в объектах массива, с использованием оператора расширения и initialValue:

// friends - список из объектов(друзей)
// где поле "books" - список любимых книг друга
var friends = [
{ name: "Anna", books: ["Bible", "Harry Potter"], age: 21 },
{ name: "Bob", books: ["War and peace", "Romeo and Juliet"], age: 26 },
{ name: "Alice", books: ["The Lord of the Rings", "The Shining"], age: 18 }
]

// allbooks - список, который будет содержать все книги друзей +
// дополнительный список указанный в initialValue
var allbooks = friends.reduce(function(prev, curr) {
  return [...prev, ...curr.books];
}, ["Alphabet"]);

// allbooks = ["Alphabet", "Bible", "Harry Potter", "War and peace",
// "Romeo and Juliet", "The Lord of the Rings", "The Shining"]

// friends - список из объектов(друзей)

// где поле "books" - список любимых книг друга

var friends = [

{ name: "Anna", books: ["Bible", "Harry Potter"], age: 21 },

{ name: "Bob", books: ["War and peace", "Romeo and Juliet"], age: 26 },

{ name: "Alice", books: ["The Lord of the Rings", "The Shining"], age: 18 }

]

// allbooks - список, который будет содержать все книги друзей +

// дополнительный список указанный в initialValue

var allbooks = friends.reduce(function(prev, curr) {

return [...prev, ...curr.books];

}, ["Alphabet"]);

// allbooks = ["Alphabet", "Bible", "Harry Potter", "War and peace",

// "Romeo and Juliet", "The Lord of the Rings", "The Shining"]

Получение сумм элементов массива:

const arr = [1, 2, 3, 4, 5];

const newSum = arr => {
  let newArr = [];
  arr.reduce((acc, item, i) => (newArr[i] = acc + item), 0);
  return newArr;
};

console.log(newSum(arr)); // Array(5) [ 1, 3, 6, 10, 15 ]

const arr = [1, 2, 3, 4, 5];

const newSum = arr => {

let newArr = [];

arr.reduce((acc, item, i) => (newArr[i] = acc + item), 0);

return newArr;

};

console.log(newSum(arr)); // Array(5) [ 1, 3, 6, 10, 15 ]

[свернуть]

Создание копии массива в JavaScript

Копирование массива по ссылке:

const numArr = [12, 45, 67, 456, 34];

const numArr_1 = numArr; // копируем по ссылке, а не создаём новый экземпляр Array

console.log("Это numArr начальный", numArr); // Это numArr начальный Array(5) [ 12, 45, 67, 456, 34 ]

numArr[4] = 2525;

console.log("Это numArr ", numArr); //  Это numArr Array(5) [ 12, 45, 67, 456, 2525 ]
console.log("Это numArr_1 ", numArr_1); // Это numArr_1 Array(5) [ 12, 45, 67, 456, 2525 ]

const numArr = [12, 45, 67, 456, 34];

const numArr_1 = numArr; // копируем по ссылке, а не создаём новый экземпляр Array

console.log("Это numArr начальный", numArr); // Это numArr начальный Array(5) [ 12, 45, 67, 456, 34 ]

numArr[4] = 2525;

console.log("Это numArr ", numArr); // Это numArr Array(5) [ 12, 45, 67, 456, 2525 ]

console.log("Это numArr_1 ", numArr_1); // Это numArr_1 Array(5) [ 12, 45, 67, 456, 2525 ]

Массивы (как и другие объекты JS) хранятся и копируются «по ссылке».

Переменная хранит не сам объект, а его «адрес в памяти», другими словами «ссылку» на него. Когда переменная объекта копируется – копируется ссылка, сам же объект не дублируется.

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

С помощью метода slice:

Для создания копии массива в JS можно использовать метод slice() без аргументов:

var arr = ["Alex", "Mary", "Serg"];

var val = arr.slice(); 

console.log(val); // Array(3) [ "Alex", "Mary", "Serg" ] 
console.log(arr); // Array(3) [ "Alex", "Mary", "Serg" ] 

val[1]='Olga'
console.log('Копия: '+val); // Копия: Alex,Olga,Serg (копия не по ссылке)
console.log('Оригинал: '+arr); // Оригинал: Alex,Mary,Serg

var arr = ["Alex", "Mary", "Serg"];

var val = arr.slice();

console.log(val); // Array(3) [ "Alex", "Mary", "Serg" ]

console.log(arr); // Array(3) [ "Alex", "Mary", "Serg" ]

val[1]='Olga'

console.log('Копия: '+val); // Копия: Alex,Olga,Serg (копия не по ссылке)

console.log('Оригинал: '+arr); // Оригинал: Alex,Mary,Serg

С помощью метода Array.from():

var arr = ["Alex", "Mary", "Serg"];

arr_1 = Array.from(arr); // создаем новый экземпляр массива (не копирование по ссылке)
arr_1[1] = "Olga";
console.log(arr_1); // Array(3) [ "Alex", "Olga", "Serg" ]
console.log(arr); // Array(3) [ "Alex", "Mary", "Serg" ][spoiler title='Создание нового массива из данного из результатов переданной функции ( Array.map() )' style='default' collapse_link='true'][/spoiler]

var arr = ["Alex", "Mary", "Serg"];

arr_1 = Array.from(arr); // создаем новый экземпляр массива (не копирование по ссылке)

arr_1[1] = "Olga";

console.log(arr_1); // Array(3) [ "Alex", "Olga", "Serg" ]

console.log(arr); // Array(3) [ "Alex", "Mary", "Serg" ][spoiler title='Создание нового массива из данного из результатов переданной функции ( Array.map() )' style='default' collapse_link='true'][/spoiler]

Проверка объекта на тип "массив" (метод isArray):

Варианты неправильного применения массивов:

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

Получение клона массива с использованием оператора rest:

Клонирование массива с добавлением (изменением) элементов:

Разница между Array.of() и конструктором Array:

Параметры метода Array.map():

Отображение массива квадратных корней из массива чисел:

Отображение массива чисел с использованием функции, содержащей аргумент:

Использование метода map() на объекте строки String для получения массива байт в кодировке ASCII, представляющего значения символов:

Работа с элементами массива в JS

Добавление элемента в конец массива (метод push() )

Особенности метода push():

Функция, которая принимает значение переменной n и возвращает массив, заполненный числами от 1 до n

Добавление элемента в начало массива (метод unshift() )

Удаление элемента с конца массива (метод pop() )

Удаление элемента из начала массива (метод shift() )

Параметры метода slice ():

Параметры метода Array.concat():

Отличие includes() от indexOf():

Параметры метода Array.includes():

Соединение элементов массивоподобного объекта:

Параметры метода Array.every():

Параметры метода Array.some():

Проверка значений элементов массива:

Проверка наличия элемента в массиве:

Проверка наличия элемента в массиве с использованием стрелочной функции:

Параметры метода Array.filter ():

Фильтрация строковых элементов массива:

Фильтрация числовых значений массива:

Фильтрация неверных записей в JSON:

Поиск в массиве по условию:

Параметры метода Array.find():

Поиск простого числа в массиве:

Параметры метода Array.prototype.findIndex():

Поиск индекса простого числа в массиве:

Методы изменения массива в JavaScript

Параметры метода copyWithin():

Параметры метода arr.fill():

Параметры метода Array.sort():

Параметры метода Array.reduce():

Суммирование всех значений в массиве:

Суммирование значений в массиве объектов:

Разворачивание массива массивов:

Склеивание массивов, содержащихся в объектах массива, с использованием оператора расширения и initialValue:

Получение сумм элементов массива:

Создание копии массива в JavaScript

Копирование массива по ссылке:

С помощью метода slice:

С помощью метода Array.from():

Добавить комментарий Отменить ответ