uTools-Manuals/docs/jQuery/jQuery.map.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.map()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/utilities/">工具类</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/jQuery.map/" target="_blank">jQuery.map()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-map1"><h2 class="section-title">
<span class="name">jQuery.map( array, callback(elementOfArray, indexInArray) )</span><span class="returns">返回: <a href="/Types/#Array">Array</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>将一个数组中的所有元素转换到另一个数组中。</p>
<ul class="signatures">
<li class="signature" id="jQuery-map-array-callbackelementOfArray--indexInArray">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery.map( array, callback(elementOfArray, indexInArray) )</h4>
<ul>
<li>
<div><strong>array</strong></div>
<div>类型: <a href="/Types/#Array">Array</a>
</div>
<div>待转换数组。</div>
</li>
<li>
<div><strong>callback(elementOfArray, indexInArray)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>处理每一个元素的函数。第一个参数是数组元素，第二个参数是该元素的索引值。该函数可以返回任何值。在函数内部，<code>this</code>将是全局的window对象。</div>
</li>
</ul>
</li>
<li class="signature" id="jQuery-map-arrayOrObject-callback-value--indexOrKey-">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.6/">1.6</a></span>jQuery.map( arrayOrObject, callback( value, indexOrKey ) )</h4>
<ul>
<li>
<div><strong>arrayOrObject</strong></div>
<div>类型: <a href="/Types/#Array,Object">Array,Object</a>
</div>
<div>待转换数组或对象。</div>
</li>
<li>
<div><strong>callback( value, indexOrKey )</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>处理每一个元素的函数。第一个参数是数组中元素或对象的值，第二个参数是该元素在数组中的索引值或该对象的键。该函数可以返回任何值，该返回值会被添加到数组中。若返回是数组，则会将该数组中的元素添加到最终的结果数组中。在函数内部， <code>this</code>指的是全球（window）的对象。</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>如果你希望处理一个jQuery对象——例如，<code>$('div').map( callback );</code> — 使用 <a href="/map">.map()</a> 代替. </p>
<p><code>$.map()</code>方法会在数组的每一个元素或对象上应用一个函数并将结果映射到一个新的数组中。<strong>在jQuery 1.6之前，</strong>，<code>$.map()</code>只支持遍历<em>数组和类似数组的对象</em> 。<strong>在jQuery 1.6</strong>也支持遍历对象。</p>
<p>类似数组的对象- 那些有一个<code>.length</code>属性<em>和</em>一个<code>.length - 1</code> 的所引值- 
			必须被转换为实际的数组，然后被传递到<code>$.map()</code>。
			jQuery库提供<a href="/jQuery.makeArray">$.makeArray()</a> 这样的转换。</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// The following object masquerades as an array.</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> fakeArray = {<span class="string">"length"</span>: <span class="number">1</span>, <span class="number">0</span>: <span class="string">"Addy"</span>, <span class="number">1</span>: <span class="string">"Subtracty"</span>};</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Therefore, convert it to a real array</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> realArray = $.makeArray( fakeArray )</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Now it can be used reliably with $.map()</span></code></div></div><div class="container"><div class="line"><code>$.map( realArray, <span class="keyword">function</span>(val, i) {</code></div></div><div class="container"><div class="line"><code>  <span class="comment">// do something</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>在该方法中提供的转换函数会应用在数组或对象的顶级（top-level）元素上，并且该转换函数中有两个参数：元素在数组或对象中的值及该值所对应的索引值或键。</p>
