迹忆客 专注技术分享

数组是任何编程语言的重要组成部分，因为它以有序的方式保存了许多元素。它们中的所有这些元素都通过索引访问。在 JavaScript 中，数组是保存特定键（数字键）上的值的常规对象。本文将介绍如何在 JavaScript 中获取数组的第一个元素。

JavaScript 提供了各种方法来获取第一个元素。让我们学习这些方法。

它是 JavaScript 提供的内置数组方法，用于查找值与指定条件匹配的元素。

Array.prototype.find(element => $condition)

返回与给定条件匹配的第一个值。如果没有条件匹配，它将返回 undefined。

示例代码：

const arrayElements = [5, 10, 0, 20, 45];
const firstElement = arrayElements.find(element => element != undefined);
console.log(firstElement);

输出：

5

如前所述，每个数组元素都有一个分配给它的唯一索引。数组中的数字 key/index 以 0 开头。使用此索引，你可以在 JavaScript 中检索数组的第一个元素。

Array.prototype[$index]

它返回指定索引的元素。

示例代码：

const arrayElements = [5, 10, 0, 20, 45];
const firstElement = arrayElements[0];
console.log(firstElement);

输出：

5

它是 JavaScript 提供的内置数组方法，它移除数组的第一个元素并返回移除的元素。这种数组方法的唯一问题是它会改变/修改原始数组。

Array.prototype.shift()

它返回数组的第一个元素，该元素从原始数组中删除。如果数组是空数组，它将返回 undefined。

示例代码：

const arrayElements = [5, 10, 0, 20, 45];
const firstElement = arrayElements.shift(0);
console.log(firstElement);
console.log(arrayElements);

输出：

5
Array [10, 0, 20, 45]

它是一种 JavaScript 内置数组方法，可过滤掉所有满足给定条件的元素。它将创建匹配元素数组的副本。find() 和 filter() 之间的唯一区别在于，一旦找到第一个匹配元素，首先停止遍历，而稍后将继续直到数组的最后一个元素。由于遍历属性，如果数组大小较大，则效率较低。

Array.prototype.filter(element => $condition)

返回包含与给定条件匹配的元素的新数组。

示例代码：

const arrayElements = [5, 10, 0, 20, 45];
const firstElement = arrayElements.filter(element => element!= undefined).shift();
console.log(firstElement);
console.log(arrayElements);

输出：

5
Array [5, 10, 0, 20, 45]

析构赋值是 JavaScript 中一种非常强大的语法，它允许将数组元素或对象属性解包到不同的变量中。

[ $variable1, $variable2, ...$restVariables ] = [10, 20, 30, 40];
{ $variable1 } = { key: value };

它返回新变量，你可以通过该变量访问数组或对象的值。

示例代码：

const arrayElements = [5, 10, 0, 20, 45];
let [firstElement] = arrayElements;
console.log(firstElement);

输出：

5