Справочник Array JavaScript – методы Array JS, объясненные примерами

Автор оригинала: TAPAS ADHIKARY.

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

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

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

Есть много отличных статей о массивах JavaScript, уже доступных в Интернете. Так почему я написал еще одну статью на том же предмете? Что такое мотивация?

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

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

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

Пара квадратные скобки [] представляет собой массив в JavaScript. Все элементы в массиве являются запятая (,) отделен.

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

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

const mixedTypedArray = [100, true, 'freeCodeCamp', {}];

Положение элемента в массиве известна как его индекс Отказ В JavaScript индекс массива начинается с 0 И он увеличивается на один с каждым элементом.

Так, например, в приведенном выше массиве элемент 100 в Индекс 0 , правда в Индекс 1 , «FreeCodeCamm» на Индекс 2 , и так далее.

Количество элементов в массиве определяет его длину. Например, длина вышеуказанного массива составляет четыре.

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

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

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

Вы также можете использовать Массив Конструктор для создания массива.

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');

Есть другие методы, такие как Array.of () и Array.from () и Распространение Оператор ( ... ) помогает вам также создавать массивы. Мы узнаем о них позже в этой статье.

Как получить элементы из массива в JS

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

const element = array[index];

Исходя из ваших случаев использования, вы можете получить доступ к элементам массива один на один или в цикле.

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

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'

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

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'

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

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

