Метод TypeScript filter() создание нового массива с элементами, проходящими тестирование,

Содержание материала:

Как фильтровать массив с помощью TypeScript в Angular 2?

ng-2 наследование родительских данных для ребенка было для меня трудностью.

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

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

TypeScript для меня новичок, но я думаю, что я близок к тому, что все это работает.

(Также может быть заменой исходного массива книг, затем с помощью *ngFor=»#book of books» .)

ИЗМЕНИТЬ Подходите ближе, но все же давайте ошибку.

Вам нужно поместить свой код в ngOnInit и использовать ключевое слово this :

Вам нужно ngOnInit , потому что вход store не будет установлен в конструктор:

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

В вашем коде фильтрация книг напрямую определяется в содержимом класса.

Перебирающие методы массива

Перебирающие методы массива взаимодействуют с каждым элементом массива.

Array.forEach()

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

Обратите внимание, что функция обратного вызова принимает 3 параметра:

  • Значение элемента (value)
  • Индекс элемента (index)
  • Сам массив (array)

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

Метод Array.forEach() поддерживается всеми браузерами за исключением Internet Explorer 8 и более ранних версий.

Array.map()

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

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

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

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

Функция обратного вызова принимает 3 параметра:

  • Значение элемента (value)
  • Индекс элемента (index)
  • Сам массив (array)

Если в функции обратного вызова используется только первый параметр value, то параметры index и array могут быть опущены:

Метод Array.map() поддерживается всеми браузерами за исключением Internet Explorer 8 и более ранних версий.

Array.filter()

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

В следующем примере создается новый массив из элементов исходного массива значения, которых больше 18:

Функция обратного вызова принимает 3 параметра:

  • Значение элемента (value)
  • Индекс элемента (index)
  • Сам массив (array)

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

Метод Array.filter() поддерживается всеми браузерами за исключением Internet Explorer 8 и более ранних версий.

Array.reduce()/Array.reduceRight()

Метод reduce()/reduceRight() выполняет функцию обратного вызова с каждым элементом массива для вычисления единого значения (сведения к единому значению).

Метод reduce() обрабатывает элементы массива слева направо.

Метод reduceRight() обрабатывает элементы массива справа налево.

Метод reduce()/reduceRight() не затрагивает исходный массив.

В следующем примере вычисляется сумма всех чисел в массиве:

Обратите внимание, что функция обратного вызова принимает 4 параметра:

  • Начальное/ранее возвращенное значение (total)
  • Значение элемента (value)
  • Индекс элемента (index)
  • Сам массив (array)

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

Метод reduce()/reduceRight() может принимать начальное значение:

Метод Array.reduce()/Array.reduceRight() поддерживается всеми браузерами за исключением Internet Explorer 8 и более ранних версий.

Array.every()

Метод every() проверяет, выполняют заданное условие все элементы массива.

В следующем примере проверяется, больше ли 18 значения всех элементов массива:

Функция обратного вызова принимает 3 параметра:

  • Значение элемента (value)
  • Индекс элемента (index)
  • Сам массив (array)

Если функция обратного вызова использует только первый параметр (value), то другие параметры можно опустить:

Метод Array.every() поддерживается всеми браузерами за исключением Internet Explorer 8 и более ранних версий.

Array.some()

Метод some() проверяет, выполняет ли заданное условие хотя бы один элемент массива.

В следующем примере проверяется, есть ли в массиве хотя бы один элемент со значением больше 18:

Функция обратного вызова принимает 3 параметра:

  • Значение элемента (value)
  • Индекс элемента (index)
  • Сам массив (array)

Метод Array.some() поддерживается всеми браузерами за исключением Internet Explorer 8 и более ранних версий.

Array.indexOf()

Метод indexOf() ищет в массиве элемент с заданным значением и возвращает его индекс.

Внимание! Первый элемент будет иметь индекс 0, второй — 1 и т. д.

В следующем примере ищем элемент со значением «Apple»:

Метод Array.indexOf() поддерживается всеми браузерами за исключением Internet Explorer 8 и более ранних версий.

Синтаксис:

элемент Обязательный параметр. Элемент для поиска.
начало Необязательный параметр. Позиция для начала поиска. Если указано отрицательное значение, то поиск начнется с позиции, отсчитанной с конца массива, и продолжится до конца массива.

Если элемент не найден, то метод Array.indexOf() вернет -1.

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

Array.lastIndexOf()

Метод Array.lastIndexOf() аналогичен методу Array.indexOf(), но он начинает поиск с конца массива и ведет его к началу массива.

В следующем примере ищем элемент со значением «Apple»:

Метод Array.lastIndexOf() поддерживается всеми браузерами за исключением Internet Explorer 8 и более ранних версий.

Синтаксис:

элемент Обязательный параметр. Элемент для поиска.
начало Необязательный параметр. Позиция для начала поиска. Если указано отрицательное значение, то поиск начнется с позиции, отсчитанной с конца массива, и продолжится до начала массива.

Array.find()

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

В следующем примере происходит поиск (и возврат значения) первого элемента, значение которого больше 18:

Функция обратного вызова принимает 3 параметра:

  • Значение элемента (value)
  • Индекс элемента (index)
  • Сам массив (array)

Метод Array.find() не поддерживается в старых браузерах.

Array.findIndex()

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

В следующем примере возвращается индекс первого элемента, значение которого больше 18:

Функция обратного вызова принимает 3 параметра:

  • Значение элемента (value)
  • Индекс элемента (index)
  • Сам массив (array)

Перебирающие методы массивов изнутри

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

forEach

Самый простой способ разобраться, как работают функции высшего порядка, принимающие callback’и, — самостоятельно переписать несколько нативных методов. Начнём с самого простого метода Array.prototype.forEach . Метод массивов forEach принимает два аргумента: первый (обязательный) — callback функция, которая будет выполнена для каждого элемента массива один раз и второй (необязательный) — значение, которое будет использовано в качестве this при вызове функции callback . Работает это следующим образом:

В callback функцию передаётся три аргумента: item , соответствующий элементу массива, index , равный номеру элемента в массиве, и arr — ссылка на массив. Таким образом, справедливо следующее выражение arr[index] === item . Аргументам передаваемым в callback функцию можно давать разные названия в зависимости от контекста выполнения — выполнение callback функции от этого не изменится:

Как я писал выше, помимо callback функции метод forEach принимает ещё один аргумент — значение, которое будет использовано в качестве this при вызове функции callback . Зачем это может понадобиться? По умолчанию this не определён, то есть равен undefined . В некоторых ситуациях, особенно при работе с функциями конструкторами, необходимо задать контекст выполнения callback функции:

Подобный код, на первый взгляд, может оказаться полностью рабочим. Тем не менее, после его выполнения всё, что мы увидим будет ошибка Cannot read property ‘say’ of undefined . Данная ошибка показывает, что при выполнении метода forEach на передаваемом в метод mumble массиве phrases не задаётся контекст испольнения callback функции. Проще говоря, callback функция пытается выполнить подобный код undefined[say](words) . Решается данная проблема элементарно — передётся второй аргумент в метод forEach , который и указывает ему, что брать за this :

forEach своими руками

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

  1. Функция принимает три аргумента: массив, по которому будет происходить итерация, callback фунцию, которая будет выполнена для каждого элемента массива, и значение, которое будет использовано callback функцией в качестве this .
  2. callback функция, в свою очередь, также работает с тремя аргументами: текущий элемент массива, индекс элемента, ссылка на сам массив.
  3. Функция ничего не возвращает.

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

Функция each будет отлично работать, за исключением того, что не соблюдается часть первого правила — для callback функции нельзя задать контекст, то есть нельзя присвоить значение this :

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

Теперь функция each работает с массивами в точности так, как и метод forEach . Чтобы её протестировать, можно запустить её вместе с кодом из предыдущего примера.

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

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

Подобная конструкция может ввести в замешательство практически любого программиста, который раньше не использовал её сам. Подробное объяснение, как именно она работает можно найти в этом вопросе на Stackoverflow. Нужна она лишь для того, чтобы провести итерацию по всем элементам выбранной DOM коллекции и выполнить callback функцию для каждого из них. При использовании написанной нами функции each надобности в такой хитрой конструкции нет, так как она поддерживает работу не только с массивами, но и с любыми коллекциями, в том числе и коллекциями DOM элементов:

Когда появится широкая поддежка ES6 метод forEach можно будет использовать с DOM коллекциями более простым способом с помощью оператора Spread:

Метод массивов map похож по своей функциональности на forEach , но результат выполнения callback функции добавляется в новый массив, который возвращается после последней итерации. Другими словами, результатом метода map всегда является новый массив с результатами выполнения функции callback на исходном массиве.

Также, как и в случае с forEach map помимо callback функции принимает второй параметр, который позволяет задать контекст и явно указать this :

Как вы могли заметить, при использовании map и forEach всегда использовалась анонимная функция в качестве callback . Это совсем не обязательно. Вы можете объвить функцию, которую хотите использовать в качестве callback заранее, а затем просто передать её в качестве параметра.

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

Передвая callback функцию подобным образом вы не теряете возможность явно указать this . Таким образом, метод grabPhrases из функции конструктора Person также можно немного сократить:

В отличие от forEach при использовании map вам становится доступен chaining. Это значит, что вы можете последовательно применить метод на возвращенный после map массив.

map своими руками

Как и при создании аналога forEach напишем небольшие правила, которыми будем руководствоваться при создании функции map :

  1. Функция возвращает новый массив, оставляя исходный без изменений.
  2. Всё, что возвращает callback функция добавляется в новый массив.
  3. Функция принимает три аргумента: массив, по которому будет происходить итерация, callback фунцию, которая будет выполнена для каждого элемента массива, и значение, которое будет использовано callback функцией в качестве this .
  4. callback функция, в свою очередь, также работает с тремя аргументами: текущий элемент массива, индекс элемента, ссылка на сам массив.

Правил стало больше, но последними двумя мы уже пользовались при создании функции each , а, значит, вы уже знаете, как с ними справиться.

Менять исходный массив нельзя, поэтому нужно создать новый массив в самом начале выполнения функции map . Назовём его results . В созданный нами массив results при кажом выполнении будем добавлять результат выполнения функции callback с помощью метода push . После завершения последней итерации всё, что остаётся сделать — вернуть массив results .

Топ-пост этого месяца:  Как добавить ссылку в прямую трансляцию в ВК и как они работают

Написанная нами функция map работает точно так же, как и метод массивов map , но, как и each , может принимать в качестве аргументов любый другие коллекции.

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

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

Тем не менее, map отлично подходит для получения данных из DOM коллекций. Например, получение всех href атрибутов будет выглядеть следующим образом:

filter

Метод filter , как и следует из названия, служит для фильтрации массива по правилам, заданным в callback функции. Так же, как в случае с map создаётся новый массив, куда добавляются все элементы прошедшие провеку колбэком.

При использовании метода filter результатом выполнения может быть любое значение, но данные из исходного массива будут добавлены только в том случае, если значение является правдивым. Напомню, что правдивыми значениями являются все, кроме:

  1. пустой строки »
  2. числа ноль 0
  3. false
  4. undefined
  5. null

Тем не менее, пользоваться подобным способом фильтрации массива не стоит в силу его неочевидности. Поэтому рекомендуется создавать callback функцию таким образом, чтобы она всегда возвращала либо true , либо false .

Немного более сложный пример использования метода filter . Допустим, что мы получаем JSON файл с сервера с подобным содержимым:

После получения данных (с помощью AJAX или JSONP, например) мы хотим их отфильтровать, узнав из свойства isCustomer , является ли данных человек нашим клиентом или нет. Вот здесь и пригодится метод filter :

Или же можно руководствоваться немного другим, более сложным принципом при выборе цели. Например, мы решили, что если email клиента не начинается с буквы j , то он определённо нам не подходит.

filter своими руками

Как и для прошлых функций map и forEach напишем небольшой свод правил:

  1. Функция возвращает новый массив, оставляя исходный без изменений.
  2. Данные исходного массива передаются в callback функцию. Результат выполнения callback функции решает будет ли добавлен данный элемент в новый массив.
  3. Функция принимает три аргумента: массив, по которому будет происходить итерация, callback фунцию, которая будет выполнена для каждого элемента массива, и значение, которое будет использовано callback функцией в качестве this .
  4. callback функция, в свою очередь, также работает с тремя аргументами: текущий элемент массива, индекс элемента, ссылка на сам массив.

С помощью всё того же метода функций call мы вызываем callback функцию, но на этот раз всё, что нас будет интересовать — вернула ли функция правдивое значение. Если результат содержит правдивое значение, то данные будут добавлены в массив, если же нет, то просто проигнорированы.

Удостоверимся, что функция filter работает, как мы её и задумывали:

Небольшой хак: чтобы отфильтровать все ложные значения из массива можно воспользоваться конструктором Boolean :

some и every

Методы some и every во многом похожи друг на друга. Оба метода возвращают true или false . some возвращает true тогда, когда хотя бы один элемент массива отвечает переданным в callback функцию условиям. every вернёт true , когда все элементы массива отвечают данным условиям. Звучит грозно, но, на самом деле всё очень просто.

Методы some и every очень удобно использовать вместе с методом filter для вложенных массивов. Чтобы понять, как это работает, опять представим, что мы получили данные с сервера в виде JSON файла, который содержит массив объектов (наших покупателей). У каждого покупателя есть свойство purchases , которое представляет собой список приобретённых покупателем товаров в нашем магазине ранее.

Чтобы понять, какие клиенты нам принесли больше всего прибыли, мы хотим их отфильтровать и посмотреть, кто из них покупал у нас технику от Apple (iPhone, Macbook или iMac). Метод some поможет сделать это с помощью всего нескольких строк кода.

some и every своими руками
  1. Функция возвращает только true или false
  2. Каждое значение передаётся в callback функцию и на результате её выполнения для всех элементов массива решается, какой будет результат.
  3. Функция принимает три аргумента: массив, по которому будет происходить итерация, callback фунцию, которая будет выполнена для каждого элемента массива, и значение, которое будет использовано callback функцией в качестве this .
  4. callback функция, в свою очередь, также работает с тремя аргументами: текущий элемент массива, индекс элемента, ссылка на сам массив.

Функция some при каждой итерации проверяет, является ли результат выполнения callback функции правдивым. Если она находит хотя бы один правдивый результат, то прерывает своё выполнение и сразу возвращает true .

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

Функции every и some работают идентично соответствующим им методам и будут давать одинаковые резутаты. Тем не менее, написанные нами функции работают лучше нативных методов. Почему? Используя методы массивов some и every вы подразумеваете, что callback функция будет выполнена для всех элементов без исключения. Но, может оказаться так, что первый элемент в массиве уже содержит нужные нам данные и итерация по всем остальным будет абсолютно бесполезной. В написанных нами функциях таких итераций не будет — когда будет найдено искомое значение функция сразу же прекратит своё выполнение. Подобный подход может дать достаточно ощутимый прирост производительности при работе с большими объемами данных, например, с JSON файлами содержащими несколько тысяч объектов.

reduce

callback функция всех рассмотренных выше методов массивов работает с одинаковым набором данных: значением, индексом и массивом. Метод reduce не такой, как все. Принцип его работы немного отличается от всех остальных методов. Начнём сразу с примера:

Метод reduce принимает два аргумента callback функцию и начальное значение, которое будет присвоено аргументу result в примере выше при первой итерации. callback функция принимает целых 4 аргумента: промежуточное значение (аргумент result в примере выше), элемент массива, индекс элемента и сам массив. После каждой итерации в промежуточное значение записываются новые данные, которые берутся из результата выполнения функции callback при прошлой итерации:

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

Пример с многомерным массивом (начинаем с пустого массива):

reduce своими руками

Вы уже знаете — у нас есть правила:

  1. Функция принимает три аргумента: массив, callback функцию, начальное значение.
  2. После каждой итерации в промежуточное значение перезаписывается значением, полученным в результате выполнения callback функции. 3. callback функция принимает четыре аргумента: промежуточное значение, текущий элемент массива, индекс элемента, ссылка на сам массив.
  3. Явно указать значение this нельзя.

В нативном методе указывать значение this нельзя, поэтому вместо введения в функцию ещё одного аргумента thisArg мы просто передаём null в вызов функции.

Протестируем написанную нами функцию reduce на предыдущих примерах, чтобы убедиться, что всё работает, как мы и ожидаем.

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

Декоратор метода также представляет функцию, которая принимает три параметра:

Декоратор принимает следующие параметры:

Функция конструктора класса для статического метода, либо прототип класса для обычного метода.

Объект интерфейса PropertyDescriptor:

Этот объект описывает изменение декорируемого метода. Применяется при компиляции в ES5 и выше, при ES3 имеет значение undefined.

Его свойство value содержит определение функции. Свойство writable указывает, является ли функция модифицируемой (если значение true, то является).

Определим простейший декоратор для метода:

Декоратор readonly с помощью выражения descriptor.writable = false; устанавливает, что метод, к которому применяется данный декоратор, не может быть изменен.

В итоге после применения данного декоратора следующая инструкция

не имеет смысла и не будет работать. Однако если бы декоратор не применялся, то инструкция сработала бы.

Параметры и выходной результат метода

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

Декоратор log логгирует (выводит на консоль) значения параметров и возвращаемый результат метода. Свойство descriptor.value позволяет получить начальное значение метода — то есть ту функцию, которую представляет метод.

Затем происходит переустановка значения descriptor.value .

Параметр . args — это все те параметры, которые будут передаваться в функцию. И мы можем логгировать эти параметры. Далее выывается оригинальная функция, которой передаются параметры args:

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

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

Далее мы можем применить декоратор, например, к методу add класса Calculator и вызвать этот метод.

Декораторы параметров методов

Декоратор параметра метода представляет функцию, которая принимает три параметра:

Где первый параметр представляет конструктор класса, если метод статический, либо прототип класса, если метод нестатический. А второй параметр представляет имя параметра. И третий параметр представляет порядковый индекс параметра в списке параметров.

Определим декоратор для параметра метода:

Декоратор logParameter добавляет в прототип класса новое свойство metadataKey . Это свойство представляет массив, который содержит индексы декорированных параметров.

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

Array.prototype.filter()

На этой странице

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

Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

ES2015

Синтаксис

Параметры

Возвращаемое значение

Вернётся новый массив с элементами, которые проходят тест, то есть callback вернёт true . Если ни один элемент не пройдет тест, то будет возвращен пустой массив.

Описание

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

Функция callback вызывается с тремя аргументами:

  1. значение элемента;
  2. индекс элемента;
  3. массив, по которому осуществляется проход.

Если в метод filter() был передан параметр thisArg , при вызове callback он будет использоваться в качестве значения this . В противном случае, в качестве значения this будет использоваться значение undefined . В конечном итоге, значение this , наблюдаемое из функции callback , определяется согласно обычным правилам определения this , видимого из функции.

Метод filter() не изменяет массив, для которого он был вызван.

Диапазон элементов, обрабатываемых методом filter() , устанавливается до первого вызова функции callback . Элементы, добавленные в массив после начала выполнения метода filter() , не будут посещены функцией callback . Если существующие элементы массива изменятся, значения, переданные в функцию callback , будут значениями на тот момент времени когда метод filter() посетит их; удалённые элементы посещены не будут.

Примеры

Пример: отфильтровывание всех маленьких значений

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

Пример: фильтрация неверных записей в JSON

В следующем примере метод filter() используется для создания отфильтрованного объекта JSON, все элементы которого содержат ненулевое числовое поле id .

Поиск в массиве

В следующем примере filter() используется для фильтрации содержимого массива на основе входных данных

JavaScript – Массивы. Метод filter

Описание

Синтаксис

Его синтаксис выглядит следующим образом:

Детали параметров

  • callback – функция для проверки каждого элемента массива.
  • thisObject – объект для использования в качестве this при выполнении обратного вызова.

Возвращаемое значение

Возвращает созданный массив.

Совместимость

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

Пример

Попробуйте следующий пример.

Вывод

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Расширенное руководство по TypeScript

Как создаются функции, зачем нужны классы, почему важны интерфейсы и как работают стрелочные функции ECMAScript 6

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

Функции

Функции — универсальные строительные блоки внутри класса, содержащие некоторую бизнес-логику. Процесс создания функции в TypeScript похож на существующий в JavaScript: используется ключевое слово function. Однако в TypeScript есть возможность определить тип параметров и тип возвращаемого функцией значения. В листинге 1 показана простейшая реализация функции в TypeScript. В приведенном примере была создана функция с именем getProductCode, принимающая единственный параметр строкового типа. Текст: string перед символом фигурной скобки указывает, что эта функция возвращает строку. Если вы не хотите возвращать никаких значений, можно просто указать void вместо string.

Топ-пост этого месяца:  Как добиться правильного чпу

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

Использование необязательных параметров и параметров по умолчанию

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

В приведенном в листинге 2 программном коде видно, что productType присвоено значение 1, а к productCode добавлен символ вопросительного знака. Здесь productType — параметр по умолчанию, а productCode — необязательный параметр. Если нужно вызвать данную функцию, TypeScript позволяет сделать это без значения параметра, присвоенного productCode. Поскольку значение для параметра productType не передано при вызове функции, TypeScript передает значение по умолчанию 1 в соответствии с логикой обработки.

Параметры REST

В ECMAScript 6 появились параметры REST. Они позволяют передать несколько аргументов функции. Однако необходимо выполнить несколько условий: чтобы создать параметр REST, добавьте три точки перед именем параметра. Параметр REST должен всегда быть последним в списке параметров и всегда должен быть массивом нужного вам типа. Параметры REST необязательные, то есть программный код будет работать, даже если им не переданы никакие значения. В листинге 3 приводится простой пример реализации параметра REST в функции.

Стрелочные функции

Если вы знакомы с языком C#, то, вероятно, слышали о лямбда-выражениях. В TypeScript похожий синтаксис используется для стрелочных функций. Благодаря стрелочным функциям вводить слово function при создании функции не требуется.

В листинге 4 приводится пример создания и использования стрелочных функций, обозначаемых лямбда-символом (=>).

Классы

Классы представляют собой схемы, определяющие форму и структуру объекта. Класс в TypeScript может содержать любое число свойств, функций, методов получения и задания; создать их чрезвычайно просто. С помощью классов можно выполнять инкапсуляцию, назначая различные модификаторы доступа (открытый, закрытый и защищенный в приведенном в листинге 5 программном коде). В листинге 5 показан пример класса с некоторыми свойствами (с различными модификаторами доступа), функциями и конструктором.

С помощью модификаторов доступа можно ограничить доступ к определенным свойствам и функциям. Открытые элементы доступны и вне этого класса. Закрытые элементы вне класса недоступны. Функционирование защищенных элементов — такое же, как у закрытых, с одним исключением: любой класс, производный от данного класса, может обращаться к защищенным элементам.

Методы доступа

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

В приведенных примерах демонстрируется, как создать классы и определить конструкторы, свойства и функции. Эти элементы называются экземплярными, потому что они доступны лишь в случае, если создан экземпляр класса. На приведенном в листинге 6 obj — экземпляр класса Products; этот экземпляр используется для доступа к внутренним элементам.

Статические элементы

TypeScript поддерживает и статические элементы; к любому элементу, объявленному как статический, можно обращаться напрямую с использованием самого класса. Создавать экземпляр (как obj в приведенном в листинге 6 примере) для доступа к статическим элементам необходимости нет. Рассмотрим небольшой пример, приведенный в листинге 7.

Если взглянуть на транскомпилированный программный код из примера в листинге 7, то можно заметить, что общедоступная функция getProductType доступна через пример прототипа, тогда как статический метод доступен напрямую на классе Products (листинг 8).

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

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

Абстрактные классы

Абстрактные классы похожи на любой другой обычный класс в TypeScript. Их элементы могут иметь реализацию или не иметь ее. Чтобы отметить класс или его элементы как абстрактные, используйте ключевое слово abstract. Главное различие между абстрактными и неабстрактными классами в том, что TypeScript не позволяет создать экземпляр абстрактного класса, поэтому обычно они используются как базовые классы для других классов. На приведенном в листинге 9 примере показано, что, если попытаться создать экземпляр абстрактного класса Discount, TypeScript сообщает об ошибке.

Абстрактный класс может содержать как абстрактные, так и неабстрактные элементы. Абстрактные элементы должны быть определены без деталей реализации, а неабстрактные элементы могут иметь их (листинг 10).

Интерфейсы

Концепция интерфейсов зародилась в Java и C#. Интерфейсы похожи на контракты, определяющие, что находится внутри объекта. Любой класс, который реализует интерфейс, должен соответствовать контракту и предоставлять реализацию. TypeScript немедленно выдает сообщение об ошибке, если класс не соответствует контракту.

Создать интерфейс в TypeScript чрезвычайно просто. Типичный пример интерфейса TypeScript показан в листинге 11.

В приведенном примере созданы интерфейс с некоторыми свойствами и функция с именем generateCode(), которая принимает число как параметр и возвращает число. Любой класс, который реализует этот интерфейс, должен обеспечить реализацию для всех элементов интерфейса. В листинге 12 показан пример класса ElectronicProducts, который реализует интерфейс Iproducts, но не включает свойство productType.

В редакторе кода (лис­тинг 13) Type­Script немедленно выдает ошибку, так как свойство productType не реализовано классом. Этот пример показывает, что необходимо всегда реализовывать все элементы интерфейса; в противном случае возникает ошибка во время компиляции.

Концепция интерфейсов — внутренняя для TypeScript. Когда приведенный в листинге 13 код транскомпилируется в JavaScript, весь код интерфейса и связанный с классами удаляется и остается код прототипа JavaScript. В листинге 14 показан сформированный файл JavaScript.

Элементы только для чтения и необязательные элементы интерфейсов

Продолжим рассмотрение приведенного выше примера. Есть ситуации, когда код скидки не обязателен для всех типов продуктов и нет необходимости изменять код продукта извне. В таких случаях следует отметить свойство кода как readonly (только для чтения) и сделать функцию generateDiscountCode необязательной, как в приведенном в листинге 15 примере.

Обратите внимание на ключевое слово readonly, добавленное перед свойством code. Чтобы сделать функцию необязательной, к концу имени функции добавлен вопросительный знак. Если какой-нибудь класс пытается реализовать этот интерфейс, не обязательно реализовывать функцию generateDiscountCode. Аналогично присвоение значения свойству code приводит к ошибке. В листинге 16 показаны два примера классов, реализующих этот интерфейс.

Во втором из приведенных в листинге 16 примеров класс Furnitures не имеет реализации для функции generateDiscountCode(), но код TypeScript по-прежнему будет работать. Аналогично, если попытаться создать экземпляр любого из этих двух классов и присвоить какое-то значение свойству code, как в примере в листинге 17, TypeScript немедленно выдаст ошибку.

Расширение интерфейсов

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

Обратите внимание, как интерфейс IProducts расширяет интерфейсы ISpecialDiscounts и IbasicDiscounts с использованием ключевого слова extends. Любой класс, который реализует интерфейс IProducts, должен иметь реализацию для функций в интерфейсах, связанных со скидками (потому что они не отмечены как необязательные). Реализация этого интерфейса выглядит так, как показано в листинге 19.

В следующей части руководства по TypeScript речь пойдет об универсальных шаблонах и пространствах имен.

JavaScript – Массивы. Метод filter

Описание

Синтаксис

Его синтаксис выглядит следующим образом:

Детали параметров

  • callback – функция для проверки каждого элемента массива.
  • thisObject – объект для использования в качестве this при выполнении обратного вызова.

Возвращаемое значение

Возвращает созданный массив.

Совместимость

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

Пример

Попробуйте следующий пример.

Вывод

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Перебирающие методы массивов изнутри

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

forEach

Самый простой способ разобраться, как работают функции высшего порядка, принимающие callback’и, — самостоятельно переписать несколько нативных методов. Начнём с самого простого метода Array.prototype.forEach . Метод массивов forEach принимает два аргумента: первый (обязательный) — callback функция, которая будет выполнена для каждого элемента массива один раз и второй (необязательный) — значение, которое будет использовано в качестве this при вызове функции callback . Работает это следующим образом:

В callback функцию передаётся три аргумента: item , соответствующий элементу массива, index , равный номеру элемента в массиве, и arr — ссылка на массив. Таким образом, справедливо следующее выражение arr[index] === item . Аргументам передаваемым в callback функцию можно давать разные названия в зависимости от контекста выполнения — выполнение callback функции от этого не изменится:

Как я писал выше, помимо callback функции метод forEach принимает ещё один аргумент — значение, которое будет использовано в качестве this при вызове функции callback . Зачем это может понадобиться? По умолчанию this не определён, то есть равен undefined . В некоторых ситуациях, особенно при работе с функциями конструкторами, необходимо задать контекст выполнения callback функции:

Подобный код, на первый взгляд, может оказаться полностью рабочим. Тем не менее, после его выполнения всё, что мы увидим будет ошибка Cannot read property ‘say’ of undefined . Данная ошибка показывает, что при выполнении метода forEach на передаваемом в метод mumble массиве phrases не задаётся контекст испольнения callback функции. Проще говоря, callback функция пытается выполнить подобный код undefined[say](words) . Решается данная проблема элементарно — передётся второй аргумент в метод forEach , который и указывает ему, что брать за this :

forEach своими руками

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

  1. Функция принимает три аргумента: массив, по которому будет происходить итерация, callback фунцию, которая будет выполнена для каждого элемента массива, и значение, которое будет использовано callback функцией в качестве this .
  2. callback функция, в свою очередь, также работает с тремя аргументами: текущий элемент массива, индекс элемента, ссылка на сам массив.
  3. Функция ничего не возвращает.

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

Функция each будет отлично работать, за исключением того, что не соблюдается часть первого правила — для callback функции нельзя задать контекст, то есть нельзя присвоить значение this :

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

Теперь функция each работает с массивами в точности так, как и метод forEach . Чтобы её протестировать, можно запустить её вместе с кодом из предыдущего примера.

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

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

Подобная конструкция может ввести в замешательство практически любого программиста, который раньше не использовал её сам. Подробное объяснение, как именно она работает можно найти в этом вопросе на Stackoverflow. Нужна она лишь для того, чтобы провести итерацию по всем элементам выбранной DOM коллекции и выполнить callback функцию для каждого из них. При использовании написанной нами функции each надобности в такой хитрой конструкции нет, так как она поддерживает работу не только с массивами, но и с любыми коллекциями, в том числе и коллекциями DOM элементов:

Когда появится широкая поддежка ES6 метод forEach можно будет использовать с DOM коллекциями более простым способом с помощью оператора Spread:

Метод массивов map похож по своей функциональности на forEach , но результат выполнения callback функции добавляется в новый массив, который возвращается после последней итерации. Другими словами, результатом метода map всегда является новый массив с результатами выполнения функции callback на исходном массиве.

Также, как и в случае с forEach map помимо callback функции принимает второй параметр, который позволяет задать контекст и явно указать this :

Как вы могли заметить, при использовании map и forEach всегда использовалась анонимная функция в качестве callback . Это совсем не обязательно. Вы можете объвить функцию, которую хотите использовать в качестве callback заранее, а затем просто передать её в качестве параметра.

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

Передвая callback функцию подобным образом вы не теряете возможность явно указать this . Таким образом, метод grabPhrases из функции конструктора Person также можно немного сократить:

В отличие от forEach при использовании map вам становится доступен chaining. Это значит, что вы можете последовательно применить метод на возвращенный после map массив.

map своими руками

Как и при создании аналога forEach напишем небольшие правила, которыми будем руководствоваться при создании функции map :

  1. Функция возвращает новый массив, оставляя исходный без изменений.
  2. Всё, что возвращает callback функция добавляется в новый массив.
  3. Функция принимает три аргумента: массив, по которому будет происходить итерация, callback фунцию, которая будет выполнена для каждого элемента массива, и значение, которое будет использовано callback функцией в качестве this .
  4. callback функция, в свою очередь, также работает с тремя аргументами: текущий элемент массива, индекс элемента, ссылка на сам массив.
Топ-пост этого месяца:  Почему адаптивный шаблон сайта на html5 сегодня нужен всем

Правил стало больше, но последними двумя мы уже пользовались при создании функции each , а, значит, вы уже знаете, как с ними справиться.

Менять исходный массив нельзя, поэтому нужно создать новый массив в самом начале выполнения функции map . Назовём его results . В созданный нами массив results при кажом выполнении будем добавлять результат выполнения функции callback с помощью метода push . После завершения последней итерации всё, что остаётся сделать — вернуть массив results .

Написанная нами функция map работает точно так же, как и метод массивов map , но, как и each , может принимать в качестве аргументов любый другие коллекции.

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

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

Тем не менее, map отлично подходит для получения данных из DOM коллекций. Например, получение всех href атрибутов будет выглядеть следующим образом:

filter

Метод filter , как и следует из названия, служит для фильтрации массива по правилам, заданным в callback функции. Так же, как в случае с map создаётся новый массив, куда добавляются все элементы прошедшие провеку колбэком.

При использовании метода filter результатом выполнения может быть любое значение, но данные из исходного массива будут добавлены только в том случае, если значение является правдивым. Напомню, что правдивыми значениями являются все, кроме:

  1. пустой строки »
  2. числа ноль 0
  3. false
  4. undefined
  5. null

Тем не менее, пользоваться подобным способом фильтрации массива не стоит в силу его неочевидности. Поэтому рекомендуется создавать callback функцию таким образом, чтобы она всегда возвращала либо true , либо false .

Немного более сложный пример использования метода filter . Допустим, что мы получаем JSON файл с сервера с подобным содержимым:

После получения данных (с помощью AJAX или JSONP, например) мы хотим их отфильтровать, узнав из свойства isCustomer , является ли данных человек нашим клиентом или нет. Вот здесь и пригодится метод filter :

Или же можно руководствоваться немного другим, более сложным принципом при выборе цели. Например, мы решили, что если email клиента не начинается с буквы j , то он определённо нам не подходит.

filter своими руками

Как и для прошлых функций map и forEach напишем небольшой свод правил:

  1. Функция возвращает новый массив, оставляя исходный без изменений.
  2. Данные исходного массива передаются в callback функцию. Результат выполнения callback функции решает будет ли добавлен данный элемент в новый массив.
  3. Функция принимает три аргумента: массив, по которому будет происходить итерация, callback фунцию, которая будет выполнена для каждого элемента массива, и значение, которое будет использовано callback функцией в качестве this .
  4. callback функция, в свою очередь, также работает с тремя аргументами: текущий элемент массива, индекс элемента, ссылка на сам массив.

С помощью всё того же метода функций call мы вызываем callback функцию, но на этот раз всё, что нас будет интересовать — вернула ли функция правдивое значение. Если результат содержит правдивое значение, то данные будут добавлены в массив, если же нет, то просто проигнорированы.

Удостоверимся, что функция filter работает, как мы её и задумывали:

Небольшой хак: чтобы отфильтровать все ложные значения из массива можно воспользоваться конструктором Boolean :

some и every

Методы some и every во многом похожи друг на друга. Оба метода возвращают true или false . some возвращает true тогда, когда хотя бы один элемент массива отвечает переданным в callback функцию условиям. every вернёт true , когда все элементы массива отвечают данным условиям. Звучит грозно, но, на самом деле всё очень просто.

Методы some и every очень удобно использовать вместе с методом filter для вложенных массивов. Чтобы понять, как это работает, опять представим, что мы получили данные с сервера в виде JSON файла, который содержит массив объектов (наших покупателей). У каждого покупателя есть свойство purchases , которое представляет собой список приобретённых покупателем товаров в нашем магазине ранее.

Чтобы понять, какие клиенты нам принесли больше всего прибыли, мы хотим их отфильтровать и посмотреть, кто из них покупал у нас технику от Apple (iPhone, Macbook или iMac). Метод some поможет сделать это с помощью всего нескольких строк кода.

some и every своими руками
  1. Функция возвращает только true или false
  2. Каждое значение передаётся в callback функцию и на результате её выполнения для всех элементов массива решается, какой будет результат.
  3. Функция принимает три аргумента: массив, по которому будет происходить итерация, callback фунцию, которая будет выполнена для каждого элемента массива, и значение, которое будет использовано callback функцией в качестве this .
  4. callback функция, в свою очередь, также работает с тремя аргументами: текущий элемент массива, индекс элемента, ссылка на сам массив.

Функция some при каждой итерации проверяет, является ли результат выполнения callback функции правдивым. Если она находит хотя бы один правдивый результат, то прерывает своё выполнение и сразу возвращает true .

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

Функции every и some работают идентично соответствующим им методам и будут давать одинаковые резутаты. Тем не менее, написанные нами функции работают лучше нативных методов. Почему? Используя методы массивов some и every вы подразумеваете, что callback функция будет выполнена для всех элементов без исключения. Но, может оказаться так, что первый элемент в массиве уже содержит нужные нам данные и итерация по всем остальным будет абсолютно бесполезной. В написанных нами функциях таких итераций не будет — когда будет найдено искомое значение функция сразу же прекратит своё выполнение. Подобный подход может дать достаточно ощутимый прирост производительности при работе с большими объемами данных, например, с JSON файлами содержащими несколько тысяч объектов.

reduce

callback функция всех рассмотренных выше методов массивов работает с одинаковым набором данных: значением, индексом и массивом. Метод reduce не такой, как все. Принцип его работы немного отличается от всех остальных методов. Начнём сразу с примера:

Метод reduce принимает два аргумента callback функцию и начальное значение, которое будет присвоено аргументу result в примере выше при первой итерации. callback функция принимает целых 4 аргумента: промежуточное значение (аргумент result в примере выше), элемент массива, индекс элемента и сам массив. После каждой итерации в промежуточное значение записываются новые данные, которые берутся из результата выполнения функции callback при прошлой итерации:

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

Пример с многомерным массивом (начинаем с пустого массива):

reduce своими руками

Вы уже знаете — у нас есть правила:

  1. Функция принимает три аргумента: массив, callback функцию, начальное значение.
  2. После каждой итерации в промежуточное значение перезаписывается значением, полученным в результате выполнения callback функции. 3. callback функция принимает четыре аргумента: промежуточное значение, текущий элемент массива, индекс элемента, ссылка на сам массив.
  3. Явно указать значение this нельзя.

В нативном методе указывать значение this нельзя, поэтому вместо введения в функцию ещё одного аргумента thisArg мы просто передаём null в вызов функции.

Протестируем написанную нами функцию reduce на предыдущих примерах, чтобы убедиться, что всё работает, как мы и ожидаем.

Повышаем скилы с помощью методов JavaScript за пару минут

Большинство приложений, которые мы создаем сегодня, требуют преобразования колекций данных. Обработка элементов в коллекции — это частая операция, с которой вы, скорее всего, столкнетесь. Забудьте обычный способ реализации цикла for через (const i; i .

Прим. Как верно подметили читатели, код с const вообще работать не будет. Вернее будет так — (let i=0; i

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

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

Имейте в виду: стрелочные функции и декларативные функции / выражения не являются эквивалентными и не могут быть заменены вслепую. Имейте в виду, что ключевое слово this работает по-разному.

Рассматриваемые методы:

  1. Оператор разворота
  2. for. of итератор
  3. includes()
  4. some()
  5. every()
  6. filter()
  7. map()
  8. reduce()

1. Оператор разворота

Оператор разворота расширяет массив своими элементами. Его также можно использовать для объектных литералов.

Почему стоит его использовать?

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

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

2. for…of итератор

for. of итерирует по коллекции, а также предоставляет вам возможность изменять определенные элементы. Он заменяет обычный способ реализации for-loop.

Почему стоит его использовать?

  • Это простой способ добавить или обновить элементы
  • Выполнить вычисления (суммирование, умножение и т. д.)
  • При использовании условных операторов (if, while, switch и т. Д.),
  • Приводит к чистому и удобочитаемому коду

Предположим, у вас есть панель инструментов, и вы хотите показать все инструменты внутри нее. for. of итератор делает это довольно просто.

3. Includes()

includes() метод используется чтобы проверить, существует ли конкретная строка в коллекции, и возвращает true или false . Имейте в виду, что он чувствителен к регистру: если элемент внутри коллекции — SCHOOL, а вы его ищете как school, метод вернет false.

Почему стоит его использовать?

  • Чтобы реализовать простую функциональность поиска
  • Это интуитивный подход, чтобы определить, находится ли строка в массиве
  • Он использует условные операторы для изменения, фильтрации и прочего
  • Приводит к удобочитаемому коду

Предположим по какой-то причине, что вы не знаете, какие автомобили у вас в гараже, и вам нужна система, чтобы проверить, есть ли автомобиль, который вам нужен, или нет. includes() в помощь!

4. Some()

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

Почему стоит его использовать?

  • Гарантирует, что некий элемент проходит тест
  • Он выполняет условные выражения, используя функции
  • Делает ваш код декларативным
  • some достаточно хорош

Предположим, что вы владелец клуба, и вам все равно, кто входит в клуб. Но некоторые люди не допускаются, потому что они пьют слишком много. Ознакомьтесь с различиями между ES5 и ES6 ниже:

5. Every()

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

Почему стоит его использовать?

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

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

6. Filter()

filter() создает новый массив со всеми элементами, которые проходят тест.

Почему стоит его использовать?

  • Таким образом вы можете избежать изменений основного массива
  • Он позволяет отфильтровать элементы, которые вам не нужны
  • Делает код более читаемым

Предположим, вы хотите вернуть только цены, которые больше или равны 30. Отфильтруйте другие цены .

7. Map()

map() аналогичен filter() с точки зрения возвращения нового массива. Однако единственная разница заключается в том, что он используется для изменения элементов.

Почему стоит его использовать?

  • Позволяет избежать внесения изменений в основной массив
  • Вы можете изменить нужные элементы
  • Делает код более читаемым

Предположим, у вас есть список продуктов с ценами. Вашему менеджеру нужен список, чтобы показывать новые цены после того, как они облагались налогом в 25%. map() может помочь вам.

8. Reduce() method

reduce() может быть использован для преобразования массива в нечто другое, например целое число, объект, цепочку Promise (последовательное выполнение Promise) и т.д. По практическим причинам, простым случаем использования будет суммирование списка целых чисел. Короче говоря, он «сводит» весь массив к одному значению.

Почему я должен использовать его?

  • Выполнить вычисления
  • Вычислить значение
  • Подсчитать количество дубликатов
  • Группировка объектов по параметрам
  • Последовательное выполнение Promises

Предположим, вы хотите узнать свои общие расходы в течение недели. Используйте, reduce() чтобы получить число.

Присоединяйтесь к нашим каналам FrontEndDev и Web Stack в Telegram, чтобы не пропустить самое интересное!

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