Array.prototype.reduce()

Создание объектов

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

var item1 = {};
item1.id = '1';
item1.name = 'Туалетная бумага';
item1.price = '17.00';
item1.quantity = 3;
item1.hq = true;

var item2 = {};
item2.id = '2';
item2.name = 'Полотенце';
item2.price = '85.50';
item2.quantity = 1;
item2.dopinfo = ;
item2.hq = false;

var item3 = {};
item3.id = '3';
item3.name = 'Бумажные салфетки';
item3.price = '23.66';
item3.quantity = 2;
item3.hq = false;

Ещё один способ создания объектов — сразу задавать ему ключи со значениями

var item4 = {
    'id': '4',
    'name': 'Верёвка',
    'price': '7.00',
    'quantity': 1,
    'hq': true,
};

Аналогично можно создать и массив, сначала пустой:

var purchase = [];

а затем наполнить его объектами методом push

purchase.push(item1, item2, item3);

Также, методом push можно добавить объект в уже наполненный массив:

purchase.push(item4);

Это будет аналогично

purchase.push(item1, item2, item3, item4);

Метод push отправляет данные или объекты в конец массива.

Свойства объектов также могут содержать в себе массивы, и объекты в них. Как, например, в объекте item2 — свойство item2.dopinfo

С помощью метода unshift можно добавить данные или объекты в начало массива:

purchase.unshift({id: "5", name: "Носки", price: "28.00", quantity: 7, 'hq': true});

Эта строчка добавить данные по носкам в начало массива

Для извлечения объекта с начала или с конца массива используются методы shift и pop соответственно.

Перебор ассоциативного массива в JavaScript

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

Мы можем выполнить перебор ключей с помощью итерируемого объекта MapIterator, который возвращается посредством метода keys:

for (let key of arr.keys()) {
  console.log(key);
}

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

for (let value of arr.values()) {
  console.log(value);
}

Теперь посмотрим, как происходит перебор записей ассоциативного массива в JavaScript с применением метода entries:

for (let pair of arr.entries()) {
  // pair - это массив 
  console.log(pair]); // ключ
  console.log(pair1]); // значение
  console.log(`Ключ = ${pair}, значение = ${pair1}`);
}

Этот метод по умолчанию применяется в for…of, поэтому его можно опустить:

for (let pair of arr) {
  console.log(`Ключ = ${pair}, значение = ${pair1}`);
}

Вдобавок ко всему, перебрать ассоциативный массив в JavaScript мы можем посредством метода forEach.

arr.forEach(function(value,key) {
  console.log('key = ' + key +', value = ' + value);    
});

Если нужно преобразовать ассоциативный массив в JSON и назад, подойдёт следующий способ:

let arr = new Map(,
  'answer1', 'Ответ 1...'],  
  'answer2', 'Ответ 2...'], 
]);
// в JSON
jsonStr = JSON.stringify();
// из JSON в Map
mapArr = new Map(JSON.parse(jsonStr));

Дополнительные методы

1. Получение первого элемента массива

Пример:

2. Получение последнего элемента массива

Пример:

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

Пример:

4. Получение длины массива (количество элементов массива)

Пример:

5. Метод splice() предназначен для изменения содержимого массива. Первый параметр отвечает за количество элементов в массиве, от начала которых нужно отступить. Второй параметр указывает на количество элементов для удаления. Третий параметр используется в случае, когда требуется добавить значение для нового элемента.

Пример:

6. Метод сортировки массивов

Пример:

7. Метод изменения порядка элементов на обратный

Пример:

8. Метод concat() создает новый массив на основе переданных значений и предыдущего массива.

Пример:

9. Метод flat() создаст новый массив на основе вложенных массивов. В параметре метода можно указать число вложений, которые требуется преобразовать в «плоский» массив.

Пример:

slice

Метод slice имеет синтаксис:

Array.slice(, )

возвращает
массив, в который копирует элементы, начиная с индекса start и заканчивая
индексом end-1. Например:

