Как использовать методы массива в JavaScript: методы итерации

Вступление

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

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

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

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

Примечание. Методы массива правильно записываются как Array.prototype.method(), как Array.prototypeотносится к Arrayсамому объекту. Для простоты мы просто перечислим имя как method().

Понимание функций стрелок

Во многих примерах в этом руководстве будут использованы выражения функции JavaScript arrow , которые представлены значком равенства, за которым следует знак больше =>.

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

var example = function() {
  // code to execute
}

example();

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

var example = () => {
  // code to execute
}

example();

Скобки в любом случае могут содержать параметры. Когда имеется только один параметр, скобки могут быть опущены, как таковые:

var example = parameter1 => {
  // code to execute
}

Во всех примерах этого урока мы будем использовать синтаксис функции стрелки. Чтобы прочитать и понять больше о функциях в JavaScript, прочитайте ссылку «Функции» в Mozilla Developer Network.

для каждого()

forEach()Метод вызывает функцию для каждого элемента массива.

Начнем со следующего массива, назначенного переменной fish:

let fish = [ "piranha", "barracuda", "cod", "eel" ];

Мы можем использовать forEach()для печати каждого элемента в fishмассиве на консоли.

// Print out each item in the array
fish.forEach(individualFish => {
    console.log(individualFish);
})

Как только мы это сделаем, мы получим следующий результат:

Output
piranha
barracuda
cod
eel

Другой способ сделать это — использовать ключевое слово forцикла и проверить его на свойство length массива.

// Loop through the length of the array
for (let i = 0; i < fish.length; i++) {
    console.log(fish[i]);
}

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

карта()

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

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

let fish = [ "piranha", "barracuda", "cod", "eel" ];

// Print out each item in the array
let printFish = fish.map(individualFish => {
    console.log(individualFish);
});

printFish;
Output
piranha
barracuda
cod
eel

Мы также можем использовать map()для изменения значений каждого элемента в массиве. Чтобы продемонстрировать это, мы добавим sк концу каждого элемента fishмассива, чтобы разделить каждое слово.

// Pluralize all items in the fish array
let pluralFish = fish.map(individualFish => {
    return `${individualFish}s`;
});

pluralFish;
Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

Исходная fishпеременная не изменяется, но pluralFishтеперь содержит модифицированную версию исходной переменной.

фильтр()

filter()Метод создает новый массив с элементами , которые передают результат данного теста.

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

let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// Filter all creatures that start with "s" into a new list
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;
Output
[ 'shark', 'squid', 'starfish' ]

Мы проверили , какие элементы в массиве имеют sв 0индексе, и присваивается результат в новую переменную.

filter() является итерационным методом и не мутирует исходный массив.

уменьшения ()

reduce()Метод позволит уменьшить массив к единственному значению.

Это часто встречается с числами, например, нахождение суммы всех чисел в массиве.

let numbers = [ 42, 23, 16, 15, 4, 8 ];

// Get the sum of all numerical values
let sum = numbers.reduce((a, b) => {
    return a + b;
});

sum;
Output
108

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

находить()

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

В качестве примера мы создадим массив морских существ.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Затем мы будем использовать этот find()метод для проверки того, является ли какое-либо из существ в массиве головоногими.

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
    return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);
Output
octopus

Поскольку octopusпервая запись в массиве удовлетворяла тесту в isCephalopod()функции, это первое значение, которое нужно вернуть.

Этот find()метод может помочь вам работать с массивами, которые содержат много значений.

findIndex ()

findIndex()Метод возвращает первый индекс в массиве , который проходит данный тест.

Мы можем использовать тот же seaCreaturesпример из find()метода.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

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

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
    return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);
Output
1

octopusэто первый элемент, который соответствует тесту и имеет индекс 1, поэтому возвращается номер индекса.

Если тест не findIndex()будет выполнен, он вернется -1.

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex
Output
-1

Этот findIndex()метод особенно полезен при работе с массивами, содержащими множество элементов.

Заключение

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *