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

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

Методы, изменяющие исходный массив, называютсямутатор (изменитель) метод.

возвращает новый значение или формуметодназываетсядоступ (доступ) метод.

Преобразование массива в строку

toString()Метод массива преобразует массив в строку (разделенную запятыми) значений массива.

var months = ["Jan", "Feb", "Mar", "Apr", "May"];
document.getElementById("result").innerHTML = months.toString();

join()Метод массива также может преобразовать все элементы массива в новый строковый формат.

поведение этого метода подобноtoString()Но вы также можете определить разделитель для метода join.

var fruits = ["Banana", "Apple", "Mango"];
fruits.join("　+　"); // Banana + Apple + Mango
fruits.join("　/　"); // Banana / Apple / Mango
fruits.join("　©　"); // Banana © Apple © Mango

let fruits = ["Apple", "Mango", "Banana", "Orange"];
document.getElementById("result").innerHTML = fruits;

Метод push() - добавление элементов массива

push()Метод массива добавляет один или несколько новых элементов в конец массива.

var fruits = ['Banana', 'Mango', 'Apple'];
fruits.push("Strawberry");

push()Метод возвращает новую длину массива.

Следующий код добавляет три элемента в конец массива. Параметр total содержит новую длину массива:

var fruits = ['Banana', 'Mango', 'Apple'];
var total = fruits.push('Strawberry', 'Lychee', 'Guava');

unshift()Методы массива добавляют один или несколько новых элементов в начало массива.

var fruits = ['Banana', 'Mango', 'Apple'];
fruits.unshift('Strawberry');

Данныйunshift()Метод возвращает новую длину массива.

Следующий код добавляет три элемента в массив. Параметр total содержит новую длину массива:

var fruits = ['Banana', 'Mango', 'Apple'];
var total = fruits.unshift('Strawberry', 'Lychee', 'Guava');

pop() метод - удаление элементов массива

pop()Метод удаляет последний элемент из массива.

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
fruits.pop();

pop()Метод возвращает удаленный (попавший) элемент:

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
var x = fruits.pop();

shift()Методы массива удаляют первый элемент из массива.

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
fruits.shift();

shift()Метод возвращает удаленный (перемещенный) элемент:

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
var x = fruits.shift();

splice() метод - добавление и изменение массива

splice()Метод изменяет массив, удаляя существующие элементы и (или) добавляя новые.

var months = ['Jan', 'Mar', 'Apr', 'Jun'];
months.splice(1, 0, 'Feb'); // Добавление 'Feb' на индексе 1

Первый параметр (1）определяет позицию добавления (соединения) нового элемента.

Второй параметр (0）определяет, сколько элементов нужно удалить.

Третий параметр ('Feb'）Определите новый элемент для добавления.

В следующем примере мы заменим один элемент на индексе 4:

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
months.splice(4, 1, 'May'); // Заменить 'Jun' на 'May' на индексе 4

В следующем примере мы удалим один элемент, начиная с индекса 3:

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
months.splice(3, 1);

В следующем примере мы удалим два элемента, начиная с индекса 2:

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
months.splice(2, 2);

splice()Метод возвращает массив, содержащий удаленные элементы:

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
var arr = months.splice(2, 2);

Вниманиеsplice()Не путайте сslice()Мешанина с массивами-доступами,后者 является массивом-доступом, который копирует часть массива.

Изменение элементов массива

Используя оператор присваивания, мы можем заменить любую значение в массиве.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0] = "Monkey";

concat() метод - объединение массивов

concat()Метод массива используется для объединения двух или более массивов в один новый массив.

В следующем примере мы создадим два массива и объединим их в новый массив:

var fruits = ["Apple", "Mango", "Banana"];
var numbers = [5, 10, 12, 98, 3];
var arr = fruits.concat(numbers);

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

var num1 = [1, 2, 3];
var num2 = [4, 5, 6];
var num3 = [7, 8, 9];
var nums = num1.concat(num2, num3);

slice() метод - вырезание массива

slice()Метод массива копирует часть массива в новый массив.

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
var extract = fruits.slice(1, 3); // return Mango, Apple

Первый параметр (1）определяет положение начала извлечения.

Второй параметр (3）определяет положение окончания извлечения.

Если пропустить второй параметр, тоslice()Метод вырезает оставшуюся часть массива.

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

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
var extract = fruits.slice(1); // return Mango, Apple, Orange

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

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
var extract = fruits.slice(-3, -1); // return Mango, Apple

Поиск элемента в массиве

indexOf()Метод массива возвращает первый индекс найденного элемента в массиве.

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
fruits.indexOf('Apple'); // возвращает 2

Примечание:Индекс первого элемента равен 0, индекс второго элемента равен 1 и так далее.

Если указанный параметр не существует в массиве, то он возвращает-1.

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
fruits.indexOf('Beer'); // возвращает -1

lastIndexOf()Метод массива возвращает последний индекс элемента, который можно найти в массиве.

Мы можем провести тестирование на примере indexOf(), который содержит два 'Apple'.

var fruits = ['Banana', 'Mango', 'Apple', 'Orange', 'Apple'];
fruits.lastIndexOf('Apple'); // возвращает 4

Примечание:lastIndexOf()Он будет начинать поиск в массиве с конца и возвращать первый найденный индекс.

Если указанный параметр не существует в массиве, то он возвращает-1.

var fruits = ['Banana', 'Mango', 'Apple', 'Orange', 'Apple'];
fruits.lastIndexOf('Beer'); // возвращает -1

Метод fill()

fill()Метод массива заменяет все элементы массива статическим значением.

var nums = [1, 2, 3, 4];
nums.fill(17);

Все четыре элемента в массиве заменены одним и тем же значением 17.

fill()Он также принимает необязательные параметры начала и конца.

Заполнение с позиции 2 до позиции 4 значением 0 (не включая 4):

var nums = [1, 2, 3, 4];
nums.fill(0, 2, 4);

Использованиеfill()Элементы массива можно заменить статическими значениями.

Сортировка массива и обратный массив

reverse()Метод массива может изменить порядок элементов в массиве.

var nums = [10, 20, 30, 40, 50];
nums.reverse();

Использованиеreverse()Затем последний элемент будет первым, а первый элемент будет последним.

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

По умолчанию,sort()Все строки, содержащиеся в массиве, будут отсортированы в алфавитном порядке.

var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();

Из-заsort()На основе первого unicode символа, поэтому он будет сортировать элементы с заглавных букв, а затем с маленьких.

Давайте изменяем исходный массив, чтобы один из наших строк начинался с маленькой буквы.

var months = ['March', 'Jan', 'Feb', 'dec'];
months.sort();

Можно использоватьsort()Метод сортирует числа.

var nums = [5, 1, 2, 7, 3, 6, 4];
nums.sort();

sort()Не сортирует массив чисел по размеру. Вместо этого он проверяет только первый символ чисел.

var nums = [5, 1, 2, 17, 13, 6, 34];
nums.sort();

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

var nums = [5, 1, 2, 17, 13, 6, 34];
nums.sort(function(a, b) { return a - b });

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

var nums = [5, 1, 2, 17, 13, 6, 34];
nums.sort(sortNumerically);
// Функция для сортировки чисел по размеру
var sortNumerically = (a, b) => {
　　return a - b;
}

Полное руководство по массиву

Для получения полной информации о свойствах и методах обратитесь в нашРуководство по массиву JavaScript Array.

Часть справки содержит описание и примеры всех свойств и методов массивов.