let ar = "Я", "смотрю", "этот", "обучающий", "урок";
 
let res1 = ar.slice(2, 4);   //этот, обучающий
let res2 = ar.slice(3);      //обучающий, урок
let res3 = ar.slice(-3);     //этот, обучающий, урок

В res1 копируются
элементы с индексами 2 и 3, в res2 с индекса 3 и до конца массива, а в res3 от 3-го
индекса с конца и до конца массива. Если вызвать просто

let copyArr = ar.slice();
console.log(copyArr);

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

Пустые элементы

Массивы JavaScript допускают пустые элементы. Массив ниже синтаксически верный и имеет длину 3 элемента:

const arr = ;

arr.length; // 3

Что еще более запутывает, так это то, что циклические конструкции трактуют иначе, чем . Ниже показано, как четыре циклических конструкции обрабатывают с пустым элементом. for/in и for/each пропускают пустой элемент, for и for/of — нет.

// Prints "a, undefined, c"
for (let i = 0; i < arr.length; ++i) {
  console.log(arr);
}

// Prints "a, c"
arr.forEach(v => console.log(v));

// Prints "a, c"
for (let i in arr) {
  console.log(arr);
}

// Prints "a, undefined, c"
for (const v of arr) {
  console.log(v);
}

Если вам интересно, все 4 конструкции выведут «a, undefined, c» для .

Есть еще один способ добавить пустой элемент в массив:

// Equivalent to ``
const arr = ;
arr = 'e';

forEach() и for/in пропускают пустые элементы в массиве, for и for/of — нет. Поведение forEach() может вызвать проблемы, однако можно заметить, что дыры в массивах JavaScript, как правило, встречаются редко, поскольку они не поддерживаются в JSON:

$ node
> JSON.parse('{"arr":}')
{ arr:  }
> JSON.parse('{"arr":}')
{ arr:  }
> JSON.parse('{"arr":}')
SyntaxError: Unexpected token , in JSON at position 12

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

Вывод: for/in и forEach() не реагируют на пустые элементы, также известные как «дыры», в массиве. Редко есть какая-либо причина рассматривать дыры как особый случай, а не рассматривать индекс как значение undefined. Если вы допускаете наличие дыр, ниже приведен пример файла .eslintrc.yml, который запрещает вызов forEach().

parserOptions:
  ecmaVersion: 2018
rules:
  no-restricted-syntax:
    - error
    - selector: CallExpression
      message: Do not use `forEach()`, use `for/of` instead

Итерируемые объекты и псевдомассивы

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

• Итерируемые объекты – это объекты, которые реализуют метод , как было описано выше.
• Псевдомассивы – это объекты, у которых есть индексы и свойство , то есть, они выглядят как массивы.

При использовании JavaScript в браузере или других окружениях мы можем встретить объекты, которые являются итерируемыми или псевдомассивами, или и тем, и другим.

Например, строки итерируемы (для них работает ) и являются псевдомассивами (они индексированы и есть ).

Но итерируемый объект может не быть псевдомассивом. И наоборот: псевдомассив может не быть итерируемым.

Например, объект из примера выше – итерируемый, но не является псевдомассивом, потому что у него нет индексированных свойств и .

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

Что у них общего? И итерируемые объекты, и псевдомассивы – это обычно не массивы, у них нет методов , и т.д. Довольно неудобно, если у нас есть такой объект и мы хотим работать с ним как с массивом. Например, мы хотели бы работать с , используя методы массивов. Как этого достичь?

Методы pop/push, shift/unshift

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

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

Массивы поддерживают обе операции.

На практике необходимость в этом возникает очень часто. Например, очередь сообщений, которые надо показать на экране.

Существует и другой вариант применения для массивов – структура данных, называемая стек.

Она поддерживает два вида операций:

• добавляет элемент в конец.
• удаляет последний элемент.

Таким образом, новые элементы всегда добавляются или удаляются из «конца».

