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

Методы — это имена свойств, которые мы можем присвоить функциям. Их можно вызвать в любое время, просто используя имя для выполнения функции. У объектов-массивов также есть методы и свойства, которые позволяют нам изменять или запрашивать их в объекте.

В JavaScript методы массивов упрощают управление и организацию данных удобным способом. Сегодня мы рассмотрим два популярных метода массива: map() и reduce. Эти методы предоставляют модифицированную версию массива и делают массивы еще более удобными.

Обновление массивов JavaScript

При создании переменных в JavaScript может быть сложно получить доступ к диапазону значений. Точно так же создание объектов требует, чтобы вы создали ключевые имена для всех данных, что может привести к беспорядку. Массивы — это решение. Эта структура данных управляет упорядоченными данными в одном интерфейсе.

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

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

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

var fruit = [
  "Orange",
  "Apple",
  "Banana"
];

У массивов в JavaScript есть специальные функции, которые делают их особенно полезными, в том числе:

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

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

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

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

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

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

Методы массива помогают сделать ваши программы более удобными и полезными. Далее мы рассмотрим два уникальных метода массива JavaScript, которые делают массивы еще более удобными: map()и reduce.

map()Метод JavaScript

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

Синтаксис метода следующий:

array.map(function(currentValue, index, arr), thisValue)

map() Метод принимает два параметра:

• function(currentValue, index, arr): Это обязательный параметр, который выполняется для каждого элемента массива. Он содержит три параметра: currentValue, indexи arr.
• thisValue: Этот параметр необязательный. Он содержит значение, переданное функции.

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

function callbackfn(value: any, index: number, array: any[])

Для каждого элемента callbackfnбудет передано значение элемента в качестве первого аргумента, за которым следует индекс элемента в качестве второго аргумента. Наконец, сам массив в качестве третьего аргумента. Эта callbackfnфункция принимает от 0 до 3 аргументов.

Наконец, callbackfnметод карты вернет новый массив со всеми значениями, возвращаемыми функцией. Посмотрите на пример ниже.

var arr = [10, 20, 30, 40, 50]; // initialise an array and assign to arr

var arr1 = arr.map(a => a * 2); // double the element in the array

console.log(«arr:»,arr); // print original array

console.log(«doubled array:»,arr1); // print doubled array

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

map() примеры и использование

В map()вашем коде JavaScript много вариантов использования. Давайте разберем самые распространенные.

Общее использование map()

Ниже в нашем коде показано, как использовать этот метод в a Stringдля создания массива байтов в кодировке ASCII.

let map = Array.prototype.map

let a = map.call(‘Hello World’, function(x) {

  return x.charCodeAt(0)

})

Сопоставление массива чисел с массивом их квадратных корней

Ниже наш код берет массив чисел и создает новый массив с квадратными корнями из каждого числа.

let numbers = [3, 25, 100]

let roots = numbers.map(function(num) {

    return Math.sqrt(num)

})

Отображение массива чисел с функцией, содержащей аргумент

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

let numbers = [3, 25, 100]

let doubles = numbers.map(function(num) {

  return num * 2

})

Примечание. Поскольку map()создается новый массив, вам не следует использовать этот метод, если:

• Вы не используете возвращаемый массив
• Вы не возвращаете никакого значения из обратного вызова

Метод reduce JavaScript

reduceМетод уменьшает массив к единственному значению слева направо. Этот метод оставляет исходный массив неизменным.

Синтаксис метода следующий:

arr.reduce(<function>);

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

function callbackfn(prev: any, curr: any, index: number, array: number[])

Для каждого элемента callbackfnбудет передано callbackfnвозвращаемое значение предыдущей функции в качестве первого аргумента и значение элемента в качестве второго аргумента.

За ним следует индекс элемента в качестве третьего аргумента. Наконец, сам массив принимается как четвертый аргумент.

callbackfnФункция возвращает значение, переданное на callbackfnфункцию для следующего элемента. Если в массиве есть только одно значение, возвращается это значение. Для пустого массива выдается ошибка.

Давайте узнаем больше reduceна примере ниже.

var arr = [10, 20, 30, 40, 50]; // initialise an array and assign to arr

var val = arr.reduce((prev, curr) => prev + curr); // reduce element to sum

console.log(«arr:»,arr); // print original array

console.log(«reduced val:»,val); // print element returned by reduce

Здесь мы видим, что стрелочная функция принимает предыдущее значение prevи добавляет его к значению, повторяемому в массиве curr. Метод reduce суммирует весь массив.

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

reduce примеры и использование

В reduceвашем коде JavaScript много вариантов использования. Давайте разберем самые распространенные.

Суммируйте значения массива

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

let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {

  return accumulator + currentValue

}, 0)

Сглаживание массива массивов

let flattened = [[0, 1], [2, 3], [4, 5]].reduce(

  function(accumulator, currentValue) {

    return accumulator.concat(currentValue)

  },

  []

)

Группировать объекты по свойству

let people = [

  { name: ‘Matt’, age: 25 },

  { name: ‘Asma’, age: 23 },

  { name: ‘Cami’, age: 29 }

];

function groupBy(objectArray, property) {

  return objectArray.reduce(function (acc, obj) {

    let key = obj[property]

    if (!acc[key]) {

      acc[key] = []

    }

    acc[key].push(obj)

    return acc

  }, {})

}

let groupedPeople = groupBy(people, ‘age’)

Используя reduceи map() вместе

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

Сопоставьте массив с массивом нулей и единиц.
Сократить массив нулей и единиц в сумму.

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

var arr = [‘Hello’, 1, true, NaN, ‘Bye’]; // initialise an array of elements

var countArr = arr.map(ele => typeof ele === ‘string’ ? 1 : 0); // map to 0 and 1

var sum = countArr.reduce((prev, curr)=> prev + curr); // reduce for sum

console.log(«arr:»,arr); // print original array

console.log(«array from map:», countArr); // print array returned from map method

console.log(«number of Strings:»,sum); // print number of strings

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

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