如何获取数组的第一个元素?

IT技术 javascript arrays
2021-02-07 21:29:42

你如何从这样的数组中获取第一个元素:

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];

我试过这个:

alert($(ary).first());

但它会返回[object Object]所以我需要从数组中获取第一个元素,它应该是 element 'first'

6个回答

像这样

alert(ary[0])
这假设数组中的第一个元素的索引始终为 0。你知道他们对假设的看法......
2021-03-30 21:29:42
@Andy 没有任何假设,因为 OP 的问题非常明确和具体。
2021-04-02 21:29:42
@MichielvanderBlonk 我只是指出一些用户可能不期望的边缘情况。
2021-04-02 21:29:42
@Petah 该代码没有任何问题。它只是显示未定义,因为这是 a[0] 的值,它实际上是数组中的第一项。如果你想让它显示 foo 你应该跳过所有未定义的值,但它不会是数组中的第一项。
2021-04-09 21:29:42
var a = []; a[7] = 'foo'; alert(a[0]);
2021-04-10 21:29:42

你为什么要用 jQuery 化一个普通的 JavaScript 数组?使用标准的 JavaScript!

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
alert(ary[0]);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

还, 需要更多的jQuery

来源,由bobince 提供

第一个链接坏了。它应该被developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /...取代吗?
2021-03-23 21:29:42
@Henke 是的。谢谢你的提示。请随意建议将来对此类事情进行编辑!:)
2021-03-26 21:29:42
请参阅此答案,了解为什么此解决方案并不总是有效。
2021-03-29 21:29:42
如果预先设置了数组键,它将不起作用。假设键总是从零开始是错误的。
2021-04-04 21:29:42

下面的一些方法针对不同的情况。

在大多数正常情况下,访问第一个元素的最简单方法是通过

yourArray[0]

但这需要您检查 [0] 是否确实存在。

在现实世界中,您不关心原始数组,也不想检查索引是否存在,只想获取第一个元素或未定义的内联元素。

在这种情况下,您可以使用shift()方法来获取第一个元素,但要注意此方法会修改原始数组(删除第一项并返回它)。因此数组的长度减一。此方法可用于内联情况,您只需要获取第一个元素,但不关心原始数组。

yourArray.shift()

要知道的重要一点是,如果您的数组以 [0] 索引开头,则上述两个只是一个选项。

在某些情况下,第一个元素已被删除,例如删除 yourArray[0] 使您的数组带有“孔”。现在 [0] 处的元素只是未定义,但您想获得第一个“现有”元素。我见过很多这样的现实世界案例。

所以,假设我们不知道数组和第一个键(或者我们知道有洞),我们仍然可以获得第一个元素。

您可以使用find()来获取第一个元素。

find() 的优点是它的效率,因为它在达到满足条件的第一个值时退出循环(更多信息见下文)。(您也可以自定义条件以排除空值或其他空值)

var firstItem = yourArray.find(x=>x!==undefined);

我还想在此处包含filter()作为首先“修复”副本中的数组的选项,然后在保持原始数组完整(未修改)的同时获取第一个元素。

在这里包含 filter() 的另一个原因是它存在于 find() 之前并且许多程序员已经在使用它(它是 ES5,而 find() 是 ES6)。

var firstItem = yourArray.filter(x => typeof x!==undefined).shift();

警告 filter() 并不是真正有效的方式(filter() 遍历所有元素)并创建另一个数组。可以在小型阵列上使用,因为性能影响很小,例如更接近于使用 forEach。