Примером стека обычно служит колода карт: новые карты кладутся наверх и берутся тоже сверху:

Массивы в JavaScript могут работать и как очередь, и как стек. Мы можем добавлять/удалять элементы как в начало, так и в конец массива.

В компьютерных науках структура данных, делающая это возможным, называется двусторонняя очередь.

Методы, работающие с концом массива:

Удаляет последний элемент из массива и возвращает его:

Добавляет элемент в конец массива:

Вызов равнозначен .

Методы, работающие с началом массива:

Удаляет из массива первый элемент и возвращает его:

Добавляет элемент в начало массива:

Методы и могут добавлять сразу несколько элементов:

Объект как ассоциативный массив

В качестве ассоциативного массива можно использовать обычный объект.

Создание пустого ассоциативного массива через объект:

Заполнение ассоциативный массив значениями на этапе его создания:

Добавление нового элемента (пары «ключ-значение»):

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

В качестве значения можно использовать не только примитивные типы данных, но и ссылочные.

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

Получение значения ключа:

Получить количество ключей (длину) можно так:

Удаление ключа выполняется с помощью оператора :

Выполнить проверку (наличия) ключа можно так:

Перебор ключей с помощью цикла :

Преобразовать объект, используем в качестве ассоциативного массива, в JSON и обратно можно так:

Работа с массивами JS- сортировка, метод sort(fn)

Метод sort() сортирует массив, не изменяя количество элементов:

var arr = 
arr.sort()
alert( arr )   // 1, 15, 2

Запустите приведенный выше код. Вы получите порядок 1, 15, 2. Это потому, что метод преобразует все в строку и использует по умолчанию лексикографический порядок.

Чтобы сделать метод «умнее», нам нужно передать в него пользовательскую функцию сравнения. Она должна принимать два аргумента и возвращать 1, 0 или -1:

function compare(a, b) {
  if (a > b) return 1
  else if (a < b) return -1
  else return 0
}
var arr = 
arr.sort(compare)
alert( arr )   // 1, 2, 15

Теперь все работает правильно.

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

Создайте функцию ageSort(people) для сортировки массива объектов людей по возрасту:

var john = { name: "John Smith", age: 23 }
var mary = { name: "Mary Key", age: 18 }
var bob = { name: "Bob-small", age: 6 }
var people = 
ageSort(people) // теперь люди должны быть отсортированы в таком порядке 

Выведите имена людей после сортировки JavaScript двумерного массива.

Решение

Нужно использовать Array#sort и пользовательское сравнение:

function ageCompare(a, b) {
  if (a.age > b.age) return 1
  else if (a.age < b.age) return -1
  return 0
}
function ageSort(people) {
  people.sort(ageCompare)
}
// проверьте это
var john = { name: "John Smith", age: 23 }
var mary = { name: "Mary Key", age: 18 }
var bob = { name: "Bob-small", age: 6 }
var people = 
ageSort(people)
// проверьте порядок
for(var i=0; i<people.length; i++) {
  alert(people.name)
}

Более короткий вариант

Функция сравнения может быть короче. Альтернативное решение:

people.sort(function(a,b) { return a.age - b.age })

Оно работает, так как нам не нужно возвращать 1 / -1 / 0, будут работать положительные или отрицательные числа.

find и findIndex

Метод find позволяет найти
элемент массива по какому-либо критерию (условию). Она имеет следующий синтаксис:

let result = ar.find(function(item, index, array) {

  // если true –
возвращается текущий элемент и перебор прерывается

  // если все итерации оказались
ложными, возвращается undefined

});

Функция
вызывается по очереди для каждого элемента массива:

• item
  – очередной элемент;

• index
  – его индекс;

• array
  – сам массив.

Предположим, у
нас имеется массив объектов:

let cars = 
    {model "toyota", price 1000},
    {model "opel", price 800},
    {model "reno", price 1200}
;

Найдем в нем
первую машину со стоимостью меньше 1000 единиц:

let res = cars.find(item => item.price < 1000);
console.log(res);

Результатом
будет элемент opel. Так как на
практике в JavaScript часто
применяются массивы из объектов, то метод find бывает весьма
полезным для поиска нужного элемента

Также обратите внимание, что в примере мы
в find передаем стрелочной функции только один аргумент – item. Так тоже можно
делать и это довольно типичная ситуация

Метод
ar.findIndex – по сути, то же самое, что и find, но возвращает
индекс, по которому элемент был найден, и -1 в противном случае:

let res = cars.findIndex(item => item.price < 1000);

Методы перебирающие массив в ECMAScript 5

Подавляющее большинство браузеров поддерживают новые методы перебора массива, предоставляемые ECMAScript 5: forEach, map, и filter. Эти методы принимают функцию в качестве первого аргумента. Каждый элемент массива, в свою очередь, передается этой функции, которая принимает три аргумента: значение текущего элемента, его индекс и сам массив.

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

Метод forEach

Метод forEach перебирает элементы массива, как обычный JavaScript цикл for. Но вы не можете использовать оператор break для досрочного выхода, как в for. Метод forEach не возвращает значение.

В следующем примере мы объявляем массив и вызываем forEach. Передаем значение, индекс, и массив (v, i, a) в качестве аргумента функции, чтобы изменить массив, умножая каждое его значение на 2:

var ar = ;
ar.forEach( function(v, i, ar) { ar = v*2; } );
console.log( ar ); // 

В следующем примере мы создаем новый массив вместо того, чтобы преобразовать массив, вызванный forEach. Нам нужно только передать значение (v) для этого:

var ar = ;
var ar2 = []; // новый массив
// передаем значение, умножаем на 2, и выводим массив
ar.forEach( function(v) { ar2.push(v*2); } );
// вид нового массива
console.log( ar2 ); // 

Значение элемента массива может быть использовано в JavaScript цикле по массиву forEach для любых целей. Но если вы хотите создать новый массив на основе значений существующего, то метод map подходит больше.

Метод map

Метод map создает новый массив. Каждый элемент из существующего массива передается аргументу функции map.

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

var ar = ;
var ar2 = ar.map( function(v) { return v*2; } );
console.log( ar2 ); // 

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

var ar = ;
var ar2 = ar.map( function(v) {
    return v.charAt(0).toUpperCase() + v.slice(1);
} );
console.log( ar2 ); // 

Часто нужно проверять тип значения элемента массива, прежде чем воздействовать на него. Например, если массив содержит значения, которые не являются строками в JavaScript, будет выводиться сообщение об ошибке «TypeError».

Поэтому мы включаем проверку типа:

var ar = ;
var ar2 = ar.map( function(v) {
    if ( typeof v === 'string' ) {
        return v.charAt(0).toUpperCase() + v.slice(1);
    }
} );
console.log( ar2 ); // 

Обратите внимание, что для значений, не являющихся строками, было возвращено undefined. Это происходит потому, что массив, возвращенный методом map, соответствует длине JavaScript созданного массива в цикле, для которого он вызывался

Это происходит даже в разреженных массивах.

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

var ar = ;
var ar2 = ar.map( function(v) {
    if ( typeof v === 'string' ) {
        return v.charAt(0).toUpperCase() + v.slice(1);
    } else {
        return v;
    }
} );
console.log( ar2 ); // 

Что делать, если мы хотим, чтобы наш массив состоял только из элементов определенного типа? Для этого можем использовать метод filter.

Метод filter

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

var ar = ;
var ar2 = ar.filter( function(v) {
    if ( typeof v === 'string' ) {
        return true;
    }
} );
console.log( ar2 ); // 

Метод filter проверяет каждый элемент массива, и его аргумент функции должен возвратить true или false, чтобы указать, следует ли включать текущий элемент из JavaScript цикла по массиву в возвращаемый массив или нет.

