获取数组中的第一个元素

Question

如何从数组中获取第一个元素：

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

我试过了：

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

但它会返回[object Object]。

所以我需要从数组中获取第一个元素{@ 1}}。

Answer 1

像这样

alert(ary[0])

Answer 2

为什么你jQuery-ifying一个vanilla JavaScript数组？使用标准JavaScript！

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

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array

另外，

Source，bobince提供

Answer 3

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

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

yourArray[0]

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

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

在这种情况下，您可以使用shift()方法获取第一个元素，但要小心这个方法修改原始数组（删除第一个项目并返回它）。因此，阵列的长度减少了一个。 此方法可用于您只需要获取第一个元素的内联案例，但您不关心原始数组。

yourArray.shift()

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

在某些情况下，第一个元素已被删除，例如，删除yourArray [0]，将数组留下＆＃34; hole＆＃34;。现在[0]中的元素是未定义的，但是你想得到第一个＆＃34;现有的＆＃34;元件。我见过很多这方面的现实案例。

所以，假设我们不知道数组和第一个键（或者我们知道有漏洞），我们仍然可以得到第一个元素。

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

find（）的优点是它的效率，因为它在达到满足条件的第一个值时退出循环（更多关于此内容）。 （您可以自定义条件以排除null或其他空值）

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

我还希望在此处添加filter()作为首选＆＃34;修复＆＃34;副本中的数组然后获取第一个元素，同时保持原始数组完整（未修改）。

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

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

警告filter（）实际上不是一种有效的方式（filter（）遍历所有元素）并创建另一个数组。例如，在小型阵列上使用它很好，因为性能影响很小，更接近于使用forEach。

（我看到有些人建议使用for ... in循环来获取第一个元素，但我建议不要使用此方法，因为for...in should not be used to iterate over an Array where the index order is important因为它不能保证订单，尽管你可以认为浏览器主要是尊重顺序。顺便说一句，因为你不能解决这个问题，因为你无法打破它并且它会贯穿所有元素。你最好使用一个简单的for循环并通过检查键/值

find（）和filter（）都保证元素的顺序，因此可以安全地使用，如上所述。

Answer 4

如果删除了第一个元素，则索引0的元素可能不存在：

let a = ['a', 'b', 'c'];
delete a[0];

for (let i in a) {
  console.log(i + ' ' + a[i]);
}

更好的方法来获得没有jQuery的第一个元素：

function first(p) {
  for (let i in p) return p[i];
}

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

Answer 5

如果您想保留可读性，您可以随时向Array.protoype添加第一个功能：

Array.prototype.first = function () {
    return this[0];
};

然后你可以轻松找回第一个元素：

[1, 2, 3].first();
> 1

Answer 6

使用ES6解构

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

与

相同

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

Answer 7

如果无法保证从索引零填充数组，则可以使用Array.prototype.find()：

var elements = []
elements[1] = 'foo'
elements[2] = 'bar'

var first = function(element) { return !!element }    
var gotcha = elements.find(first)

console.log(a[0]) // undefined
console.log(gotcha) // 'foo'

Answer 8

array.find(e => !!e);  // return the first element 

因为＆＃34;发现＆＃34;返回与过滤器匹配的第一个元素＆amp;＆amp; !!e匹配任何元素。

注意仅当第一个元素不是＆＃34; Falsy＆＃34; ：null，false，NaN，""，0，undefined

Answer 9

尝试alert(ary[0]);。

Answer 10

仅在您使用underscore.js（http://underscorejs.org/）的情况下才能执行以下操作：

_.first(your_array);

Answer 11

适用于数组的方法，也适用于对象（请注意，对象没有保证订单！）。

我最喜欢这种方法，因为原始数组没有被修改。

// In case of array
var arr = [];
arr[3] = 'first';
arr[7] = 'last';
var firstElement;
for(var i in arr){
    firstElement = arr[i];
    break;
}
console.log(firstElement);  // "first"

// In case of object
var obj = {
    first: 'first',
    last: 'last',
};

var firstElement;

for(var i in obj){
    firstElement = obj[i];
    break;
}

console.log(firstElement) // First;

Answer 12

我知道从其他语言到JavaScript的人们正在寻找head()或first()之类的东西来获取数组的第一个元素，但是如何做到这一点？

想象一下，您有下面的数组：

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

在JavaScript中，您可以简单地执行以下操作：

const first = arr[0];

或更整洁的新方法是：

const [first] = arr;

但是您也可以简单地编写函数，例如...

function _first(arr) {
   if(!Array.isArray(arr)) return;
   return arr[0];
}

如果使用下划线，则有一些功能可以完成与您期望的功能相同的功能：

_.first 

_.head

_.take

Answer 13

使用过滤器查找数组中的第一个元素：

function first<T>(arr: T[], filter: (v: T) => boolean): T {
    let result: T;
    return arr.some(v => { result = v; return filter(v); }) ? result : undefined;
}

简单的javascript：

function first(arr, filter) {
    var result;
    return arr.some(function (v) { result = v; return filter(v); }) ? result : undefined;
}

同样，indexOf：

在打字稿中：

function indexOf<T>(arr: T[], filter: (v: T) => boolean): number {
    let result: number;
    return arr.some((v, i) => { result = i; return filter(v); }) ? result : undefined;
}

简单的javascript：

