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

Допустим, перед вами поставлена задача вычислить тестовые баллы всех учеников вашего класса, сдававших математику, и вывести на экран баллы, которые ниже среднего. Вашим наивным методом будет сначала присвоить оценку каждого ученика переменной, затем обратиться к каждой оценке, ссылаясь на имя переменной, вычислить средний балл и проверить наличие оценок ниже среднего балла. Эта стратегия сделает программу более сложной в использовании, а также нарушит принцип DRY (Do Not Repeat Yourself).
Использование структуры данных, известной как «массив», в JavaScript и других языках привело к более эффективному способу выполнения вышеописанной задачи. Вы можете использовать массив для хранения всех оценок студентов, сдававших математику, в виде списка, назначенного только одной переменной, и вы можете ссылаться на любую оценку, используя имя переменной и индекс. Для нас, программистов, массив облегчает жизнь.

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

Предварительные условия

Чтобы следовать этому руководству, вам потребуется следующее:

• Базовые знания JavaScript
• Текстовый редактор типа Vs Code, установленный на вашем локальном компьютере.

Что такое массив?

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

Массивы в JavaScript

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

Массивы в JavaScript — это упорядоченные списки значений, вставленные между открывающей квадратной скобкой ( [ ) и закрывающей квадратной скобкой ( ]. Список значений разделяется запятыми.

Пример массива в JavaScript:

let names = ["Moses" , "Jacob", "Isaac", "Abraham"]
console.log(names) // logs [ 'Moses', 'Jacob', 'Isaac', 'Abraham' ]

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

let main_arr = ["Isaac", "football", {name:"Moses"  , age: 21}, [one, two], 20]

Приведенный фрагмент кода показывает, что массивы могут содержать данные различных типов. Определенный выше массив содержит различные типы данных: строки, объекты, массив (ДА!, массив может хранить другой массив), целое число и так далее.

Создание массивов

В JavaScript мы создаем массивы с помощью двух методов. Это:

• Использование конструктора массивов

//sysntax
let arr = new Array();
console.log(arr) //logs []

• Встраивание элементов в квадратные скобки ([])

//syntax
//This is the most used method of creating arrays.
let arr = [];
console.log(arr) //logs []

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

Метод IsArray

В JavaScript есть встроенный метод, который проверяет, является ли элемент массивом. Он возвращает true, если переданный ему элемент является массивом, в противном случае он возвращает false.

Реализация:

let programming_language = 'JavaScript';
console.log(Array.isArray(programming_language)); //logs false

let programming_languages = ['python', 'javaScript', 'java', 'golang'];
console.log(Array.isArray(programming_languages)); //logs true

Длина и индекс

Индексация массивов в JavaScript начинается с нуля. Это утверждение означает, что доступ к первому элементу массива осуществляется через этот числовой слот — arr[0]. Длина массива — это количество элементов в массиве. Например, созданный выше массив names содержит четыре имени, значит, количество элементов массива names равно четырем, а размер массива — четыре. Проще говоря, количество элементов массива равно размеру или длине массива.

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

//let’s say we have an array with just one element.
let arr_new = ["JavaScript"];
//the number of elements of the arr_new array is one, so therefore the size of the array is one.
//In JavaScript we use the length method to get the size of an array

console.log(arr_new.length); //logs 1

//recall indexing starts at zero, to get the element in the arr_new array, we use the index
console.log(arr_new[0]); //logs JavaScript

Обратите внимание, в JavaScript мы используем метод indexof(), чтобы получить индекс определенного элемента в массиве. Если вы используете метод indexof() для проверки индекса существующего элемента в массиве, то возвращается индекс, в противном случае возвращается -1 (это означает, что элемент не существует в массиве).

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

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

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

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

//create an array
let names =  ["isaac", "samuel", "daniel", "moses"];
//In this instance, we want to access the second element of the names array
let names_access = names[1];
console.log(names_access) // logs samuel 

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

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

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

• Изменение существующих элементов в массиве.

//syntax
let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
//change the second element ('basketball') in the sports array to 'lawn tennis'
sports[1] = 'lawn tennis';
console.log(sports) //logs [ 'football', 'lawn tennis', 'Tennis', 'volleyball' ]
//change the second element back to 'basketball'
sports[1] = 'basketball';
console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]

• Добавление новых элементов в массив

