Рубрики
Без рубрики

Понимание JavaScript Array Series VII – Летные петли и итерация IV

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

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

Понимание JavaScript Array Series VI – петли и итерационная часть массива III

Nedy Udombat · 4 октября 1919 · 4 мин прочитаны

Сегодня я расскажу об использовании Фильтр итерации по массивам.

ФИЛЬТР

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

Мы могли бы достичь этого с для ... петли, делая это:

  const numbersArray = [1 ,2, 3, 4, 5, 6, 7, 8, 9, 10];
  const evenNumbersArray = [];

  for (let i = 0; i < numbersArray.length; i += 1) {
    if (numbersArray[i]%2 === 0) {
      evenNumbersArray.push(numbersArray[i])
    }
  }

  console.log(evenNumbersArray) // [2, 4, 6, 8, 10]

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

  const numbersArray = [1 ,2, 3, 4, 5, 6, 7, 8, 9, 10];
  const evenNumbersArray = numbersArray.filter(number => number%2 === 0);

  console.log(evenNumbersArray) // [2, 4, 6, 8, 10]

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

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

Давайте посмотрим на его синтаксис:

   // syntax
   const newArray = arr.filter(([currentValue], [arrayIndex], [arr]) => {
     // [specified condition]
   });

   or

   const newArray = arr.filter(callback([currentValue], [arrayIndex], [arr]));

На левой стороне задания результат оператора фильтра хранится в новой переменной. Его можно объявить с помощью Const или позвольте.

[CurrentValue]: Это текущий элемент в массиве, который обрабатывается. После процессии текущее значение становится значением следующего элемента в массиве.

[ArrayIndex]: Это индекс текущего значения в массиве. Это также изменения после обработки текущего значения.

[ ARR]: Это массив, который является итерацией.

[Перезвоните]: Это в основном функция должна выполняться на каждом элементе массива, если функция возвращает true, то элемент добавляется в новый массив, иначе он пропускается. Он принимает первые три предмета (CurrentValue, Index и Array) в качестве аргументов. Мы можем объявить функцию обратного вызова, прежде чем использовать ее, как это:

  const numbersArray = [1 ,2, 3, 4, 5, 6, 7, 8, 9, 10];
  const isEvenNumber = num => num%2 === 0

  // using a callback function
  const evenNumbersArray = numbersArray.filter(isEvenNumber);

  console.log(evenNumbersArray) // [2, 4, 6, 8, 10]

Некоторые примеры фильтра () в действии.

  1. Давайте фильтроваем массив, чтобы получить все игроки Барселоны
const players = [
  { name: "messi", club: "Barcelona"},
  { name: "Ronaldo", club: "Juventus"},
  { name: "Kante", club: "Chelsea"},
  { name: "De Jong", club: "Barcelona"},
  { name: "Semedo", club: "Barcelona"},
  { name: "Eriksen", club: "Totenham"},
  { name: "Pogba", club: "Man utd"},
  { name: "Alba", club: "Barcelona"},
  { name: "Dembele", club: "Barcelona"},
]

const barcaPlayers = players.filter(player => player.club === "Barcelona");
console.log(barcaPlayers);

//[
//  { name: "messi", club: "Barcelona"},
//  { name: "De Jong", club: "Barcelona"},
//  { name: "Semedo", club: "Barcelona"},
//  { name: "Alba", club: "Barcelona"},
//  { name: "Dembele", club: "Barcelona"},
//]

Заключение

Array.filter () отлично, когда вы хотите буквально отфильтровать вещи из массива. Это не мутирует оригинальный массив.

Quick Quiz: Чувствовать до этого? Попробуйте это и отбросьте свои ответы на раздел комментариев.

// Return an array of only prime numbers from the given array
const numbersArray = [1, 2, 3, 4, 5, 6, 7, 8, 11, 15, 17, 23, 24, 25, 29, 30];

// Return an array of all words that begin with a vowel in the given array
const randomWords = ["Nedy", "Adesoji", "Akaniru", "Umbrella", "Barcelona", "Xylophone"];

Есть какие-либо другие случаи для использования Фильтр функция? Пожалуйста, хорошо, чтобы поделиться им в разделе «Комментарий».

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

Вот ссылка на другие статьи на этом серии массива, написанные мной:

  • Что такое массив?
  • Альтернативные способы создания массива.
  • Свойства массива
  • Часть петель итерации массива I
  • Петли массива и итерация Часть II II
  • Петли массива и итерация часть III

Есть какие-либо вопросы, добавление или коррекция? Пожалуйста, оставьте комментарий.

Спасибо за чтение. 👍.

Оригинал: “https://dev.to/nedyudombat/understanding-javascript-array-series-vii-array-loops-iteration-part-iv-3nb8”

Читайте ещё по теме: