Изучите комбинирование или изменение методов массива в JavaScript

1. Что такое Ченнинг ??

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

  • Рассмотрим следующие данные:
    const годы = [1989, 2015, 2000, 1999, 2013, 1973, 2012];
  • Используя методы filter и map в массиве лет, мы создаем массив отображаемых строк для каждого года в 21 веке (помните: 21 век начинается с 2001 года). Каждая строка дисплея должна быть годом, за которым следует A.D.

displayYears = years.filter (num = ›num› = 2001) .map (num = ›num +« A.D »);
console.log (displayYears);

  • Метод фильтрации будет использовать только годы 21 века, а метод Map
    добавит н.э. в конце года.

вывод:

[“A.D.2015”, “A.D.2013”, “A.D.2012”]

2. Объекты в массиве

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

  • Рассмотрим следующие данные:
    c onst авторы = [
    {firstName: «Беатрикс», lastName: «Potter»},
    {firstName: «Ann», lastName: «Martin» ”},
    {firstName:« Беверли », lastName:« Cleary »},
    {firstName:« Roald », lastName:« Dahl »},
    {firstName:« Lewis », lastName: «Кэрролл»}
    ];
  • Используя метод map для массива авторов, мы создаем массив строк с полным именем, состоящий из первого имени, затем пробела и затем фамилии. Мы сохраним новый массив в переменной fullAuthorNames.

let fullAuthorNames;

fullAuthorNames = sources.map (auth = ›auth.firstName +« «+ auth.lastName);

Вывод:
[«Беатрикс Поттер», «Энн Мартин», «Беверли Клири», «Роальд Даль», «Льюис Кэрролл»]

3. Объединение filter () или map ()

  • Рассмотрим следующие данные:
    const todos = [
    {
    todo: 'Buy apples',
    done: false
    },
    {
    задача: «Помыть машину»,
    done: true
    },
    {
    todo: «Написать веб-приложение»,
    done: false
    },
    {
    todo: 'Читать MDN-страницу в массивах JavaScript',
    done: true
    },
    {
    todo: 'Call мама ',
    готово: false
    }
    ];
  • Используя методы filter и map в массиве задач, мы создаем массив строк незавершенных задач.
  • filter () удалит все завершенные задачи из массива.
  • Метод map () вернет список задач всех массивов и сохранит его в массиве незавершенных задач.

пусть незавершенные задачи;

undefinishedTasks = todos.filter (num = ›num.done === false) .map (num =› num.todo);

Вывод:
[«Купите яблоки», «Напишите веб-приложение», «Позвоните маме»]

4. Объединение filter () и reduce ()

  • Рассмотрим следующие данные:
    const PurchaItems = [
    {
    name: 'apples',
    dept: 'groceries',
    price: 2.49
    },
    {
    name: 'хлеб',
    отдел: 'бакалея',
    цена: 2,99
    },
    {
    название: 'батарейки',
    отдел: 'электроника',
    цена: 5.80
    },
    {
    название: 'яйца',
    отдел : 'бакалея',
    цена: 3,99
    },
    {
    name: 'футболки',
    отдел: 'одежда',
    цена : 9.99
    }
    ];
  • Используя методы filter () и reduce () в массиве PurchaseItems, добавьте общую стоимость всех продуктов (товары с отделом бакалеи). Сохраните общую цену в переменной groceryTotal.
  • Метод filter () удалит все элементы, не относящиеся к продуктовому отделу.
  • Метод reduce () суммирует общую стоимость продукта, вернет и сохранит значение в переменной groceryTotal.

let groceryTotal;

groceryTotal = PurchaseItems.filter (n = ›n.dept === 'бакалея'). reduce ((sum, n) =› sum + n.price, 0);
console.log (groceryTotal );

Вывод:

Мы видели основные методы массива ченнинга в JavaScript. Цепочка - это шаблон для вызова / вызова методов в функциональной программирование.
Спасибо за чтение🙂.

Если этот пост был полезен, пожалуйста, нажмите кнопку «хлопать» несколько раз, чтобы выразить свою поддержку!