//syntax
let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]
//Since the array has elements in it, we can only add a new element at the end of the array
//You need to know the index of the last element in the array.
//The last index will be the length of the array - 1 because the positioning of elements starts from the index of zero.
//To get the number of elements in the sports array. We use the length method.
let sports_length = sports.length;
console.log(sports_length); //logs 4
//Now that we know the length of the array. The last index = length (which is 4) - 1.     //   //That's 3.
//So therefore the next element or the new element to be added be at index (last index +    //1), which is 4.
sports[4] = 'Lawn Tennis';
console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball', 'Lawn Tennis' ]

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

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

• Метод массива Pop
• Метод массива Push
• Метод сдвига массива
• Метод массива со сдвигом
• Метод массива Slice
• Метод массива Splice
• Метод массива карты
• Метод фильтрации массива
• Метод обратного массива
• Метод массива Concat
• Метод объединения массивов
• Метод сортировки массива
• Включает метод массива
• Метод некоторых массивов
• Метод каждого массива
• Метод массива Findindex
• Метод массива Find
• Метод массива ForEach
• Метод уменьшения массива

Метод массива Pop (array.pop())

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

Реализация:

 //syntax
 let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
 let sports_popped = sports.pop();
 console.log(sports);// logs [ 'football', 'basketball', 'Tennis' ]
 console.log(sports_popped); // logs volleyball

Обратите внимание, если вы хотите удалить не только последний элемент, вам необходимо вызвать метод pop() столько раз, сколько элементов вы хотите удалить из конца массива.

Метод выталкивания массива (array.push())

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

Реализация:

//syntax
let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_pushed = sports.push('Lawn Tennis');
console.log(sports);// logs [ 'football', 'basketball', 'Tennis', 'volleyball', 'Lawn Tennis' ]
console.log(sports_pushed); // logs 5

Из приведенного фрагмента кода можно сделать вывод, что этот метод копирует элементы в массиве
исходном массиве, добавляет новый элемент в список элементов. Затем он переназначает переменную старого массива на новый массив со списком элементов старого массива с включением нового элемента (pushed element).

Обратите внимание, что метод push() является дополнительной функцией; эта функция позволяет добавлять в конец массива сразу несколько элементов.

//syntax
let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_pushed = sports.push('Lawn Tennis','cricket');
console.log(sports);// logs [ 'football', 'basketball', 'Tennis', 'volleyball', 'Lawn Tennis', 'cricket' ]
console.log(sports_pushed); // logs 6

В приведенном выше фрагменте кода мы использовали метод push() для добавления двух элементов в конец массива sports.

Метод сдвига массива (array.shift())

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

Реализация:

 let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
 let sports_shifted = sports.shift()
 console.log(sports); //logs [ 'basketball', 'Tennis', 'volleyball' ]
 console.log(sports_shifted); //logs football

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

Метод удаления массива (array.unshift())

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

Реализация:

 let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
 let sports_unshifted = sports.unshift('Lawn Tennis');
 console.log(sports); //logs [ 'Lawn Tennis', 'football', 'basketball', 'Tennis', 'volleyball' ]
 console.log(sports_unshifted); //logs 5

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

Реализация:

 //before the unshift method is applied
 let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
 console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]
 console.log(sports.length); // logs 4

 //after the unshift method is applied
 let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
 let sports_unshifted = sports.unshift()
 console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]
 console.log(sports_unshifted); //logs 4

Метод нарезки массива (array.slice())

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

Синтаксис:
array.slice(start, end);

Реализация:

let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_sliced = sports.slice(1,3);
console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ], the original array still exist
console.log(sports_sliced); //logs [ 'basketball', 'Tennis' ]

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

Реализация:

let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_sliced = sports.slice();
let sports_one_sliced = sports.slice(0);
console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]
console.log(sports_sliced); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]
console.log(sports_one_sliced) //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]

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

Реализация:

let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_one_sliced = sports.slice(1);
let sports_two_sliced = sports.slice(2);
console.log(sports); //logs [ 'football', 'basketball', 'Tennis', 'volleyball' ]
console.log(sports_one_sliced); //logs [ 'basketball', 'Tennis', 'volleyball' ]
console.log(sports_two_sliced); //logs [ 'Tennis', 'volleyball' ]

Метод Splice Array (array.splice())

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

Реализация:

let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_spliced = sports.splice(1,3);
console.log(sports); //logs [ 'football' ]
console.log(sports_spliced); // logs [ 'basketball', 'Tennis', 'volleyball' ]

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

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

Реализация:

let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_spliced = sports.splice(3, 0, "lawn tennis", 'wrestling');
console.log(sports); //logs [
//   'football',
//   'basketball',
//   'Tennis',
//   'lawn tennis',
//   'wrestling',
//   'volleyball'
// ]
console.log(sports_spliced); // logs []

Метод карты массива (array.map())

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

Реализация:

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

let triple_number = numbers.map(triple_nums);

//this is the callback function
function triple_nums(num) {
  return num * 3;
}

console.log(triple_number); //logs [ 3, 6, 9, 12, 15, 18 ]
console.log(numbers); //logs [ 1, 2, 3, 4, 5, 6 ], the original array still exist 

Метод фильтрации массива (array.filter())

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

Реализация:

//lets return even numbers
let numbers = [1, 2, 3, 4, 5, 6];

let even_nums = numbers.filter(even_numbers);
//this is the callback function
function even_numbers(num) {
  return num % 2 === 0; //the condition
}

console.log(numbers); // logs [ 1, 2, 3, 4, 5, 6 ]
console.log(even_nums); //logs [ 2, 4, 6 ]

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

Этот метод не изменяет исходный массив.

Метод обратного массива (array.reverse())

Как следует из названия, этот метод меняет порядок элементов в массиве на обратный. Первый элемент становится последним, а последний элемент становится первым. Он возвращает новый массив с элементами, имеющими обратный порядок. Этот метод мутирует исходный массив.

Реализация:

//let's return the reversed order of the numbers array.
let numbers = [1, 2, 3, 4, 5, 6];

let reversed = numbers.reverse();

console.log(reversed); //logs [ 6, 5, 4, 3, 2, 1 ]
console.log(numbers); //logs [ 6, 5, 4, 3, 2, 1 ]

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

Метод объединения массивов (array.concat())

Этот метод объединяет несколько массивов (он может объединять более двух массивов). Аргументом, который он принимает, является массив, который должен быть объединен с массивом, к которому применяется метод. Этот метод не изменяет исходные массивы.

Реализация:

//let's concatenate two arrays.
let nums_one = [1, 2, 3, 4, 5, 6];
let nums_two = [7, 8, 9, 10, 11, 12];

let nums_combined = nums_one.concat(nums_two);

console.log(nums_combined); //logs [
//     1,  2, 3, 4,  5,
//     6,  7, 8, 9, 10,
//    11, 12
//  ]

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

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

Обратите внимание, приведенный выше список применим, когда мы хотим объединить три массива.

Реализация:

//let's concatenate two arrays.
let nums_one = [1, 2, 3, 4, 5, 6];
let nums_two = [7, 8, 9, 10, 11, 12];
let nums_three = [13, 14, 15, 16, 17, 18];

let nums_combined = nums_one.concat(nums_two, nums_three);

console.log(nums_combined); //logs [
//     1,  2,  3,  4,  5,  6,  7,
//     8,  9, 10, 11, 12, 13, 14,
//    15, 16, 17, 18
//  ]

Метод объединения массивов (array.join())

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

Синтаксис
arr.join(separator);

Реализация:

//let's join elements of the array with a separator
let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let joined_sports = sports.join();
console.log(joined_sports); //logs football,basketball,Tennis,volleyball

//let's join elements of the array with a separator
let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let joined_sports = sports.join('-');
console.log(joined_sports); //logs football-basketball-Tennis-volleyball

Метод сортировки массива (array.sort())

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

Реализация:

//let's sort elements of the sports array
let sports = ['football', 'basketball', 'tennis', 'volleyball'];
let sorted_sports = sports.sort();
console.log(sorted_sport); //logs [ 'basketball', 'football', 'tennis', 'volleyball' ]
console.log(sports); //logs [ 'basketball', 'football', 'tennis', 'volleyball' ]

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

Давайте применим метод sort() к массиву, элементами которого являются числа.
Реализация:

//let's sort elements of the numbers array
let numbers = [7, 4, 6, 2, 3, 5, 1];
let sorted_numbers = numbers.sort();
console.log(numbers); //logs 
// [
//   1, 2, 3, 4,
//   5, 6, 7
// ]

Метод sort() не сортирует массив, элементы которого состоят из одной цифры, двух цифр и выше.
Например:

//let's sort elements of the numbers array
let numbers = [70, 1, 100, 20, 35, 50, 11];
let sorted_numbers = numbers.sort();
console.log(numbers); //logs [
//     1, 100, 11, 20,
//    35,  50, 70
//  ]

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

Реализация функции сравнения с помощью метода sort():

//let's sort elements of the numbers array
let numbers = [70, 1, 100, 20, 35, 50, 11];
let sorted_numbers = numbers.sort(comparisonFunction);

function comparisonFunction(a, b) {
  return a-b;
}

console.log(numbers); //logs [
//     1, 11,  20, 35,
//    50, 70, 100
//  ]

//Alternatively if you want to have it in descending order, you simply do:
let numbers = [70, 1, 100, 20, 35, 50, 11];
let sorted_numbers = numbers.sort(comparisonFunction);

function comparisonFunction(a, b) {
  return b-a;
}

console.log(numbers); //logs [
//     100, 70, 50, 35,
//      20, 11,  1
//   ] 

Метод включения массива (array.includes())

Метод includes() проверяет, существует ли элемент в массиве. Он возвращает true, если элемент существует в массиве, иначе false.

Реализация:

let sports = ['football', 'basketball', 'Tennis', 'volleyball'];
let sports_included = sports.includes('basketball');
let sports_not_included = sports.includes('lawn tennis');
console.log(sports_included); // logs true
console.log(sports_not_included); // logs false

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

Метод некоторых массивов (array.some())

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

Реализация:

//let's check if at least an element in the numbers array is even
let if_even = [2, 5, 6, 9, 11]; // we have at least two elements that are even
let if_not_even = [1, 3, 5, 9]; // there is no even number

let if_even_passed = if_even.some(even_numbers);
let even_not_passed = if_not_even.some(even_numbers);
//this is the callback function
function even_numbers(num) {
  return num % 2 === 0; //the condition
}

console.log(if_even_passed); // logs true 
console.log(even_not_passed); // logs false 

Метод каждого массива (array.every())

Этот метод проверяет, все ли элементы массива удовлетворяют условию, переданному через функцию обратного вызова. В отличие от метода some(), метод every() проверяет, все ли элементы массива удовлетворяют условию в функции обратного вызова.
Этот метод возвращает true, если элементы массива удовлетворяют условию в функции обратного вызова, и false, если элементы массива не удовлетворяют условию.

Реализация:

//let's check if the the elements of the numbers array are all even
let if_even = [2, 4, 6, 8, 10];
let if_not_even = [1, 2, 3, 8, 10];

let if_even_passed = if_even.every(even_numbers);
let even_not_passed = if_not_even.every(even_numbers);
//this is the callback function
function even_numbers(num) {
  return num % 2 === 0; //the condition
}

console.log(if_even_passed); // logs true 
console.log(even_not_passed); // logs false 

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

Метод массива Findindex (array.findIndex())

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

Реализация:

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

function find_index(num) {
  return num >= 4;
}

let indexed_number = numbers.findIndex(find_index);
console.log(indexed_number); //logs 3

Обратите внимание, если ни один элемент в данном массиве не удовлетворяет условию, возвращается индекс -1.
Например:

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

function find_index(num) {
  return num >= 7;
}

let indexed_number = numbers.findIndex(find_index);
console.log(indexed_number); //logs -1

Метод поиска массива (array.find())

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

Реализация:

let numbers = [1, 20, 35, 40, 52, 6];

function find_value(num) {
  return num >= 10;
}

let found_number = numbers.find(find_value);
console.log(found_number); //logs 20 

В отличие от метода findIndex(), который возвращает индекс -1, если ни один элемент не удовлетворяет условию в функции обратного вызова, метод find() возвращает неопределенное значение, если ни один элемент не удовлетворяет условию в функции обратного вызова.

Реализация:

let numbers = [1, 20, 35, 40, 52, 6];

function find_value(num) {
  return num >= 60;
}

let found_number = numbers.find(find_value);
console.log(found_number); //logs undefined

Метод массива ForEach (array.forEach())

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

Реализация:

let months = ['january', 'february', 'march', 'april', 'may', 'june'];

let months_aligned = months.forEach(month_display);

function month_display(month, index, arr) {
  console.log(`MOnth ${index + 1} - ${month}`); //In JavaScript, indexing starts from zero.
}

