2019-04-21 11:50:48 +08:00

176 lines
14 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article id="wikiArticle">
<div></div>
<h2 id="Summary" name="Summary">概述</h2>
<p><code><strong>lastIndexOf()</strong></code> 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找<code>fromIndex</code> 处开始。</p>
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-lastindexof.html" width="100%"></iframe></div>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre><code class="language-javascript"><code><em>arr</em>.lastIndexOf(<em>searchElement</em>[, <em>fromIndex = arr.length - 1</em>])</code></code></pre>
<h3 id="Parameters" name="Parameters">参数</h3>
<dl>
<dt><code>searchElement</code></dt>
<dd>被查找的元素。</dd>
<dt><code>fromIndex</code></dt>
<dd>从此位置开始逆向查找。默认为数组的长度减 1即整个数组都被查找。如果该值大于或等于数组的长度则整个数组会被查找。如果为负值将其视为从数组末尾向前的偏移。即使该值为负数组仍然会被从后向前查找。如果该值为负时其绝对值大于数组长度则方法返回 -1即数组不会被查找。</dd>
<dt>
<h3 id="返回值">返回值</h3>
<p>数组中最后一个元素的索引,如未找到返回-1</p>
</dt>
</dl>
<h2 id="Description" name="Description">描述</h2>
<p><code>lastIndexOf</code> 使用<a href="https://developer.mozilla.orgReference/Operators/Comparison_Operators#Using_the_Equality_Operators">严格相等</a>strict equality即 ===)比较 <code>searchElement</code> 和数组中的元素。</p>
<h2 id="Examples" name="Examples">示例</h2>
<h3 id="Example:_Using_lastIndexOf" name="Example:_Using_lastIndexOf">例子:使用 lastIndexOf</h3>
<p>下例使用 <code>lastIndexOf</code> 定位数组中的值。</p>
<pre><code class="language-javascript">var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3
</code></pre>
<h3 id="Example:_Finding_all_the_occurrences_of_an_element" name="Example:_Finding_all_the_occurrences_of_an_element">例子:查找所有元素</h3>
<p>下例使用 <code>lastIndexOf</code> 查找到一个元素在数组中所有的索引(下标),并使用 <a href="Reference/Global_Objects/Array/push" title="push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。"><code>push</code></a> 将所有添加到另一个数组中。</p>
<pre><code class="language-javascript">var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.lastIndexOf(element);
while (idx != -1) {
indices.push(idx);
idx = (idx &gt; 0 ? array.lastIndexOf(element, idx - 1) : -1);
}
console.log(indices);
// [4, 2, 0];
</code></pre>
<p>注意,我们要单独处理<code>idx==0</code>时的情况,因为如果是第一个元素,忽略了<code>fromIndex</code>参数则第一个元素总会被查找。这不同于<a href="Reference/Global_Objects/Array/indexOf" title="indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。"><code>indexOf</code></a>方法</p>
<p>注:原英文是针对使用三元操作符语句的作用进行说明的:<br/>
<code>idx = (idx &gt; 0 ? array.lastIndexOf(element, idx - 1) : -1);</code><br/>
<code>idx &gt; 0</code>才进入lastIndexOf由后往前移一位进行倒查找如果<code>idx == 0</code>则直接设置<code>idx = -1</code>,循环<code>while (idx != -1)</code>就结束了。<br/>
 </p>
