Array.MAP объяснено на 4 уровнях сложности: от 5-летнего до функционального программиста.

Автор оригинала: FreeCodeCamp Community Member.

Array.map может быть самая полезная функция JavaScript. Сдавая это в наши дни, как надевать ваш закусочный заряд без молотка.

Чтобы еще больше оценить карта И углубить наше понимание этого, давайте посмотрим 4 уровня объяснений в восходящей сложности.

Скажи мне, какие из них вы получили, и какие из них удивило вас!

До пятилетнего

Вы знаете Dragonball Z? Вот мои любимые персонажи с шоу!

Гоку

Вегетация

Сундуки

Они сайяны, и они действительно сильны!

Я положил их в этот список – JavaScript вызывает их Массивы Отказ Это позволяет держать кучу вещей вместе:

saiyans = [goku, vegeta, trunks];

И у меня есть код, который превращает их в Super Saiyans, поэтому они получают 50x сильнее (буквально)! Этот код называется Функция Отказ

turnSuperSaiyan = () => { /* use your imagination */ };
turnSuperSaiyan(goku);

Что если я хочу трансформировать все 3 из них? Я должен запустить функцию 3 раза! Повторяющиеся вещи, как это скучно?

turnSuperSaiyan(goku);
turnSuperSaiyan(vegeta);
turnSuperSaiyan(trunks);

К счастью, программирование позволяет вам повторять много раз много раз! Array.map Можно сразу превратить их в супер Сайяны!

Просто подключите Оказывает отказываться там и вернусь Новый массив Супер Сайян Гоку, Вегета и стволы.

superSaiyans = saiyans.map(turnSuperSaiyan);

В ученицу в средней школе

Здравствуй!

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

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

Подумайте об этих примерах …

Instagram.
WhatsApp
Результаты поиска Google
Электронные письма
Контакты
Текстовые сообщения

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

Конечно, большая картина сложнее, но ядро большинства приложений манипулирует списки!

В программе JavaScript мы представляем списки как массивы.

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

Вот несколько номеров.

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

И а Двойной функция.

double = (x) => x * 2;

Можете ли вы удвоить каждый, используя для петля?

doubledNumbers = [];

for (let i = 0; i < numbers.length; i++) {
	doubledNumbers.push(double(numbers[i]))
}

// [2, 4, 6, 8, 10]

Прохладный! Вот та же самая идея, выраженная с карта Отказ

doubledNumbers = numbers.map(double);
// [2, 4, 6, 8, 10]

карта Создает петлю под капотом, поэтому вам больше не нужно беспокоиться о опечатках или отсутствующих запятеях!

И это выходит за рамки только номеров. Вот некоторые пользователи …

users = [{
  name: 'Bruce Wayne',
  location: 'Gotham City',
  heroName: 'Batman'
}, {
  name: 'Barry Allen',
  location: 'Central City',
  heroName: 'The Flash'
}, {
  name: 'Clark Kent',
  location: 'Kryptonopolis',
  heroName: 'Superman'
}];

Как бы вы создали Новый массив каждого пользователя Имя и Геронама ? Вероятно, используя для петля.

userInfo = [];

for (let i = 0; i < users.length; i++) {
  userInfo.push({
    name: users[i].name,
    heroName: users[i].heroName
  });
}

// Result
[
  {
    "name": "Bruce Wayne",
    "heroName": "Batman"
  },
  {
    "name": "Barry Allen",
    "heroName": "The Flash"
  },
  {
    "name": "Clark Kent",
    "heroName": "Superman"
  }
]

Вот версия с петлей меньше.

userInfo = users.map(u => ({
  name: u.name,
  heroName: u.heroName
}));

// Result
[
  {
    "name": "Bruce Wayne",
    "heroName": "Batman"
  },
  {
    "name": "Barry Allen",
    "heroName": "The Flash"
  },
  {
    "name": "Clark Kent",
    "heroName": "Superman"
  }
]

Посмотрите, насколько легче? Мы можем реализовать карта вот так:

map = (fn, array) => {
	const results = [];

	for (let i = 0; i < array.length; i++) {
		results.push(fn(array[i]));
	}

	return results;
}

Таким образом, для каждого элемента вызывайте данную функцию и храните его в новом массиве!

До разработчика реагирования

Здравствуй!

Прототип массива предлагает метод под названием карта Отказ

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

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

const App = users => {
  return (
    
      My name is {users.map(u => u.name)}!
    
  );
};

Да, вы можете метод цепочки, поскольку он возвращает тот же тип!

const App = users => {
  return (
    
      {users
        .map(u => u.name)
        .map(name => (
          My name is {name}!
        ))}
    
  );
};

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

К функциональному программиру

Карта просто поднимает функцию A -> B в контекст F a -> f b Отказ

JavaScript не расширяет эту выразительность за пределами массивов, к сожалению …

Спасибо Брайан Лонсдорф за Зрелое объяснение !

Для большего количества контента посмотрите https://yazeedb.com!

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

Оглавление