小程序 array.map_Array.map解释了4个复杂级别：从5岁到功能程序员。

小程序 array.map

Array.map might be JavaScript's most useful function. Forgoing it nowadays is like donning your toolbelt without a hammer.

Array.map可能是JavaScript最有用的功能。如今，放弃它就像没有锤子就穿上工具带。

To further appreciate map and deepen our understanding of it, let's see 4 levels of explanations in ascending complexity.

为了进一步了解map并加深对map的理解，让我们看一下关于复杂性递增的4个层次的解释。

Tell me which ones you got and which ones surprised you!

告诉我您得到了哪些，哪些使您感到惊讶！

目录 (Table of Contents)

To a Five Year Old

到五岁
To a High School Coding Student

致高中编码学生
To a React Developer

致React开发人员
To a Functional Programmer

致功能程序员

到五岁 (To a Five Year Old)

Do you know DragonBall Z? Here are my favorite characters from the show!

你知道七龙珠Z吗？这是节目中我最喜欢的角色！

悟空 (Goku)

素食 (Vegeta)

皮箱 (Trunks)

They're saiyans, and they're really strong!

他们是赛亚人，他们真的很强！

I put them in this list–JavaScript calls them arrays. It lets you hold a bunch of things together:

我将它们放在此列表中-JavaScript称它们为arrays 。它使您可以将一堆东西放在一起：

saiyans = [goku, vegeta, trunks];

And I have code that turns them into Super Saiyans, so they get 50x stronger (literally)! This code is called a function.

而且我有将他们变成超级赛亚人的代码，因此它们的强度提高了50倍！此代码称为函数。

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

What if I want to transform all 3 of them? I have to run the function 3 times! Repeating things like that is boring ?

如果我要转换所有三个呢？我必须运行该功能3次！重复这样的事情很无聊吗？

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

Luckily, programming lets you repeat things lots of times really easily! Array.map can turn them all into Super Saiyans at once!

幸运的是，编程使您可以真正轻松地重复很多次！ Array.map可以一次将它们全部变成超级赛亚人！

Just plug turnSuperSaiyan in there and get back a new array of Super Saiyan Goku, Vegeta, and Trunks.

只需将turnSuperSaiyan插入那里，然后获得新的Super Saiyan Goku，Vegeta和Trunks 阵列。

superSaiyans = saiyans.map(turnSuperSaiyan);

致高中编码学生 (To a High School Coding Student)

Hi!

嗨！

So you've learned for loops. They're great for performing repetitive work, but I personally haven't needed one in years.

因此，您已经了解for循环。它们非常适合执行重复性工作，但我个人多年以来都不需要。

Don't get me wrong, I still love automating repetitive work. In fact, most applications involve repetitive work.

不要误会我的意思，我仍然喜欢自动化重复性工作。实际上，大多数应用程序涉及重复性工作。

Think of these examples...

想想这些例子...

InstagramInstagram
WhatsappWhatsapp的
Google search resultsGoogle搜寻结果
Emails电邮
Contacts联络人
Text messages短信

If you boil them down to the core, these everyday apps are just fancy lists. Much of Front-End development is transforming these lists into something user-friendly.

如果您将它们归结为核心，那么这些日常应用程序只是花哨的清单。许多前端开发正在将这些列表转换为用户友好的东西。

Of course the big picture is more complex, but the core of most apps is manipulating lists!

当然，大局要复杂得多，但是大多数应用程序的核心是操纵列表！

In a JavaScript program, we represent lists as arrays.

在JavaScript程序中，我们将列表表示为数组。

All arrays carry a special method called map. It lets you transform an array into a new one based on some function you give it.

所有数组都带有一种称为map的特殊方法。它使您可以根据提供的某些功能将数组转换为新数组。

Here's some numbers.

这是一些数字。

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

And a double function.

并具有double功能。

double = (x) => x * 2;

Can you double each one using a for loop?

您可以使用for循环将每个人加倍吗？

doubledNumbers = [];for (let i = 0; i < numbers.length; i++) {doubledNumbers.push(double(numbers[i]))
}// [2, 4, 6, 8, 10]

Cool! Here's the same idea expressed with map.

凉！这是map表达的相同想法。

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

map constructs the loop under the hood, so you don't have to worry about typos or missing semicolons anymore!

map在后台构造循环，因此您不必担心拼写错误或缺少分号！

And this goes beyond just numbers. Here's some users...

这不仅限于数字。这是一些用户...

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'
}];

How would you create a new array of every user's name and heroName? Probably using a for loop.

您将如何创建一个包含每个用户name和heroName 的新数组 ？可能使用for循环。

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"}
]

Here's a loop-less version.

这是无循环版本。

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"}
]

See how much easier that is? We can implement map like so:

看看这有多容易？我们可以像这样实现map ：

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

So for every element, call the given function and store it inside a new array!

因此，对于每个元素，调用给定的函数并将其存储在新数组中！

致React开发人员 (To a React Developer)

Hi!

嗨！

The Array prototype offers a method called map.

Array原型提供了一种称为map的方法。

It will loop over your array, calling a given function on each item, and return a new array with those changes.

它将遍历您的数组，在每个项目上调用给定的函数，并返回具有这些更改的新数组。

Instead of a for loop, just use map to get usernames and render the UI.

代替for循环，只需使用map获取用户名并呈现UI。

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

Yep you can method chain, since it returns the same type!

是的，您可以使用方法链，因为它返回相同的类型！

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

Tremendously useful. Most of your main components will probably use map.

非常有用。您的大多数主要组件都可能会使用map 。

致功能程序员 (To a Functional Programmer)

Map simply lifts a function a -> b into a context F a -> F b.

Map只是将函数a- a -> b提升到上下文F a -> F b 。

JavaScript doesn't extend this expressibility beyond arrays, unfortunately...

不幸的是，JavaScript并没有将这种可扩展性扩展到数组之外。

Thank you Brian Lonsdorf for the wicked explanation!

谢谢Brian Lonsdorf 的邪恶解释！

For more content like this, check out https://yazeedb.com!

有关更多内容，请访问https://yazeedb.com！

And please let me know what else you'd like to see! My DMs are open for questions, comments, and suggestions!

并且，请让我知道您还想看到什么！我的DM对问题，评论和建议开放！

翻译自: https://www.freecodecamp.org/news/array-map-explained-in-4-levels-of-difficulty/

小程序 array.map