function indexOf(arr, filter) {
    var result;
    return arr.some(function (v, i) { result = i; return filter(v); }) ? result : undefined;
}

Answer 14

对于那些只关心真相的人

ary.find(Boolean);

Answer 15

当存在多个匹配时，JQuery的.first（）用于获取与给予jquery的css选择器匹配的第一个DOM元素。

你不需要jQuery来操作javascript数组。

Answer 16

您可以这样做：

let first = array.find(() => true);

或者如果您只关心真实的元素：

let first = array.find(e => e);

关心可读性，而又不依赖数字发生率，我在Array.protoype上添加了Object​.define​Property()函数，方法是将其定义为{{3} }，它直接缓解了修改内置Array对象原型的陷阱（explained here）。

性能相当不错（first()在第一个元素之后停止），但它不是完美的或无法普遍访问（仅ES6）。有关更多背景信息，请阅读@Selays answer。

find()

然后检索您可以做的第一个元素：

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

要查看其运行中的代码段：

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

> 'a'

Answer 17

你也可以使用.get（0）：

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

获取数组的第一个元素。

Answer 18

为什么不考虑阵列可能为空的时间？

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
first = (array) => array.length ? array[0] : 'no items';
first(ary)
// output: first

var ary = [];
first(ary)
// output: no items

Answer 19

在ES2015及更高版本中，使用数组解构：

const arr = [42, 555, 666, 777]
const [first] = arr
console.log(first)

Answer 20

当数组索引从零开始时，前面的示例很有效。 thomax's answer不依赖于从零开始的索引，而是依赖于我无法访问的Array.prototype.find。使用jQuery $.each的以下解决方案在我的案例中表现良好。

let haystack = {100: 'first', 150: 'second'},
    found = null;

$.each(haystack, function( index, value ) {
    found = value;  // Save the first array element for later.
    return false;  // Immediately stop the $.each loop after the first array element.
});

console.log(found); // Prints 'first'.

Answer 21

@thomax的答案非常好，但如果数组中的第一个元素为false或false-y（0，空字符串等），则会失败。最好只为undefined返回true：

const arr = [];
arr[1] = '';
arr[2] = 'foo';

const first = arr.find((v) => { return (typeof v !== 'undefined'); });
console.log(first); // ''

Answer 22

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

Answer 23

ES6 Spread运算符

var arr = ['first', 'second', 'third', 'fourth', 'fifth'];
var first = [...arr].shift();        
console.log(first);

Answer 24

只需使用ary.slice(0,1).pop();

在

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

console.log("1º "+ary.slice(0,1).pop());
console.log("2º "+ary.slice(0,2).pop());
console.log("3º "+ary.slice(0,3).pop());
console.log("4º "+ary.slice(0,4).pop());
console.log("5º "+ary.slice(0,5).pop());
console.log("Last "+ary.slice(-1).pop());

array.slice（START，END）.pop（）;

Answer 25

使用 ES6。

let arr = [22,1,4,55,7,8,9,3,2,4];

let {0 : first ,[arr.length - 1] : last} = arr;
console.log(first, last);

或

let {0 : first ,length : l, [l - 1] : last} = [22,1,4,55,7,8,9,3,2,4];
console.log(first, last);

Answer 26

您可以轻松实现 lodash _.head。

var arr = ['first', 'second', 'third', 'fourth', 'fifth'];
console.log(_.head(arr));

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

Answer 27

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

console.log(Object.keys(ary)[0]);

创建任何Object数组（req），然后只需执行Object.keys(req)[0]以选择Object数组中的第一个键。

Answer 28

如果您将视图函数链接到数组，例如

array.map(i => i+1).filter(i => i > 3)

想要在这些功能之后的第一个元素，你可以简单地添加.shift()它不会修改原始的array，这是一个更好的方式，然后array.map(i => i+1).filter(=> i > 3)[0]

如果你想要一个数组的第一个元素而不修改原文，你可以使用array[0]或array.map(n=>n).shift()（没有地图你会修改原文。在这种情况下，我会建议{{ 1}}版本。

Answer 29

声明原型以获取 第一个数组 元素：

Array.prototype.first = function () {
   return this[0];
};

然后将其用作：

var array = [0, 1, 2, 3];
var first = array.first();
var _first = [0, 1, 2, 3].first();

或简单地说:(

first = array[0];

Answer 30

用它来分割javascript中的字符。

var str = "boy, girl, dog, cat";
var arr = str.split(",");
var fst = arr.splice(0,1).join("");
var rest = arr.join(",");

Answer 31

@NicoLwk您应该使用splice删除元素，这会将您的数组移回。所以：

var a=['a','b','c'];
a.splice(0,1);
for(var i in a){console.log(i+' '+a[i]);}

Answer 32

ES6 easy：

let a = []
a[7] = 'A'
a[10] = 'B'

let firstValue = a.find(v => v)
let firstIndex = a.findIndex(v => v)

Answer 33

我更喜欢使用数组解构

const [first, second, third] = ["Laide", "Gabriel", "Jets"];
console.log(first);  // Output: Laide
console.log(second); // Output: Gabriel
console.log(third);  // Output: Jets

Answer 34

您可以组合使用reverse和pop。想法是颠倒数组，然后颠倒pop，这将使您获得该数组中的最后一项。

请注意，因为这会修改原始数组。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var first = fruits.reverse().pop();
  
console.log('First element -->', first);
console.log('Original array -->', fruits);