В этом примере используется оператор остатка от деления (%), с помощью которого формируется новый массив, содержащий только четные значения из исходного массива:

var ar = ;
var ar2 = ar.filter( function(v) { return v % 2 === 0; } );
console.log( ar2 ); // 

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

var ar = ; // разреженный массив
// использование filter, чтобы вернуть плотную версию разреженного массива
var ar2 = ar.filter( function() { return true; } );
console.log( ar2 ); // 

ВЛВиктория Лебедеваавтор-переводчик статьи «Javascript Array Iteration»

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

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

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

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

Как создать строку из массива

Могут быть ситуации, когда вы просто хотите создать строку, объединив элементы массива. Для этого вы можете использовать метод join(). Этот метод принимает необязательный параметр, который является строкой-разделителем, которая добавляется между каждым элементом. Если вы опустите разделитель, то JavaScript будет использовать запятую (,) по умолчанию. В следующем примере показано, как это работает:

var colors = ;

document.write(colors.join()); // Результат: Red,Green,Blue
document.write(colors.join("")); // Результат: RedGreenBlue
document.write(colors.join("-")); // Результат: Red-Green-Blue
document.write(colors.join(", ")); // Результат: Red, Green, Blue

Вы также можете преобразовать массив в строку через запятую, используя toString(). Этот метод не принимает параметр разделителя, как это делает join(). Пример работы метода toString():

var colors = ;
document.write(colors.toString()); // Результат: Red,Green,Blue

Работа с массивами в JS:

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

Важно:

В JavaScript индексация начинается с нуля.

JavaScript

1 2 3 4 5

// Создаём массив let arr=»Яблоко»,»Персик»,»Банан»;   // Выводим элемент по индексу console.log(arr1);

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

Также мы можете вывести все элементы массива, для этого нужно использовать цикл.

JavaScript

1 2 3 4 5 6 7

// Создаём массив let arr=»Яблоко»,»Персик»,»Банан»;   // Пишем цикл for for(leti=;i<arr.length;i++){ console.log(arri);// Выводим элемент в консоль }

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

То есть цикл будет работать, пока строга меньше трёх, в нашем случае.

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

Default

1 2 3 4 5 6 7 8 9

// Создаём массив let arr=»Яблоко»,»Персик»,»Банан»; arr1=»Киви»;   // Пишем цикл for for(leti=;i<arr.length;i++){ console.log(arri);// Выводим элемент в консоль }

Вот что выведется:

Методы работы с массивами в JS:

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

• push() — Добавляет элемент в конец массива;
• pop() — Удаляет элемент в конце массива;
• unshift() — Добавляем элемент в начала массива;
• shift() — Удаляем из массива первый элемент;
• splice() — Заменяет или удаляет элементы
• concat() — Объединяет массивы;
• farEach() — Перебор массива;

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

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12

// Создаём массив let arr=»Яблоко»,»Персик»,»Банан»;   // Добавляем элемент в конец массива arr.push(«Киви») // Удаляем элемент в начале массива arr.shift()   // Пишем цикл for for(leti=;i<arr.length;i++){ console.log(arri);// Выводим элемент в консоль }

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

Как видите вывод массива изменился, в конец добавилось слово, а в начала удалилось.

Вот этот пример покажет как происходит в JavaScript удаление элемента массива или его замена.

JavaScript

1 2 3 4 5 6 7 8 9 10

// Создаём массив let arr=»Яблоко»,»Персик»,»Банан»;   // Удаляем из массива второй элемент arr.splice(1,1);   // Пишем цикл for for(leti=;i<arr.length;i++){ console.log(arri);// Выводим элемент в консоль }

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

Ещё благодаря этому методу, можете заменять элементы.

JavaScript

1 2 3 4 5 6 7 8 9 10

// Создаём массив let arr=»Яблоко»,»Персик»,»Банан»;   // Замена элементов arr.splice(1,2,»Груша»,»Киви»);   // Пишем цикл for for(leti=;i<arr.length;i++){ console.log(arri);// Выводим элемент в консоль }

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

