获取数组中的最后一项

Question

这是我到目前为止的JavaScript代码:

var linkElement = document.getElementById("BackButton");
var loc_array = document.location.href.split('/');
var newT = document.createTextNode(unescape(capWords(loc_array[loc_array.length-2]))); 
linkElement.appendChild(newT);

目前,它从URL中获取数组中倒数第二个项目.但是,我想检查数组中的最后一项是"index.html",如果是,请抓住第三项到最后一项.

Answer 1

if(loc_array[loc_array.length-1] == 'index.html'){
 //do something
}else{
 //something else.
}

如果您的服务器为"index.html"和"inDEX.htML"提供相同的文件,您还可以使用:.toLowerCase().

虽然,如果可能的话,你可能想考虑做这个服务器端:它会更干净,适用于没有JS的人.

Answer 2

不确定是否有缺点,但这似乎很简洁:

arr.slice(-1)[0] 

要么

arr.slice(-1).pop()

undefined如果数组为空,则两者都将返回.

Answer 3

使用Array.pop:

var lastItem = anArray.pop();

重要说明:这将返回最后一个元素并将 其从数组中删除

Answer 4

@chaiguy发布的简短版本:

Array.prototype.last = function() {
    return this[this.length - 1];
}

读取-1索引undefined已经返回.

编辑:

目前,偏好似乎是使用模块并避免触及原型或使用全局命名空间.

export function last(array) {
    return array[array.length - 1];
}

Answer 5

有两种选择:

var last = arr[arr.length - 1]

要么

var last = arr.slice(-1)[0]

前者更快,但后者看起来更好

http://jsperf.com/slice-vs-length-1-arr

Answer 6

可以通过该length属性获取数组中的最后一项。由于数组计数从 0 开始，因此您可以通过引用该array.length - 1项目来选择最后一项

const arr = [1,2,3,4];
const last = arr[arr.length - 1];
console.log(last); // 4

另一种选择是使用新Array.prototype.at()方法，该方法采用整数值并返回该索引处的项目。负整数从数组中的最后一项开始倒数，因此如果我们想要最后一项，我们可以传入-1

const arr = [1,2,3,4];
const last = arr.at(-1);
console.log(last); // 4

另一种选择是使用新findLast方法。您可以在此处查看该提案（目前处于第 4 阶段）

const arr = [1,2,3,4];
const last = arr.findLast(x => true);
console.log(last); // 4

另一种选择是使用Array.prototype.slice()将数组的一部分的浅拷贝返回到新数组对象中的方法。

const arr = [1,2,3,4];
const last = arr.slice(-1)[0];
console.log(last); // 4

Answer 7

表现

今天 2020.05.16 我在 MacOs High Sierra v10.13.6 上的 Chrome v81.0、Safari v13.1 和 Firefox v76.0 上对选定的解决方案进行测试

结论

• arr[arr.length-1] (D) 被推荐为最快的跨浏览器解决方案
• 可变解决方案arr.pop()(A) 和不可变解决方案( _.last(arr)L) 很快
• 解决方案 I, J 对于长字符串很慢
• 解决方案 H、K (jQuery) 在所有浏览器上最慢

细节

我测试了两种解决方案：

• 可变：A， B， C，

• 不可变：D， E， F， G， H， I， J （我的），

• 外部库不可变：K , L , M ,

两种情况

• 短字符串 - 10 个字符 - 您可以在此处运行测试
• 长字符串 - 1M 个字符 - 您可以在此处运行测试

function A(arr) {
  return arr.pop();
}

function B(arr) {  
  return arr.splice(-1,1);
}

function C(arr) {  
  return arr.reverse()[0]
}

function D(arr) {
  return arr[arr.length - 1];
}

function E(arr) {
  return arr.slice(-1)[0] ;
}

function F(arr) {
  let [last] = arr.slice(-1);
  return last;
}

function G(arr) {
  return arr.slice(-1).pop();
}

function H(arr) {
  return [...arr].pop();
}

function I(arr) {  
  return arr.reduceRight(a => a);
}

function J(arr) {  
  return arr.find((e,i,a)=> a.length==i+1);
}

function K(arr) {  
  return $(arr).get(-1);
}