<p>该函数可以返回：</p>
<ul>
<li>转换后的值，该值会被映射到最终的结果数组中</li>
<li>
<code>null</code>或者<code>undefined</code>, 用于移除该元素</li>
<li>数组，会将该数组中的元素添加到最终的结果数组中</li>
</ul>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">使用$.map() 修改一个数组的值。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">green;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">0</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">span</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span>&gt;</span><span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>    <span class="keyword">var</span> arr = [ <span class="string">"a"</span>, <span class="string">"b"</span>, <span class="string">"c"</span>, <span class="string">"d"</span>, <span class="string">"e"</span> ];</code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"div"</span>).text(arr.join(<span class="string">", "</span>));</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    arr = jQuery.map(arr, <span class="keyword">function</span>(n, i){</code></div></div><div class="container"><div class="line"><code>      <span class="keyword">return</span> (n.toUpperCase() + i);</code></div></div><div class="container"><div class="line"><code>    });</code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"p"</span>).text(arr.join(<span class="string">", "</span>));</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    arr = jQuery.map(arr, <span class="function"><span class="keyword">function</span> <span class="params">(a)</span> {</span></code></div></div><div class="container"><div class="line"><code>      <span class="keyword">return</span> a + a;</code></div></div><div class="container"><div class="line"><code>    });</code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"span"</span>).text(arr.join(<span class="string">", "</span>));</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">将原始数组中的每个值加 4 后，映射到新的数组中。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.map( [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>], <span class="keyword">function</span>(n){</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> n + <span class="number">4</span>;</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>[<span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>] </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">若原始数组中的值大于 0，则将该值加 1 后，映射到新的数组中，否则在结果数组中将不包含该值。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.map( [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>], <span class="keyword">function</span>(n){</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> n &gt; <span class="number">0</span> ? n + <span class="number">1</span> : <span class="literal">null</span>;</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>[<span class="number">2</span>, <span class="number">3</span>] </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-3">
<h4>Example: <span class="desc">将原始数组中每个值及该值加 1 后的值作为返回结果，映射到新生成的数组中。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.map( [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>], <span class="keyword">function</span>(n){</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">return</span> [ n, n + <span class="number">1</span> ];</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>[<span class="number">0</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">3</span>] </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-4">
<h4>Example: <span class="desc">将原始对象中的每个值乘 2 后，映射到新生成的数组中。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> dimensions = { width: <span class="number">10</span>, height: <span class="number">15</span>, length: <span class="number">20</span> };</code></div></div><div class="container"><div class="line"><code>dimensions = $.map( dimensions, <span class="keyword">function</span>( value, index ) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> value * <span class="number">2</span>;</code></div></div><div class="container"><div class="line"><code>}); </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code> [<span class="number">20</span>, <span class="number">30</span>, <span class="number">40</span>] </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-5">
<h4>Example: <span class="desc">将对象中的键映射到新生成的数组中。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> dimensions = { width: <span class="number">10</span>, height: <span class="number">15</span>, length: <span class="number">20</span> };</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> keys = $.map( dimensions, <span class="keyword">function</span>( value, key ) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> key;</code></div></div><div class="container"><div class="line"><code>}); </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>[<span class="string">"width"</span>, <span class="string">"height"</span>, <span class="string">"length"</span>] </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-6">
<h4>Example: <span class="desc">将原始数组中每个值的两次方作为返回结果，映射到新生成的数组中。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.map( [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>], <span class="function"><span class="keyword">function</span> <span class="params">(a)</span> {</span></code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> a * a;</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>[<span class="number">0</span>, <span class="number">1</span>, <span class="number">4</span>, <span class="number">9</span>] </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-7">
<h4>Example: <span class="desc">在处理函数中，通过返回 null 的方式来移除该元素。移除条件是该值小于 50。同时将未被移除的元素值减小 45。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.map( [<span class="number">0</span>, <span class="number">1</span>, <span class="number">52</span>, <span class="number">97</span>], <span class="function"><span class="keyword">function</span> <span class="params">(a)</span> {</span></code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> (a &gt; <span class="number">50</span> ? a - <span class="number">45</span> : <span class="literal">null</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>[<span class="number">7</span>, <span class="number">52</span>] </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-8">
<h4>Example: <span class="desc">通过在处理函数中返回数组的方式，在最终返回的结果数组中添加元素。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> array = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">52</span>, <span class="number">97</span>];</code></div></div><div class="container"><div class="line"><code>array = $.map(array, <span class="keyword">function</span>(a, index) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> [a - <span class="number">45</span>, index];</code></div></div><div class="container"><div class="line"><code>}); </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>[-<span class="number">45</span>, <span class="number">0</span>, -<span class="number">44</span>, <span class="number">1</span>, <span class="number">7</span>, <span class="number">2</span>, <span class="number">52</span>, <span class="number">3</span>] </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article> </div>
</article>