Учебник методов массива JavaScript - наиболее полезные методы, объясненные примерами

Автор оригинала: Yogesh Chavan.

Если вы разработчик JavaScript и хотите улучшить кодировку, то вам следует ознакомиться с наиболее часто используемыми методами массива ES5 и ES6 +.

Эти методы делают кодирование намного проще, а также сделать ваш код чистым и легко понять.

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

Метод Array.Foreach

Array.Foreach Метод имеет следующий синтаксис:

Array.forEach(callback(currentValue [, index [, array]])[, thisArg]);

foreach Способ выполняет представленную функцию один раз для каждого элемента в массиве.

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

const months = ['January', 'February', 'March', 'April'];

months.forEach(function(month) {
  console.log(month);
});

/* output

January
February
March
April

*/

Вот a Code Pen Demo Отказ

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

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

const months = ['January', 'February', 'March', 'April'];

for(let i = 0; i < months.length; i++) {
  console.log(months[i]);
}

/* output

January
February
March
April

*/

Вот a Code Pen Demo Отказ

То, что вы должны иметь в виду, это то, что foreach Метод не возвращает никакого значения.

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

const months = ['January', 'February', 'March', 'April'];
const returnedValue = months.forEach(function (month) {
  return month;
});

console.log('returnedValue: ', returnedValue); // undefined

Вот a Code Pen Demo Отказ

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

Индекс – индекс элемента, который в настоящее время является итерацией
массив – оригинальный массив, который мы переживаем

const months = ['January', 'February', 'March', 'April'];

months.forEach(function(month, index, array) {
  console.log(month, index, array);
});

/* output

January 0 ["January", "February", "March", "April"]
February 1 ["January", "February", "March", "April"]
March 2 ["January", "February", "March", "April"]
April 3 ["January", "February", "March", "April"]

*/

Вот a Code Pen Demo Отказ

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

Преимущества использования Foreach вместо A для петли

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

Поддержка браузера

Все современные браузеры и интернет-проводник (т. Е.) Версия 9 и выше
Microsoft Edge версия 12 и выше

Метод Array.map.

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

Array.map Метод имеет следующий синтаксис:

Array.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

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

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

const months = ['January', 'February', 'March', 'April'];
const transformedArray = months.map(function (month) {
  return month.toUpperCase();
});

console.log(transformedArray); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

Вот a Code Pen Demo Отказ

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

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

const months = ['January', 'February', 'March', 'April'];
const converted = [];

for(let i = 0; i < months.length; i++) {
 converted.push(months[i].toUpperCase());
};

console.log(converted); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

Вот a Code Pen Demo Отказ

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

const months = ['January', 'February', 'March', 'April'];

console.log(months.map(function (month) {
  return month.toUpperCase();
})); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

Вот a Code Pen Demo Отказ

Обратите внимание, что карта Метод возвращает новый массив, который имеет той же длина, что и исходный массив.

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

Также обратите внимание, что карта Не изменяет оригинальный массив, но возвращает новый массив.

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

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan'
  },
  {
    first_name: 'Tim',
    last_name: 'Lee'
  },
  {
    first_name: 'John',
    last_name: 'Carte'
  }
];

const usersList = users.map(function (user) {
  return user.first_name + ' ' + user.last_name;
});

console.log(usersList); // ["Mike Sheridan", "Tim Lee", "John Carte"]

Вот a Code Pen Demo Отказ

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

В приведенном выше коде мы используем + Оператор для объединения двух ценностей. Но гораздо более распространено использовать литеративный синтаксис шаблона ES6, как показано ниже:

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan'
  },
  {
    first_name: 'Tim',
    last_name: 'Lee'
  },
  {
    first_name: 'John',
    last_name: 'Carte'
  }
];

const usersList = users.map(function (user) {
  return `${user.first_name} ${user.last_name}`;
});

console.log(usersList); // ["Mike Sheridan", "Tim Lee", "John Carte"]

Вот a Code Pen Demo Отказ

Массив карта Метод также полезен, если вы хотите извлечь только конкретные данные из массива, как это:

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan',
    age: 30
  },
  {
    first_name: 'Tim',
    last_name: 'Lee',
    age: 45
  },
  {
    first_name: 'John',
    last_name: 'Carte',
    age: 25
  }
];