function L(arr) {  
  return _.last(arr);
}

function M(arr) {  
  return _.nth(arr, -1);
}






// ----------
// TEST
// ----------

let loc_array=["domain","a","b","c","d","e","f","g","h","file"];

log = (f)=> console.log(`${f.name}: ${f([...loc_array])}`);

[A,B,C,D,E,F,G,H,I,J,K,L,M].forEach(f=> log(f));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></script>

Chrome 短字符串的示例结果

Answer 8

以下是如何获得它对原始ARRAY没有影响

a = [1,2,5,6,1,874,98,"abc"];
a.length; //returns 8 elements

如果使用pop(),它将修改您的数组

a.pop();  // will return "abc" AND REMOVES IT from the array 
a.length; // returns 7

但你可以使用它,所以它对原始数组没有影响:

a.slice(-1).pop(); // will return "abc" won't do modify the array 
                   // because slice creates a new array object 
a.length;          // returns 8; no modification and you've got you last element 

Answer 9

"最干净"的ES6方式(IMO)将是:

const foo = [1,2,3,4];
const bar = [...foo].pop();

这避免了变异foo,如.pop()将有,如果我们不使用的扩展操作.
那就是说,我也喜欢这个foo.slice(-1)[0]解决方案.

Answer 10

我宁愿使用而array.pop()不是索引.

while(loc_array.pop()!= "index.html"){
}
var newT = document.createTextNode(unescape(capWords(loc_array[loc_array.length])));

通过这种方式,您始终可以获得index.html之前的元素(假设您的数组已将孤立的index.html作为一个项目).注意:但是,您将丢失数组中的最后一个元素.

Answer 11

我想如果你只想获得没有删除的元素,更简单的是使用这个:

arr.slice(-1)[0]

顺便说一句......我没有检查性能,但我认为写起来更简单,更干净

Answer 12

TL; 博士

const [y] = x.slice(-1)

说明：根据 Mozilla 文档，
这种看起来很有趣的语法[y] = <array-or-an-object>实际上称为解构赋值

“解构赋值语法是一种 JavaScript 表达式，可以将数组中的值或对象中的属性解包为不同的变量”

在此处阅读更多相关信息

Answer 13

通过使用带负值的切片方法,可以获得数组的最后一项.

你可以阅读更多关于它在这里的底部.

var fileName = loc_array.slice(-1)[0];
if(fileName.toLowerCase() == "index.html")
{
  //your code...
}

使用pop()会改变你的数组,这并不总是一个好主意.

Answer 14

在javascript中查找数组最后一个值的多种方法

• 不影响原数组

var arr = [1,2,3,4,5];

console.log(arr.slice(-1)[0])
console.log(arr[arr.length-1])
const [last] = [...arr].reverse();
console.log(last)

let copyArr = [...arr];
console.log(copyArr.reverse()[0]);

• 修改原始数组

var arr = [1,2,3,4,5];

console.log(arr.pop())
arr.push(5)
console.log(...arr.splice(-1));

• 通过创建自己的辅助方法

let arr = [1, 2, 3, 4, 5];

Object.defineProperty(arr, 'last', 
{ get: function(){
  return this[this.length-1];
 }
})

console.log(arr.last);

Answer 15

你可以使用这种模式......

let [last] = arr.slice(-1);

虽然读起来相当不错,但请记住它会创建一个新阵列,因此它的效率低于其他解决方案,但它几乎不会成为应用程序的性能瓶颈.

Answer 16

您可以使用相对索引Array#at：

const myArray = [1, 2, 3]

console.log(myArray.at(-1))
// => 3

Answer 17

ES6 对象解构是另一种方法。

const {length, [length-1]: last}=[1,2,3,4,5]
console.log(last)

您可以使用对象解构从 Array 中提取length属性。您使用[length-1]已提取的密钥创建另一个动态密钥，并将其分配给last，全部在一行中。

Answer 18

如果想要一次性获得最后一个元素,他/她可以使用Array#splice():

lastElement = document.location.href.split('/').splice(-1,1);

这里,不需要将split元素存储在数组中,然后到达最后一个元素.如果获得最后一个元素是唯一的目标,那么应该使用它.

