blocks|key|1362993|text|map()方法使用对调用数组中的每个元素调用所提供的function的结果创建一个新数组。例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1362994|1362995|Iteration+1：firstLetter+=+'Hen'+so+'Hen'[0]+=|unordered-list-item|BOLD|1362996|Iteration+2：firstLetter+=+'elephant'+so+'elephant'[0]+=+'e'。以此类推...|1362997|1362998|1362999|以下是文档：map|1363000|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map^0|0|5|Q|8|0|0|0|B|C|B|Q|5|Z|8|1|0|B|C|B|Q|A|14|D|1K|3|1|0|0|6|3|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|13|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|14|8|@$9|15|A|16|B|J]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|K|3|L|5|I|7|1D|8|@$9|1E|A|1F|B|J]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|Q|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

The <code>map()</code> method creates a new array with the results of calling a provided <code>function</code> on every element in the calling array. for example: 

<ul>
<li>Iteration 1: <code>firstLetter</code> = <code>'Hen'</code> so <code>'Hen'[0]</code> = <code>'H'</code>.</li>
<li>Iteration 2: <code>firstLetter</code> = <code>'elephant'</code> so <code>'elephant'[0]</code> = <code>'e'</code>.
And so on...</li>
</ul>

Here is the documantation: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="nofollow noreferrer">map</a>

blocks|key|5305552|text|.map()接受函数作为参数。在您的例子中，您正在传递一个匿名箭头函数。您的匿名箭头函数有一个可接受的名为firstLetter的参数。当您调用.map()时，它将对数组中的每个元素执行箭头函数，从而将此元素传递到函数中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5305553|因此，firstLetter实际上并不表示firstLetter，而是表示数组中的给定元素。如果您将此参数重命名为更具代表性的名称，可能会更清楚：|5305554|const+animals+=+['Hen',+'elephant',+'llama',+'leopard',+'ostrich',+'Whale',+'octopus',+'rabbit',+'lion',+'dog'];

const+secretMessage+=+animals.map(animalType+=>+{
++return+animalType[0];+//+get+the+first+character+from+a+given+string
});|code-block|syntax|javascript|5305555|因此，执行上面的animalType[0]操作将得到给定字符串的第一个字符，而不是animals数组中的第一个元素。|5305556|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map^0|0|6|1H|B|20|6|0|6|0|0|3|B|L|B|0|0|8|D|15|7|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="nofollow noreferrer"><code>.map()</code></a> accepts a function as an argument. In your case, you are passing through an anonymous arrow function. Your anonymous arrow function has an argument which it accepts called <code>firstLetter</code>. When you call <code>.map()</code>, it will execute your arrow function for every element in your array, and thus pass through this element into the function. 

So, <code>firstLetter</code> doesn't really represent the <code>firstLetter</code>, but rather it represents a given element in your array. It may be clearer if you rename this argument to something more representative of what it really is:

<pre><code>const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

const secretMessage = animals.map(animalType =&gt; {
 return animalType[0]; // get the first character from a given string
});
</code></pre>

So, doing <code>animalType[0]</code> above will give you the first character of the given string, not the first element in your <code>animals</code> array.

blocks|key|3837246|text|map()遍历您的数组，复制每个值并对其进行转换，将每个转换结果写入一个新的数组。在每个迭代步骤中，它将当前值视为firstLetter，并使用该值作为参数(firstLetter)调用函数。因此，firstLetter依次是Hen，然后是elephant，等等。在每个数组上，您都可以应用函数，该函数返回参数的第一个字母，然后将其放入新的数组中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3837247|下面的命名应该更清楚地说明我的意思：|3837248|const+secretMessage+=+animals.map(currentValue+=>+{
++return+currentValue[0]
});|code-block|syntax|javascript|3837249|entityMap^0|0|5|1L|B|27|B|2R|B|35|3|3C|8|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|N|$]]

<code>map()</code> iterates over your array, makes a copy of each value and transforms it, with each transformation result being written into a new array. On each iteration step it thinks of the current value as <code>firstLetter</code> and calls a function with it as a parameter (<code>firstLetter</code>). So <code>firstLetter</code> is sequentially <code>Hen</code>, then <code>elephant</code> etc. On each of these you apply the function which returns the first letter of your parameter which then gets put into the new array.

The following naming should make it more clear what I mean:

<pre><code>const secretMessage = animals.map(currentValue =&gt; {
 return currentValue[0]
});
</code></pre>