const surnames = users.map(function (user) {
  return user.last_name;
});

console.log(surnames); // ["Sheridan", "Lee", "Carte"]

Вот a Code Pen Demo Отказ

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

Мы даже можем использовать карта Чтобы генерировать массив с динамическим контентом, как показано ниже:

const users = [
  {
    first_name: 'Mike',
    location: 'London'
  },
  {
    first_name: 'Tim',
    location: 'US'
  },
  {
    first_name: 'John',
    location: 'Australia'
  }
];

const usersList = users.map(function (user) {
  return `${user.first_name} lives in ${user.location}`;
});

console.log(usersList); // ["Mike lives in London", "Tim lives in US", "John lives in Australia"]

Вот a Code Pen Demo Отказ

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

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

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

Поддержка браузера:

Все современные браузеры и интернет-проводник (т. Е.) Версия 9 и выше
Microsoft Edge версия 12 и выше

Метод array.find

Array.find Метод имеет следующий синтаксис:

Array.find(callback(element[, index[, array]])[, thisArg])

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

Предположим, у нас есть список сотрудников, как это:

const employees = [
 { name: "David Carlson", age: 30 },
 { name: "John Cena", age: 34 },
 { name: "Mike Sheridan", age: 25 },
 { name: "John Carte", age: 50 }
];

и мы хотим получить запись для работника, чье имя Джон Отказ В этом случае мы можем использовать Найти Метод, как показано ниже:

const employee = employees.find(function (employee) {
  return employee.name.indexOf('John') > -1;
});

console.log(employee); // { name: "John Cena", age: 34 }

Вот a Code Pen Demo Отказ

Хотя есть "Джон Карт" В списке Найти Метод остановится, когда он найдет первый матч. Так что не вернет объект с именем "Джон Карт".

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

const employees = [
 { name: "David Carlson", age: 30 },
 { name: "John Cena", age: 34 },
 { name: "Mike Sheridan", age: 25 },
 { name: "John Carte", age: 50 }
];

let user;

for(let i = 0; i < employees.length; i++) {
  if(employees[i].name.indexOf('John') > -1) {
    user = employees[i];
    break;
  }
}

console.log(user); // { name: "John Cena", age: 34 }

Вот a Code Pen Demo Отказ

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

Преимущества использования метода находки

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

Поддержка браузера:

Все современные браузеры, кроме Internet Explorer (т.е.)
Microsoft Edge версия 12 и выше

Метод array.findindex

Array.findindex Метод имеет следующий синтаксис:

Array.findIndex(callback(element[, index[, array]])[, thisArg])

Findindex Метод возвращает индекс первого элемента в массиве что удовлетворяет предусмотренному состоянию испытания . В противном случае возвращается -1 Указывая на то, что ни один элемент не прошел тест.

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];

const index = employees.findIndex(function (employee) {
  return employee.name.indexOf('John') > -1;
});

console.log(index); // 1

Вот a Code Pen Demo Отказ

Здесь мы получаем вывод как 1 Какой индекс первого объекта с именем Джон Отказ Обратите внимание, что индекс начинается с нуля.

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

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];

let index = -1;

for(let i = 0; i < employees.length; i++) {
  if(employees[i].name.indexOf('John') > -1) {
    index = i;
    break;
  }
}

console.log(index); // 1

Вот a Code Pen Demo Отказ

Преимущества использования метода Findindex

Это позволяет нам быстро найти индекс элемента без записи много кода
Он перестает зацикливаться, как только он найдет совпадение, поэтому нет необходимости в дополнительном выписке разрыва
Мы можем найти индекс, используя массив Найти Метод также, но с использованием Findindex позволяет легко и избежать создания дополнительных переменных для хранения индекса

Поддержка браузера:

Все современные браузеры, кроме Internet Explorer (т.е.)
Microsoft Edge версия 12 и выше

Метод array.filter

Array.Filter Метод имеет следующий синтаксис:

Array.filter(callback(element[, index[, array]])[, thisArg])

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

Фильтр Метод принимает функцию обратного вызова в качестве первого аргумента и выполняет функцию обратного вызова для каждого элемента массива. Каждое значение элемента массива передается в качестве первого параметра к функции обратного вызова.

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];