for(let i=0; i

И вот вывод:

Как добавить элементы на массив в JS

Используйте push () Способ вставить элемент в массив. push () Способ добавляет элемент в конце массива. Как насчет мы добавляем арахис в салат, как это:

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');

Теперь массив салата:

[«🍅», «🍄», «🥦», «🥒», «🌽», «🥕», «🥑», «🥜»]

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

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.unshift('🥜');

Теперь массив салата:

[«🥜», «🍅», «🍄», «🥦», «🥒», «🌽», «🥕», «🥑»]

Как удалить элементы из массива в JS

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

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.pop(); // 🥑

console.log(salad); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕']

Используйте Shift () Способ удаления элемента с начала массива. Как POP () Метод, Shift () Возвращает удаленный элемент и изменяет исходный массив.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.shift(); // 🍅

console.log(salad); // ['🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

Как скопировать и клонировать массив в JS

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

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const saladCopy = salad.slice();

console.log(saladCopy); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']

salad === saladCopy; // returns false

В качестве альтернативы вы можете использовать Распространение Оператор для создания копии массива. Мы узнаем об этом в ближайшее время.

Как определить, является ли значение массивом в JS

Вы можете определить, является ли значением массивом, используя Array.isarray (значение) метод. Метод возвращает True, если прошедшее значение является массивом.

Array.isArray(['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']); // returns true
Array.isArray('🍅'); // returns false
Array.isArray({ 'tomato': '🍅'}); // returns false
Array.isArray([]); // returns true

С Ecmascript 6 (ES6) у нас есть новый синтаксис для извлечения нескольких свойств из массива и назначить их переменные в одном. Он удобно помочь вам сохранить ваш код чистым и лаконичным. Этот новый синтаксис называется разрушительным синтаксисом.

Вот пример извлечения значений из массива с использованием синтаксиса разрушимости:

let [tomato, mushroom, carrot] = ['🍅', '🍄', '🥕'];

Теперь вы можете использовать переменные в вашем коде:

console.log(tomato, mushroom, carrot); // Output, 🍅 🍄 🥕

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

let vegetables = ['🍅', '🍄', '🥕'];
let tomato = vegetables[0];
let mushroom= vegetables[1];
let carrot= vegetables[2];

Таким образом, разрушительный синтаксис спасает вас от записи много кода. Это дает вам огромное повышение производительности.

Как назначить значение по умолчанию для переменной

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

В приведенном ниже примере мы назначаем значение по умолчанию для переменной гриба.

let [tomato , mushroom = '🍄'] = ['🍅'];
console.log(tomato); // '🍅'
console.log(mushroom ); // '🍄'

Как пропустить значение в массиве

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

В приведенном ниже примере мы пропускаем грибной элемент. Обратите внимание на пространство в переменной декларации на левой стороне выражения.

let [tomato, , carrot] = ['🍅', '🍄', '🥕'];

console.log(tomato); // '🍅'
console.log(carrot); // '🥕'

Разрушение вложенного массива в JS

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

Например, давайте создадим вложенный массив для фруктов. Он имеет несколько фруктов и массив овощей в нем.

let fruits = ['🍈', '🍍', '🍌', '🍉', ['🍅', '🍄', '🥕']];

Как бы вы получили доступ к «🥕» из вышеупомянутого массива? Опять же, вы могли бы сделать это без разрушения, как это:

const veg = fruits[4]; // returns the array ['🍅', '🍄', '🥕']
const carrot = veg[2]; // returns '🥕'

В качестве альтернативы вы можете использовать этот кратковременный синтаксис:

fruits[4][2]; // returns '🥕'

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

let [,,,,[,,carrot]] = ['🍈', '🍍', '🍌', '🍉', ['🍅', '🍄', '🥕']];

Поскольку ES6 мы можем использовать ... (Да, три последовательных точка) в виде Spread Syntax и параметр покоя в деструкурировании массива.

• Для параметра отдыха ... Появляется на левой стороне синтаксиса разрушительной.
• Для распространения синтаксиса ... появляется на правой стороне синтаксиса разрушительной.

Как использовать параметр покоя в JS

С Параметр отдыха Мы можем отобразить левые элементы массива в новом массиве. Параметр покоя должен быть последней переменной в синтаксисе разрушимости.

В приведенном ниже примере мы сопоставляем первые два элемента массива в томатные и грибные переменные. Остальные элементы отображаются на Отдых Переменная с использованием ... Отказ Отдых Переменная – это новый массив, содержащий оставшиеся элементы.

const [tomato, mushroom, ...rest] = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

console.log(tomato); // '🍅'
console.log(mushroom); // '🍄'
console.log(rest); // ["🥦", "🥒", "🌽", "🥕", "🥑"]

Как использовать оператор распространения в JS

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

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

const saladCloned = [...salad];
console.log(saladCloned); // ["🍅", "🍄", "🥦", "🥒", "🌽", "🥕", "🥑"]

salad === saladCloned // false

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

Как поменять значения с разрушением

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

let first = '😔';
let second = '🙂';
[first, second] = [second, first];

console.log(first);  // '🙂'
console.log(second); // '😔'

Как объединить массивы

Мы можем объединить две массивы и создать новый массив со всеми элементами из обоих массивов. Давайте возьмем две массивы – один с парой смайликов и другой с несколькими овощами.

const emotion = ['🙂', '😔'];
const veggies = ['🥦', '🥒', '🌽', '🥕'];

Теперь мы объединим их, чтобы создать новый массив.

const emotionalVeggies = [...emotion, ...veggies];
console.log(emotionalVeggies); // ["🙂", "😔", "🥦", "🥒", "🌽", "🥕"]

До сих пор мы видели несколько свойств и методов массива. Давайте сделаем быстрое откровение тех, как мы смотрели на:

• push () – Вставьте элемент в конце массива.
• беззифта () – Вставьте элемент в начале массива.
• POP () – Удалите элемент с конца массива.
• Shift () – Удалите элемент с начала массива.
• ломтик () – Создайте неглубокую копию массива.
• Array.isarray () – Определите, является ли значение массивом.
• Длина – Определите размер массива.

Теперь мы узнаем о других важных методах Armay JS с примерами.

Как создавать, удалить, обновлять и доступа к массивам в JavaScript

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

Метод массива CONCAT ()

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

Давайте объединим две массивы.

const first = [1, 2, 3];
const second = [4, 5, 6];

const merged = first.concat(second);

console.log(merged); // [1, 2, 3, 4, 5, 6]
console.log(first); // [1, 2, 3]
console.log(second); // [4, 5, 6]

Используя CONCAT () Метод мы можем объединить более двух массивов. Мы можем объединить любое количество массивов с этим синтаксисом:

array.concat(arr1, arr2,..,..,..,arrN);

Вот пример:

const first = [1, 2, 3];
const second = [4, 5, 6];
const third = [7, 8, 9];

const merged = first.concat(second, third);

console.log(merged); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Метод массива присоединения ()

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

const emotions = ['🙂', '😍', '🙄', '😟'];

const joined = emotions.join();
console.log(joined); // "🙂,😍,🙄,😟"

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

const joined = emotions.join('<=>');
console.log(joined); // "🙂<=>😍<=>🙄<=>😟"

Призывая Присоединяйтесь () Метод в пустом массиве возвращает пустую строку:

[].join() // returns ""

Метод Array Fill ()

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

const colors = ['red', 'blue', 'green'];

colors.fill('pink');
console.log(colors); // ["pink", "pink", "pink"]

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

const colors = ['red', 'blue', 'green'];

colors.fill('pink', 1,3); // ["red", "pink", "pink"]

В этом случае первый аргумент заполнить () Метод – это значение, с которым мы меняемся. Второй аргумент – это индекс запуска для изменения. Начинается с 0 Отказ Последний аргумент – определить, где прекратить заполнение. Максимальное значение это может быть Цвета. Длина Отказ

Пожалуйста, проверьте эту резюме Twitter для практического использования заполнить () метод.

Вы использовали #Javascript Метод наполнить () на практике? Он заполняет все элементы массива со статическим значением. 🧵 👇 #DevCommunity # 100Дасофкод pic.twitter.com/ahfsJBOacT

Кроме того, вы можете найти этот демонстрационный проект полезным: https://github.com/atapas/array-fill-color-cards Отказ

Включает () метод массива

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

const names = ['tom', 'alex', 'bob', 'john'];

names.includes('tom'); // returns true
names.includes('july'); // returns false

Метод массива индекса ()

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

const names = ['tom', 'alex', 'bob', 'john'];

names.indexOf('alex'); // returns 1
names.indexOf('rob'); // returns -1

Есть еще один метод lastindexof () Это помогает вам найти индекс последнего возникновения элемента в массиве. Как indexof () , lastindexof. () также возвращает -1 Если элемент не найден.

const names = ['tom', 'alex', 'bob', 'tom'];

names.indexOf('tom'); // returns 0
names.lastIndexOf('tom'); // returns 3

Метод реверса () массива

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

const names = ['tom', 'alex', 'bob'];

names.reverse(); // returns ["bob", "alex", "tom"]

Обратный () Метод изменяет оригинальный массив.

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

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

const names = ['tom', 'alex', 'bob'];

names.sort(); // returns ["alex", "bob", "tom"]

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

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

const numbers = [23, 5, 100, 56, 9, 13, 37, 10, 1]

Во-первых, мы вызови по умолчанию Сортировать () Способ и см. Выход:

numbers.sort();

Теперь сортированная массив представляет собой [1, 10, 100, 13, 23, 37, 5, 56, 9]. Ну, это не выход, который мы ожидаем. Но это происходит потому, что по умолчанию Сортировать () Метод преобразует элементы в строку, а затем сравнивает их на основе UTF-16 Значения блока кода.

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

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

Теперь пропустите это к Сортировать () Метод:

numbers.sort(ascendingComp); // retruns [1, 5, 9, 10, 13, 23, 37, 56, 100]

/* 

We could also code it like,

numbers.sort(function(a, b) {
  return (a-b);
});

Or, with the arrow function,

numbers.sort((a, b) => (a-b));

*/

Для поручения по убыванию делайте это:

numbers.sort((a, b) => (b-a));

Проверьте этот репозиторий GitHUB для более сортировки примеров и советов: https://github.com/atapas/js-array-sorting

Метод массива Splice ()

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

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

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

В приведенном ниже примере мы добавляем элемент Zack На индекс 1 без удаления любых элементов.

const names = ['tom', 'alex', 'bob'];

names.splice(1, 0, 'zack');

console.log(names); // ["tom", "zack", "alex", "bob"]

Посмотрите на следующий пример. Здесь мы удаляем один элемент из Индекс 2 (3-й элемент) и добавление нового элемента, Zack. . Сращивание () Метод возвращает массив с удаленным элементом, Боб Отказ

const names = ['tom', 'alex', 'bob'];

const deleted = names.splice(2, 1, 'zack');

console.log(deleted); // ["bob"]
console.log(names); // ["tom", "alex", "zack"]

Проверьте эту нить Twitter, чтобы узнать, как Сращивание () Метод поможет вам сделать массив пустой.

Как вы предпочитаете удалить один, много или все элементы из #javascript массив в родном пути? – – 🗑️rr = [] – 🗑️arr.shift () – 🗑️arr.pop () – 🗑️arr.Splice () Это нить, чтобы поговорить об этом. 🧵 #Codenewie # 100Дасофкод #Devcommunityin #Devcommunity

Статические методы массива в JavaScript

В JavaScript массивы имеют три статических метода. Мы обсудили Array.isarray () уже. Давайте обсудим два других сейчас.

Метод массива. From ()

Давайте возьмем простой фрагмент HTML-код, который содержит div и несколько элементов списка:

  

    

      
...
      
...
      
...
      
...
      
...
      
...
      
...
      
...
      
...
      
...
    
  
 

Теперь мы запросим DOM, используя getelementsbytagname () метод.

document.getElementsByTagName('li');

Возвращает Htmlcollection Это выглядит так:

Так что это как массив. Теперь давайте попробуем итерацию по нему, используя foreach :

document.getElementsByTagName('li').forEach(() => {
 // Do something here..
})

Угадай, какая вывод? Это, как это ошибка:

Но почему? Потому что Htmlcollection не массив. Это Массив - как объект. Так что вы не можете повторить его, используя foreach Отказ

Это где вы должны использовать Array.from () метод. Он преобразует массивный объект на массив, чтобы вы могли выполнить все операции массива на нем.

const collection = Array.from(document.getElementsByTagName('li'))

Здесь Коллекция это массив:

Метод массива Array.of ()

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

Array.of(2, false, 'test', {'name': 'Alex'})

Вывод выглядит так:

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

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

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

Этот массив содержит информацию для некоторых студентов, подписанных на различные платные курсы:

let students = [
   {
      'id': 001,
      'f_name': 'Alex',
      'l_name': 'B',
      'gender': 'M',
      'married': false,
      'age': 22,
      'paid': 250,  
      'courses': ['JavaScript', 'React']
   },
   {
      'id': 002,
      'f_name': 'Ibrahim',
      'l_name': 'M',
      'gender': 'M',
      'married': true,
      'age': 32,
      'paid': 150,  
      'courses': ['JavaScript', 'PWA']
   },
   {
      'id': 003,
      'f_name': 'Rubi',
      'l_name': 'S',
      'gender': 'F',
      'married': false,
      'age': 27,
      'paid': 350,  
      'courses': ['Blogging', 'React', 'UX']
   },
   {
      'id': 004,
      'f_name': 'Zack',
      'l_name': 'F',
      'gender': 'M',
      'married': true,
      'age': 36,
      'paid': 250,  
      'courses': ['Git', 'React', 'Branding']
   } 
];

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

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

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

const femaleStudents = students.filter((element, index) => {
  return element.gender === 'F';
})

console.log(femaleStudents);

Вывод это:

Верно. Студент с именем Rubi Является ли единственная студентка, которую мы до сих пор.

MAP () Метод массива

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

const fullNames = students.map((element, index) => {
  return {'fullName': element['f_name'] + ' ' + element['l_name']}
});

console.log(fullNames);

Вывод выглядит так:

Здесь мы видим новый массив с Funnname Свойства, которые рассчитаны с использованием F_NAME и l_name Свойства каждого студента объекта.

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

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

const total = students.reduce(
   (accumulator, student, currentIndex, array) => {
      accumulator = accumulator + student.paid;
      return (accumulator);
   }, 
0);

console.log(total); // 1000

В вышеуказанном коде,

• Мы инициализируем Аккумулятор с 0 Отказ
• Мы применяем Уменьшить Метод на каждом из предметов студентов. Доступ к платный Свойство и добавьте его в аккумулятор.
• Наконец, мы возвращаем аккумулятор.

Некоторые () метод массива

некоторые () Метод возвращает логическое значение (True/false) на основе по меньшей мере одного элемента в массиве, передавающем условие в функции. Посмотрим, есть ли какие-либо студенты ниже 30 лет.

let hasStudentBelow30 = students.some((element, index) => {
  return element.age < 30;
});

console.log(hasStudentBelow30); // true

Да, мы видим, что есть как минимум один студент моложе 30.

Метод Array Find ()

Используя некоторые () Метод, мы видели, что находится студент ниже 30 лет. Давайте выясним, кто этот студент.

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

Массивы имеют другой связанный метод, Findindex () , это возвращает индекс элемента, который мы находим с помощью Найти () метод. Если никаких элементов не совпадает с условием, Findindex () Метод возвращается -1 .

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

const student = students.find((element, index) => {
  return element.age < 30;
});

console.log(student);

Вывод это:

Как мы видим, это Алекс, который 22 года. Мы нашли его.

Средний () метод массива

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

const atLeastTwoCourses = students.every((elements, index) => {
  return elements.courses.length >= 2;
});

console.log(atLeastTwoCourses); // true

Как и ожидалось, мы видим, что вывод – правда Отказ

Предлагаемые методы массива

По состоянию на маю 2021 года Ecmascript имеет Метод в предложении , на () метод.

Метод AT ()

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

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

const junkFoodILove = ['🥖', '🍔', '🍟', '🍕', '🌭', '🥪', '🌮', '🍿'];

junkFoodILove.at(0); // 🥖
junkFoodILove.at(3); // 🍕
junkFoodILove.at(-1); // 🍿
junkFoodILove.at(-5); // 🍕
junkFoodILove.at(-8); // 🥖
junkFoodILove.at(10); // undefined

Вот быстрая демонстрация этого:

Вы можете использовать Этот полифилл Для достижения функциональности на () Способ до тех пор, пока этот метод не добавлен на язык JavaScript. Пожалуйста, проверьте этот репозиторий Github для на () Примеры метода: https://github.com/atapas/js-array-at-method.

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

Давайте подключемся. Вы найдете меня активным на Twitter (@tapasadhikary) Отказ Пожалуйста, не стесняйтесь дать следующее.

Вы также можете понравиться эти статьи:

• Зачем вам знать о массивных объектах?
• 5 Полезные советы о методе сортировки массива JavaScript
• Способы опорожнения массива в JavaScript и последствиях
• Создайте мышцы JavaScript с помощью карты, уменьшить, фильтр и другие итераторы массива
• Почему вам нужно знать о методе JavaScript AT ()?

Оригинал: “https://www.freecodecamp.org/news/the-javascript-array-handbook/”