<h2 id="Compatibility" name="Compatibility">兼容旧环境Polyfill</h2>
<p><code>lastIndexOf</code> 在 ECMA-262 标准第 5 版被添加。因此它在不兼容该标准的浏览器中可能不被支持。你可以把下面代码添加到脚本中来使那些没有实现该方法的实现环境支持该方法。该算法是被 ECMA-262 第 5 版指定的。假定 <a href="Reference/Global_Objects/Object" title="Object 构造函数创建一个对象包装器。"><code>Object</code></a><a href="Reference/Global_Objects/TypeError" title="TypeError类型错误 对象用来表示值的类型非预期类型时发生的错误。"><code>TypeError</code></a><a href="Reference/Global_Objects/Number" title="JavaScript 的 Number 对象是经过封装的能让你处理数字值的对象。Number 对象由 Number() 构造器创建。"><code>Number</code></a><a href="Reference/Global_Objects/Math/floor" title="Math.floor() 返回小于或等于一个给定数字的最大整数。"><code>Math.floor</code></a><a href="Reference/Global_Objects/Math/abs" title="Math.abs(x) 函数返回指定数字 “x“ 的绝对值。如下:"><code>Math.abs</code></a>,以及 <a href="Reference/Global_Objects/Math/min" title="Math.min() 返回零个或更多个数值的最小值。"><code>Math.min</code></a> 拥有其初始值。</p>
<pre><code class="language-javascript">if (!Array.prototype.lastIndexOf) {
  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
    'use strict';
    if (this === void 0 || this === null) {
      throw new TypeError();
    }
    var n, k,
        t = Object(this),
        len = t.length &gt;&gt;&gt; 0;
    if (len === 0) {
      return -1;
    }
    n = len - 1;
    if (arguments.length &gt; 1) {
      n = Number(arguments[1]);
      if (n != n) {
        n = 0;
      }
      else if (n != 0 &amp;&amp; n != (1 / 0) &amp;&amp; n != -(1 / 0)) {
        n = (n &gt; 0 || -1) * Math.floor(Math.abs(n));
      }
    }
    for (k = n &gt;= 0
          ? Math.min(n, len - 1)
          : len - Math.abs(n); k &gt;= 0; k--) {
      if (k in t &amp;&amp; t[k] === searchElement) {
        return k;
      }
    }
    return -1;
  };
}
</code></pre>
<p>另外该实现是为了绝对兼容 Firefox 和 the SpiderMonkey JavaScript 引擎中的 <code>lastIndexOf</code>,包括了几种临界情况。如果你要在实际应用中使用该实现,可以忽略这些临界情况,从而简化 <code>fromIndex</code> 的计算。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范版本</th>
<th scope="col">规范状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.15" hreflang="en" lang="en" rel="noopener">ECMAScript 5.1 (ECMA-262)<br/><small lang="zh-CN">Array.prototype.lastIndexOf</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td>JavaScript 1.6 中首次定义</td>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.lastindexof" hreflang="en" lang="en" rel="noopener">ECMAScript 2015 (6th Edition, ECMA-262)<br/><small lang="zh-CN">Array.prototype.lastIndexOf</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p></p><div class="bc-data"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a><table class="bc-table bc-table-js"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th><th class="bc-platform-mobile" colspan="7"><span>Mobile</span></th><th class="bc-platform-server" colspan="1"><span>Server</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">Android webview</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome for Android</span></th><th class="bc-browser-edge_mobile"><span class="bc-head-txt-label bc-head-icon-edge_mobile">Edge Mobile</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera for Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">Safari on iOS</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th><th class="bc-browser-nodejs"><span class="bc-head-txt-label bc-head-icon-nodejs">Node.js</span></th></tr></thead><tbody><tr><th scope="row"><code>lastIndexOf</code></th><td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
12</td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
1.5</td><td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
9</td><td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
4</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td></tr></tbody></table><section class="bc-legend" id="sect1"><h3 class="offscreen" id="Legend">Legend</h3><dl><dt><span class="bc-supports-yes bc-supports">
<abbr class="bc-level bc-level-yes only-icon" title="Full support">
<span>Full support</span>
 
</abbr></span></dt><dd>Full support</dd></dl></section></div><p></p>
</div>
<h2 id="See_also" name="See_also">相关链接</h2>
<ul>
<li><a href="Reference/Global_Objects/Array/indexOf" title="indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。"><code>Array.prototype.indexOf()</code></a></li>
<li><a href="Reference/Global_Objects/TypedArray/lastIndexOf" title="lastIndexOf() 方法返回在类型数组中可以找到给定元素的最后一个索引,如果不存在,则返回-1。 方法具有与 Array.prototype.lastIndexOf() 相同的算法。 TypedArray是这里的类型化数组类型之一。"><code>TypedArray.prototype.lastIndexOf()</code></a></li>
</ul>
</article>