console.log(months_aligned); //logs MOnth 1 - january
// MOnth 2 - february
// MOnth 3 - march
// MOnth 4 - april
// MOnth 5 - may
// MOnth 6 - june

Мы можем использовать этот метод для выполнения сложения чисел в массиве.
Реализация:

let numbers = [1, 20, 35, 40, 52, 6]; 

let counter_sum = 0;

numbers.forEach((num) => {
  counter_sum += num;
})

console.log(counter_sum); //logs 154; that's the sum of all the elements in the numbers array. 

Метод уменьшения массива (array.reduce())

Как следует из названия, этот метод уменьшает элементы массива до одного элемента. Метод принимает функцию обратного вызова, которая вызывается в каждом экземпляре итерации. Эта функция обратного вызова имеет два аргумента — аккумулятор и текущее значение (currentValue).
По умолчанию накопитель устанавливается на первое значение в массиве, а currentValue — на второе значение в массиве. Метод reduce() принимает один или два аргумента, функцию обратного вызова или функцию обратного вызова с аккумулятором соответственно.

Синтаксис: метод reduce принимает один аргумент

//es5 version
let arr = []; // the array we want to apply the reduce method

//callback function
function example(accumulator, currentValue) {
  //input what you want to perform with this callback function
}

let arr_reduced = arr.reduce(example); //the reduce method takes one argument(the callback function)

//es6 version(arrow functions)
let arr = []; // the array we want to apply the reduce method
let arr_reduced = arr.reduce((accumulator, currentValue) => {}) //the reduce method takes one argument(the callback function)

В приведенном выше фрагменте кода накопитель будет установлен на первое значение в arr, поскольку для накопителя не определено значение, а currentValue будет вторым значением в arr.

Синтаксис: метод reduce, принимающий два аргумента

//es5 version
let arr = []; // the array we want to apply the reduce method

//callback function
function example(accumulator, currentValue) {
  //input what you want to perform with this callback function
}

let arr_reduced = arr.reduce(example, acc_value); //the reduce method takes two argument(the callback function and accumulator intial value) 

//es6 version(arrow functions)
let arr = []; // the array we want to apply the reduce method
let arr_reduced = arr.reduce((accumulator, currentValue) => {}, acc_value) //the reduce method takes two argument(the callback function and accumulator intial value)

Поскольку метод reduce() принимает второй аргумент — аккумулятор, в приведенном выше фрагменте кода аккумулятор устанавливается в определенное значение, а currentValue будет первым значением в arr. Значение, определяемое аккумулятором, может быть любым в зависимости от вашей конечной цели, в большинстве фрагментов кода в Интернете значение, определяемое аккумулятором, равно нулю (0).

Давайте разберемся на практике с базовой задачей суммирования чисел в массиве.

Используйте метод reduce для получения суммы чисел.

let numbers = [1, 20, 35, 40, 52, 6]; 

function sum_numbers(accumulator, currentValue) {
  console.log("The accumulator ", accumulator); //The accumulator  1 The accumulator  21 The accumulator  56 The accumulator  96 The accumulator  148
  return accumulator + currentValue;
}

 //since an accumulator is not defined, you will notice that the initial value of the accumulator is 1, that's because no accumulator was defined.

let result_val = numbers.reduce(sum_numbers);
console.log('The result is ',result_val); //logs 154

Вы можете сократить приведенный выше код до следующего:

let numbers = [1, 20, 35, 40, 52, 6]; 
let result_val = numbers.reduce((accumulator, currentValue) => accumulator + currentValue , 0);
console.log(result_val); //logs 154

Используем метод reduce с тернарным оператором, чтобы найти число, которое больше всех остальных чисел в массиве

let numbers = [1, 20, 35, 20, 52, 6]; 

let greatest = numbers.reduce((accumulator, currentValue) => currentValue > accumulator ? currentValue : accumulator);
console.log(greatest);

Обратите внимание, что не обязательно всегда называть переменные как accumulator и currentvalue. Я просто написал их названия полностью для удобства восприятия. Вы можете сократить их до acc — accumulator и cur — currentValue.

Заключение

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

Для дальнейшего чтения ознакомьтесь со следующими материалами:

• Mdn
• W3schools

Вы также можете попробовать некоторые легкие вопросы по массивам из leetcode здесь

Надеюсь, вам понравилась эта статья, как я и ожидал, пожалуйста, ставьте лайк, оставляйте комментарии и делитесь этой статьей.