Последнее что мы рассмотрим, это как в JavaScript перебрать массив и объединить его с другим массивом.

JavaScript

1 2 3 4 5 6 7 8 9 10 11

// Создаём массив let arr=»Яблоко»,»Персик»,»Банан»;   // Объединяем два массива arr=arr.concat(«Груша»,»Киви»)   // Перебор массива arr.forEach(function(item,key){ // Вывод элемента и его индекса в консоль console.log(`${item}имеетиндекс${key}`); })

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

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

Выводим весь массив в консоль, вот что получилось.

Как видите, у нас вывелся объединённый массив, то есть, всё правильно работает.

Array Methods

Method	Description
concat()	Joins two or more arrays, and returns a copy of the joined arrays
copyWithin()	Copies array elements within the array, to and from specified positions
entries()	Returns a key/value pair Array Iteration Object
every()	Checks if every element in an array pass a test
fill()	Fill the elements in an array with a static value
filter()	Creates a new array with every element in an array that pass a test
find()	Returns the value of the first element in an array that pass a test
findIndex()	Returns the index of the first element in an array that pass a test
forEach()	Calls a function for each array element
from()	Creates an array from an object
includes()	Check if an array contains the specified element
indexOf()	Search the array for an element and returns its position
isArray()	Checks whether an object is an array
join()	Joins all elements of an array into a string
keys()	Returns a Array Iteration Object, containing the keys of the original array
lastIndexOf()	Search the array for an element, starting at the end, and returns its position
map()	Creates a new array with the result of calling a function for each array element
pop()	Removes the last element of an array, and returns that element
push()	Adds new elements to the end of an array, and returns the new length
reduce()	Reduce the values of an array to a single value (going left-to-right)
reduceRight()	Reduce the values of an array to a single value (going right-to-left)
reverse()	Reverses the order of the elements in an array
shift()	Removes the first element of an array, and returns that element
slice()	Selects a part of an array, and returns the new array
some()	Checks if any of the elements in an array pass a test
sort()	Sorts the elements of an array
splice()	Adds/Removes elements from an array
toString()	Converts an array to a string, and returns the result
unshift()	Adds new elements to the beginning of an array, and returns the new length
valueOf()	Returns the primitive value of an array

❮ Previous
Next ❯

splice

Метод splice() – это
универсальный «швейцарский нож» для работы с массивами. Умеет всё: добавлять,
удалять и заменять элементы. Его синтаксис такой:

Array.splice(index)

Он начинает с
позиции index, удаляет deleteCount элементов и
вставляет elem1, …, elemN на их место.
Возвращает массив из удалённых элементов. Этот метод проще всего понять,
рассмотрев примеры. Начнем с удаления. Предположим, имеется массив:

let ar = "Я", "смотрю", "этот", "обучающий", "урок";

Удалим 3-й и 4-й
элементы «этот» и «обучающий»:

ar.splice(2, 2);

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

console.log(ar);

Видим, в массиве
остались строки «я», «смотрю», «урок».

В следующем
примере мы удалим первые три элемента и добавим два других:

let delElem = ar.splice(, 3, "Это", "классный");

получаем массив ar:

«Это»,
«классный», «обучающий», «урок»

и массив delElem, состоящий из
удаленных элементов. Этот пример также показывает, что метод splice возвращает
массив из удаленных величин.

С помощью метода
splice можно вставлять
элементы, не удаляя существующие. Для этого аргумент deleteCount
устанавливается в 0:

ar.splice(3, , "интересный");

Получим массив:

«Я»,
«смотрю», «этот», «интересный», «обучающий»,
«урок»

В этом и в
других методах массива допускается использование отрицательного индекса. Он
позволяет начать отсчёт элементов с конца:

ar.splice(-3, 3, "это", "обучающее", "видео");

Здесь удаляются
последние 3 элемента и вместо них вставляются новые строчки.