(我看到有些人建议使用 for...in 循环来获取第一个元素,但我建议不要使用这种方法for...in 不应该用于迭代索引顺序很重要的数组,因为它没有尽管您可以争辩说浏览器大多尊重顺序,但不保证顺序。顺便说一句,forEach 并没有像许多人建议的那样解决问题,因为您无法打破它并且它将贯穿所有元素。您最好使用简单的 for循环并通过检查键/值

find() 和 filter() 都保证元素的顺序,因此可以安全地使用如上。

@Selay 取决于解释器的特定内部结构。
2021-04-01 21:29:42
如果你使用yourArray.map(n=>n).shift()它会返回第一个项目而不修改原来的......不知道这是否是最好的方法但是如果你用 .map().filter().some().shift() 链接一个数组就可以了..否则我会用yourArray[0]
2021-04-01 21:29:42
为什么不只是在之后取消移动数组,例如: var element = yourArray.shift(); yourArray.unshift(element);
2021-04-02 21:29:42
因为这是非常低效和坏事。您可以以非常有效的方式获取第一个元素。shift 和 unshift 都会做一些检查并遍历整个数组来完成任务,因为当您在开头删除或添加新元素时,所有其他索引都应该被移动。这就像你有一辆满载人的公共汽车,当后座的人想下车时,你从前门把公共汽车排空,然后让他们重新上车。
2021-04-09 21:29:42
@Michiel van der Blonk 你能告诉我你提到的是哪个口译员做的吗?我很感兴趣。我所知的所有实现都使用循环和复制。这就是 JavaScript 数组的工作方式。您不能简单地删除第一个元素,因为剩余的数组现在从 1 开始(删除了位置 0 的元素),您需要修复它。不管你有什么内部实现,你都无法创造奇迹。
2021-04-09 21:29:42

使用 ES6 解构

let [first] = [1,2,3];

这与

let first = [1,2,3][0];
@leonheess 我猜?对我来说,该数组仍然从 开始0,但您插入了一个undefined值。🤷‍♂️
2021-03-19 21:29:42
@leonheess 所有 JavaScript 数组都从[0]索引开始
2021-03-20 21:29:42
如果您的数组以 [0] 索引开头,则添加 Destructing 只是一个选项可能是相关的。
2021-03-28 21:29:42
@Jonathan 这取决于你如何定义开始。我可以创建这样的数组[,'a','b','c']我认为它从索引 1 开始。
2021-04-01 21:29:42
@ChristianBonato 我认为你误会了我或误读了我的评论。我同意你的看法。引用的文字来自乔纳森的评论😅顺便说一句:使用我的解决方案,无论数组从哪里开始,您都会获得第一个元素。
2021-04-07 21:29:42

你可以只使用find()

const first = array.find(Boolean)

或者如果你想要第一个元素,即使它是假的

const first = array.find(e => true)

加倍努力:

如果您关心可读性但不想依赖数字发生率,您可以通过定义它来添加一个first()- 函数,Array.prototypeObject​.define​Property()减轻直接修改内置 Array 对象原型的陷阱(解释here)。

性能相当不错(find()在第一个元素之后停止),但它并不完美或普遍可访问(仅限 ES6)。有关更多背景信息,请阅读@Selays 答案

Object.defineProperty(Array.prototype, 'first', {
  value() {
    return this.find(e => true)     // or this.find(Boolean)
  }
})

要检索第一个元素,您现在可以执行以下操作:

const array = ['a', 'b', 'c']
array.first()

> 'a'

片段以查看它的运行情况:

Object.defineProperty(Array.prototype, 'first', {
  value() {
    return this.find(Boolean)
  }
})

console.log( ['a', 'b', 'c'].first() )

这是最好的和最新的答案。我正要在这里发同样的帖子,但在我看到你的之后:)
2021-03-22 21:29:42
如果在未来版本的语言中添加 find() 会发生什么?:-) 上面的代码片段不会破坏它吗?
2021-03-29 21:29:42
@Bogdan他们何时添加find()是什么意思find()长期以来一直是语言的一部分。这就是上述代码段有效的原因。
2021-04-04 21:29:42
哦。抱歉有点累了我第一次提到的睡得不多。
2021-04-06 21:29:42
@Bogdan 它仍然可以正常工作,但会覆盖first()该语言的潜在未来方法
2021-04-13 21:29:42