注意:这会通过删除最后一个元素来更改原始数组.可以将其splice(-1,1)视为pop()弹出最后一个元素的函数.

Answer 19

const [lastItem] = array.slice(-1);

带有-1的Array.prototype.slice可用于创建仅包含原始Array的最后一项的新Array，然后可以使用Destructuring Assignment使用该新Array的第一项来创建变量。

const lotteryNumbers = [12, 16, 4, 33, 41, 22];
const [lastNumber] = lotteryNumbers.slice(-1);

console.log(lotteryNumbers.slice(-1));
// => [22]
console.log(lastNumber);
// => 22

Answer 20

对于那些不怕重载数组原型的人(以及枚举屏蔽你不应该):

Object.defineProperty( Array.prototype, "getLast", {
    enumerable: false,
    configurable: false,
    writable: false,
    value: function() {
        return this[ this.length - 1 ];
    }
} );

Answer 21

jQuery解决了这个问题:

> $([1,2,3]).get(-1)
3
> $([]).get(-1)
undefined

Answer 22

这个问题已经存在了很长时间,所以我很惊讶没有人提到只是在最后一个元素之后重新开始pop().

arr.pop()arr[arr.length-1]和两者的效率完全一样高效arr.push().

因此,你可以逃脱:

---编辑[检查thePop是不是undefined在推之前] ---

let thePop = arr.pop()
thePop && arr.push(thePop)

---结束编辑---

哪个可以减少到这个(相同的速度[编辑:但不安全!]):

arr.push(thePop = arr.pop())    //Unsafe if arr empty

这是两倍慢arr[arr.length-1],但你不必满足于索引.这在任何一天都值得.

在我尝试过的解决方案中,以及执行时间单位(ETU)的倍数arr[arr.length-1]:

[方法] .............. [ETU 5 elems] ... [ETU 100万elems]

arr[arr.length - 1]      ------> 1              -----> 1

let myPop = arr.pop()
arr.push(myPop)          ------> 2              -----> 2

arr.slice(-1).pop()      ------> 36             -----> 924  

arr.slice(-1)[0]         ------> 36             -----> 924  

[...arr].pop()           ------> 120            -----> ~21,000,000 :)

最后三个选项,特别[...arr].pop()是随着阵列大小的增加而变得非常糟糕.在没有我的机器内存限制的机器上,[...arr].pop()可能保持类似120:1的比例.不过,没有人喜欢资源匮乏.

Answer 23

欧洲制造商协会 2022

通过 ECMA 2022，您将拥有一个新财产at()。要从数组或字符串中获取最后一个元素，可以使用at负索引-1。[1,2,3].at(-1)。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at

如果您喜欢像 arr.last 那样更流畅地接收最后一项，您可以为数组对象定义自己的属性。

if (!Array.prototype.hasOwnProperty("last")) {
  Object.defineProperty(Array.prototype, "last", {
    get() {
      return this.at(-1);
    }
  });
}

a = [1,2,3];
console.log(a.last);

Answer 24

我通常使用underscorejs,你可以这样做

if (_.last(loc_array) === 'index.html'){
  etc...
}

对我来说,语义比 loc_array.slice(-1)[0]

Answer 25

const lastElement = myArray[myArray.length - 1];

从性能的角度来看,这是最好的选择(比arr.slice(-1)快〜1000倍).

Answer 26

就个人而言,我会通过kuporific/kritzikratzi来回答.如果您正在使用嵌套数组,则array [array.length-1]方法会变得非常难看.

var array = [[1,2,3], [4,5,6], [7,8,9]]
?
array.slice(-1)[0]
?
//instead of 
?
array[array.length-1]
?
//Much easier to read with nested arrays
?
array.slice(-1)[0].slice(-1)[0]
?
//instead of
?
array[array.length-1][array[array.length-1].length-1]

Answer 27

我认为这应该可以正常工作。

var arr = [1, 2, 3];
var last_element = arr.reverse()[0];

只需反转数组并获取第一个元素。

编辑：如下所述，原始数组将被反转。为避免这种情况，您可以将代码更改为：

var arr = [1, 2, 3];
var last_element = arr.slice().reverse()[0];