blocks|key|1363031|text|使用Destructuring+assignment取第一个字母|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1363032|​|1363033|const+animals+=+['Hen',+'elephant',+'llama',+'leopard',+'ostrich',+'Whale',+'octopus',+'rabbit',+'lion',+'dog'];


const+result+=+animals.map(([v])=>+v);
console.log(result);|code-block|syntax|javascript|1363034|1363035|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment^0|2|O|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]]]

Take the 1st letter using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" rel="nofollow noreferrer">Destructuring assignment</a>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];


const result = animals.map(([v])=&gt; v);
console.log(result);</code></pre>
</div>
</div>

blocks|key|1521729|text|正如注释中提到的，map函数遍历数组中的每个元素。访问firstLetter[0]时，访问的不是数组animals的第一个元素，而是字符串firstLetter的第一个字符。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1521730|map的工作原理是遍历列表中的每个元素，并对其执行一些函数，因此代码：|1521731|const+animals+=+['Hen',+'elephant',+'llama',+'leopard',+'ostrich',+'Whale',+'octopus',+'rabbit',+'lion',+'dog'];

const+secretMessage+=+animals.map(firstLetter+=>+{
++return+firstLetter[0]
});|code-block|syntax|javascript|1521732|等同于|1521733|const+animals+=+['Hen',+'elephant',+'llama',+'leopard',+'ostrich',+'Whale',+'octopus',+'rabbit',+'lion',+'dog'];

let+secretMessage+=+[];
for+(var+i+=+0;+i+<+animals.length;+i%2B%2B)+{
++firstLetter+=+animals[i]+#+the+ith+string+in+animals
++secretMessage.push(firstLetter[0])+#+add+the+first+letter+of+the+string
}|1521734|map函数接受一个以元素为参数的函数，并创建一个由该函数的返回值组成的数组，其中包含数组中的每个元素。因此，对于'Hen'，函数firstLetter+=>+firstLetter[0]返回'H'，然后对于'elephant‘，返回'e'，以此类推。然后，将secretMessage设置为['H',+'e',+...]|1521735|entityMap^0|R|E|1E|7|1X|B|0|0|3|0|0|0|0|0|3|1S|T|3L|D|41|F|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|T|$]]

As mentioned in the comments, the map function iterates over every element in the array. When you access the <code>firstLetter[0]</code> you are not accessing the first element of the array <code>animals</code>, you are accessing the first character of the string <code>firstLetter</code>.

How <code>map</code> works is that it iterates over every element in a list and performs some function on it, so the code:

<pre><code>const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

const secretMessage = animals.map(firstLetter =&gt; {
 return firstLetter[0]
});
</code></pre>

Is equivalent to

<pre><code>const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

let secretMessage = [];
for (var i = 0; i &lt; animals.length; i++) {
 firstLetter = animals[i] # the ith string in animals
 secretMessage.push(firstLetter[0]) # add the first letter of the string
}
</code></pre>

The <code>map</code> function takes a function which takes an element as the argument, and creates an array of the return values of the function with every element in the array. So, for 'Hen', the function <code>firstLetter =&gt; firstLetter[0]</code> returns 'H', then for 'elephant' it is 'e', and so on. Then, <code>secretMessage</code> is set to <code>['H', 'e', ...]</code>

blocks|key|3837392|text|Map迭代数组中的每个值。因此，假设第一个firstLetter将指向'Hen'，因此firstLetter[0]等于H，依此类推，数组中的所有其他值都是如此。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3837393|entityMap^0|Z|5|17|E|1N|1|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

Map iterates for each value in array.
So, assume that firstLetter at the first will point to <code>'Hen'</code> so <code>firstLetter[0]</code> is equal to <code>H</code> and so on for all others values inside array.

I was doing some exercises that involved using .map() and it all seemed pretty straight forward. However in one of the examples, I was tasked with using the .map() iterator to return the first letter of every item in an array.

See below the code that solved the problem.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

const secretMessage = animals.map(firstLetter =&gt; {
 return firstLetter[0]
});
console.log(secretMessage)</code></pre>
</div>
</div>


My question is, how does the firstLetter() function know to return only the first letter of each string within the animals array, rather than just returning the item at index 0 repeatedly?

Finding the first letter of every element in an array

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我做了一些涉及使用.map()的练习，这一切看起来都很简单。但是，在其中一个示例中，我的任务是使用.map()迭代器返回数组中每一项的第一个字母。请看下面解决问题的代码。​const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale'...

问查找数组中每个元素的第一个字母
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问查找数组中每个元素的第一个字母EN