const employee = employees.filter(function (employee) {
  return employee.name.indexOf('John') > -1;
});

console.log(employee); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

Вот a Code Pen Demo Отказ

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

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

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

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

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridan', age: 25 },
  { name: 'John Carte', age: 50 }
];

let filtered = [];

for(let i = 0; i < employees.length; i++) {
 if(employees[i].name.indexOf('John') > -1) {
   filtered.push(employees[i]);
 }
}

console.log(filtered); // [ { name: "John Cena", age: 34 }, { name: "John Carte", age: 50 }]

Вот a Code Pen Demo Отказ

Преимущества использования метода фильтра

Это позволяет нам быстро найти все соответствующие элементы из массива
Это всегда возвращает массив, даже если нет совпадения, поэтому он избегает записи дополнительных Если условия
Это позволяет избежать необходимости создания дополнительной переменной для хранения отфильтрованных элементов

Поддержка браузера:

Все современные браузеры и интернет-проводник (т. Е.) Версия 9 и выше
Microsoft Edge версия 12 и выше

Метод Array.ewy

Array.ewly Метод имеет следующий синтаксис:

Array.every(callback(element[, index[, array]])[, thisArg])

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

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

let numbers = [10, -30, 20, 50];

let allPositive = numbers.every(function (number) {
  return number > 0;
});
console.log(allPositive); // false 

numbers = [10, 30, 20, 50];

allPositive = numbers.every(function (number) {
  return number > 0;
});
console.log(allPositive); // true

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

window.onload = function () {
  const form = document.getElementById('registration_form');
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    const fields = ['first_name', 'last_name', 'email', 'city'];
    const allFieldsEntered = fields.every(function (fieldId) {
      return document.getElementById(fieldId).value.trim() !== '';
    });

    if (allFieldsEntered) {
      console.log('All the fields are entered');
      // All the field values are entered, submit the form
    } else {
      alert('Please, fill out all the field values.');
    }
  });
};

Вот a Code Pen Demo Отказ

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

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

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

Преимущество использования каждого метода

Это позволяет нам быстро проверить, сочетаются ли все элементы определенные критерии, не написав много кода

Поддержка браузера:

Все современные браузеры и интернет-проводник (т. Е.) Версия 9 и выше
Microsoft Edge версия 12 и выше

Метод массива

Array.some Метод имеет следующий синтаксис:

 Array.some(callback(element[, index[, array]])[, thisArg]

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

Это возвращает правда Как только он найдет первый матч и возврат ложь Если нет совпадения.

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

let numbers = [-30, 40, 20, 50];

let containsPositive = numbers.some(function (number) {
  return number > 0;
});
console.log(containsPositive); // true 

numbers = [-10, -30, -20, -50];

containsPositive = numbers.every(function (number) {
  return number > 0;
});
console.log(containsPositive); // false

Есть некоторые полезные сценарии для использования некоторые метод.

Какой-то метод примера 1:

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

Итак, вместо того, чтобы использовать Найти и Findindex Методы отдельно, мы можем использовать некоторые Способ сделать обоими из них.

const employees = [
  { name: 'David Carlson', age: 30 },
  { name: 'John Cena', age: 34 },
  { name: 'Mike Sheridon', age: 25 },
  { name: 'John Carte', age: 50 }
];

let indexValue = -1;
const employee = employees.some(function (employee, index) {
  const isFound = employee.name.indexOf('John') > -1;
  if (isFound) {
    indexValue = index;
  }
  return isFound;
});

console.log(employee, indexValue); // true 1

Вот a Code Pen Demo Отказ

Какой-то метод примера 2:

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

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

Первый параметр – это фактическое значение
Второй параметр является индексом
Третий параметр является оригинальным массивом

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

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

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

Поддержка браузера:

Все современные браузеры и интернет-проводник (т. Е.) Версия 9 и выше
Microsoft Edge версия 12 и выше

Метод Array.reduce

Array.reduce Метод имеет следующий синтаксис:

Array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

Уменьшить Метод выполняет Редуктор Функция (что вы предоставляете) на каждом элементе массива, что приведет к одному выходу.

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

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(accumulator, number) {
  return accumulator + number; 
}, 0);

console.log(sum); // 15