这将创建原始数组的副本。

Answer 28

您可以last()向Array原型添加功能.

Array.prototype.last = function () {
    return this[this.length - 1];
};

Answer 29

根据 ES2022，您可以使用Array.at()方法，该方法采用整数值并返回该索引处的项目。允许正整数和负整数。负整数从数组中的最后一项开始倒数。

演示：

const href = 'www.abc.com/main/index.html';
const loc_array = href.split('/');

// To access elements from an array we can use Array.at()
console.log(loc_array.at(-1)); // This will return item at last index.

Answer 30

在ECMAScript建议 阶段1中，建议添加一个数组属性，该属性将返回最后一个元素：proposal-array-last。

句法：

arr.lastItem // get last item
arr.lastItem = 'value' // set last item

arr.lastIndex // get last index

您可以使用polyfill。

笔者建议：基思Cirkel（柴作者日期）

Answer 31

您可以将新属性getter添加到原型中,Array以便可以通过所有实例访问它Array.

Getters允许您访问函数的返回值,就像它是属性的值一样.函数的返回值当然是array(this[this.length - 1])的最后一个值.

最后,将它包装在检查last-property是否仍然存在的条件中undefined(不是由可能依赖它的另一个脚本定义的).

if(typeof Array.prototype.last === 'undefined') {
    Object.defineProperty(Array.prototype, 'last', {
        get : function() {
            return this[this.length - 1];
        }
    });
}

// Now you can access it like
[1, 2, 3].last;            // => 3
// or
var test = [50, 1000];
alert(test.last);          // Says '1000'

在IE≤8中不起作用.

Answer 32

如果您是来这里寻找的，这是更多Javascript艺术

本着另一个使用的答案的精神reduceRight()，但简短一些：

[3, 2, 1, 5].reduceRight(a => a);

它基于这样的事实，如果您不提供初始值，则会选择最后一个元素作为初始值（请在此处查看文档）。由于回调只是不断返回初始值，因此最后一个元素将是最后返回的元素。

请注意，这应该被视为Javascript艺术，绝不是我推荐的方式，主要是因为它运行时间为O（n），而且还因为它损害了可读性。

现在是认真的答案

我看到的最好方法（考虑到您希望它比更加简洁array[array.length - 1]）是：

const last = a => a[a.length - 1];

然后只需使用函数：

last([3, 2, 1, 5])

如果您要处理上面使用的匿名数组[3, 2, 1, 5]，则该函数实际上很有用，否则您将不得不实例化两次，这样效率低下且难看：

[3, 2, 1, 5][[3, 2, 1, 5].length - 1]

啊。

例如，在这种情况下，您有一个匿名数组，必须定义一个变量，但是可以last()改用：

last("1.2.3".split("."));

Answer 33

为了防止从原始数组中删除最后一项，您可以使用

Array.from(myArray).pop()

几乎所有浏览器（ES6）都受支持

Answer 34

编辑:

最近我想出了一个我现在认为最符合我需求的解决方案:

function w(anArray) {
  return {
    last() {
      return anArray [anArray.length - 1];
    };
  };
}

有了上面的定义,我现在可以说:

let last = w ([1,2,3]).last();
console.log(last) ; // -> 3

名称"w"代表"包装".您可以看到如何在"last()"之外轻松添加更多方法到此包装器.

我说"最适合我的需求",因为这允许我轻松地将任何其他类似的"辅助方法"添加到任何JavaScript内置类型.我想到的是Lisp的car()和cdr().

Answer 35

使用 Ramda 进行函数式编程

如果您使用 JS，我建议您查看 Ramda，它是一个函数式编程库（类似于 Lodash 和 Underscore，但更高级和模块化）。Ramda 通过R.last提供了此功能

import * as R from 'ramda';
R.last(['fi', 'fo', 'fum']); //=> 'fum'
R.last([]); //=> undefined

R.last('abc'); //=> 'c'
R.last(''); //=> ''

它进一步规定init，，head。列出来自（Learn You a Haskell）的怪物tail

Answer 36

无论做什么，都不要只使用reverse()!!!

有几个答案提到了，reverse但没有提到reverse修改原始数组并且不（如在其他语言或框架中）返回副本的事实。

var animals = ['dog', 'cat'];

animals.reverse()[0]
"cat"

animals.reverse()[0]
"dog"

animals.reverse()[1]
"dog"

animals.reverse()[1]
"cat"

这可能是最糟糕的调试代码！

Answer 37

通常你不应该弄乱内置类型的原型，但这里有一个黑客/快捷方式：

Object.defineProperty(Array.prototype, 'last', {
  get() {
    return this[this.length - 1]; 
  }
});

这将允许所有数组对象都有一个last属性，您可以像这样使用它：

const letters = ['a', 'b', 'c', 'd', 'e'];
console.log(letters.last); // 'e'

您不应该弄乱内置类型的原型，因为您永远不会在新的 ES 版本发布时使用，并且如果新版本使用与您的自定义属性相同的属性名称，则可能会发生各种中断。此外，这使得其他人很难遵循你的代码，尤其是对于加入团队的人来说。您可以将属性设置为您知道 ES 版本永远不会使用的东西，例如，listLastItem但这由开发人员自行决定。

或者您可以使用一个简单的方法：

const getLast = (list) => list[list.length - 1];
const last = getLast([1,2,3]); // returns 3

Answer 38

更新 - 2021 年 10 月 27 日（Chrome 97+）

提案现已Array.prototype.findLast进入第三阶段！

使用方法如下：

const array = [1, 2, 3, 4, 5];

const last_element = array.findLast((item) => true);
console.log(last_element);

您可以在这篇 V8 博客文章中阅读更多内容。

您可以在“Chrome 新增功能”系列中找到更多内容。

Answer 39

我认为最简单,效率最低的方法是:

var array = ['fenerbahce','arsenal','milan'];
var reversed_array = array.reverse(); //inverts array [milan,arsenal,fenerbahce]
console.log(reversed_array[0]) // result is "milan".

Answer 40

使用 ES6/ES2015 扩展运算符 (...)，您可以执行以下操作。

const data = [1, 2, 3, 4]
const [last] = [...data].reverse()
console.log(last)

请注意，使用扩展运算符和反向操作我们没有改变原始数组，这是获取数组最后一个元素的纯粹方法。

Answer 41

我建议创建辅助函数并每次重用它,你需要它.让我们的功能更加通用,不仅可以获得最后一项,还可以获得最后一项,以此类推.

function last(arr, i) {
    var i = i || 0;
    return arr[arr.length - (1 + i)];
}

用法很简单

var arr = [1,2,3,4,5];
last(arr);    //5
last(arr, 1); //4
last(arr, 9); //undefined

现在,让我们解决原始问题

抓住第二个到最后一个项目表单数组.如果loc_array中的最后一项是"index.html",请抓住第三项到最后一项.

下一行完成了这项工作

last(loc_array, last(loc_array) === 'index.html' ? 2 : 1);

所以,你需要重写

var newT = document.createTextNode(unescape(capWords(loc_array[loc_array.length-2]))); 

通过这种方式

var newT = document.createTextNode(unescape(capWords(last(loc_array, last(loc_array) === 'index.html' ? 2 : 1)))); 

或使用其他变量来提高可读性

var nodeName = last(loc_array, last(loc_array) === 'index.html' ? 2 : 1);
var newT = document.createTextNode(unescape(capWords(nodeName)));

Answer 42

使用 lodash _.last(array)获取数组的最后一个元素。

data = [1,2,3]
last = _.last(data)
console.log(last)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Answer 43

怎么样像下面这样：

if ('index.html' === array[array.length - 1]) {  
   //do this 
} else { 
   //do that 
}

如果使用下划线或Lodash，您可以使用_.last()，所以像：

if ('index.html' === _.last(array)) {  
   //do this 
} else { 
   //do that 
}

或者您可以创建自己的最后一个函数：

const _last = arr => arr[arr.length - 1];

并使用它：

if ('index.html' === _last(array)) {  
   //do this 
} else { 
   //do that 
}

Answer 44

只是在这里放另一个选择。

loc_array.splice(-1)[0] === 'index.html'

我发现上述方法更简洁，在线更简短。请随意尝试一下。