Вот a Code Pen Demo Отказ

Уменьшить Метод принимает функцию обратного вызова, которая получает аккумулятор , Номер , показатель и массив как значения. В приведенном выше коде мы используем только аккумулятор и Номер Отказ

Аккумулятор будет содержать InitivalValue использоваться для массива. InitivalValue решает возвратный тип данных, возвращаемых Уменьшить метод.

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

В приведенном выше коде мы предоставили 0 Как InitivalValue для аккумулятор . Итак, первый раз, когда функция обратного вызова выполняется, Аккумулятор + номер будет 0. + И мы возвращаемся в стоимость 1 Отказ

В следующий раз работает функция обратного вызова, Аккумулятор + номер будет 1 + ( 1 Вот предыдущее значение, возвращенное в последней итерации и 2 – следующий элемент из массива).

Затем в следующий раз работает функция обратного вызова, Аккумулятор + номер будет 3 + (Первая 3 вот предыдущее значение, возвращенное в последней итерации и следующем 3 – это следующий элемент из массива), и он будет продолжаться таким образом, пока все элементы в Числа Массив не итерации.

Итак, Аккумулятор будет сохранять значение последней операции, как статическая переменная.

В приведенном выше коде InitivalValue 0 не требуется, потому что все элементы массива являются целыми числами.

Так что следующий код также будет работать:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function (accumulator, number) {
  return accumulator + number;
});

console.log(sum); // 15

Вот a Code Pen Demo Отказ

Здесь Аккумулятор будет содержать первый элемент массива и Номер будет содержать следующий элемент массива ( 1 + во время первой итерации, а затем 3 + во время следующей итерации и т. Д.).

Но всегда хорошо указать InitivalValue аккумулятор Как это легко понять обратный тип Уменьшить метод и получить правильный тип данных обратно.

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

const numbers = [1, 2, 3, 4, 5];

const doublesSum = numbers.reduce(function (accumulator, number) {
  return accumulator + number * 2;
}, 10);

console.log(doublesSum); // 40

Вот a Code Pen Demo Отказ

Здесь мы умножим каждый элемент массива на 2. Мы предоставили InitivalValue от 10 до аккумулятор Так что 10 будут добавлены к окончательному результату такой суммы:

[1 * 2, 2 * 2, 3 * 2, 4 * 2, 5 * 2] = [2, 4, 6, 8, 10] = 30 + 10 = 40

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

const coordinates = [
  { x: 1, y: 2 }, 
  { x: 2, y: 3 }, 
  { x: 3, y: 4 }
];

const sum = coordinates.reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
}, 0);

console.log(sum); // 6

Вот a Code Pen Demo Отказ

Преимущества использования метода уменьшения

Использование Уменьшить позволяет нам генерировать любой тип простых или сложных данных на основе массива
Он помнит, что ранее возвращает данные из петли, поэтому помогает нам избежать создания глобальной переменной для хранения предыдущего значения

Поддержка браузера:

Все современные браузеры и интернет-проводник (т. Е.) Версия 9 и выше
Microsoft Edge версия 12 и выше

Спасибо за прочтение!

Хотите узнать все функции ES6 + подробно, включая Пусть и Const , Обещания, различные методы обещания, массив и деструктурирование объектов, функции стрелки, Async/ждут, импорт и экспорт и многое другое?

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

Кроме того, проверьте мой бесплатный Введение в React Router Курс для изучения React Router с нуля.

Хотите остаться в курсе с регулярным контентом в отношении JavaScript, React, Node.js? Следуй за мной на LinkedIn .

Оригинал: “https://www.freecodecamp.org/news/complete-introduction-to-the-most-useful-javascript-array-methods/”

Метод Array.Foreach

Преимущества использования Foreach вместо A для петли

Поддержка браузера

Метод Array.map.

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

Метод array.find

Преимущества использования метода находки

Метод array.findindex

Преимущества использования метода Findindex

Метод array.filter

Преимущества использования метода фильтра

Метод Array.ewy

Преимущество использования каждого метода

Поддержка браузера:

Метод массива

Какой-то метод примера 1:

Какой-то метод примера 2:

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

Поддержка браузера:

Метод Array.reduce

Преимущества использования метода уменьшения

Спасибо за прочтение!

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