在 JavaScript 中获取数组的第一个元素

Shraddha Paghdar 2023年1月30日 2022年5月11日
  1. 在 JavaScript 中使用 find() 获取第一个数组元素
  2. 在 JavaScript 中使用 array[index] 获取第一个数组元素
  3. 在 JavaScript 中使用 shift() 获取第一个数组元素
  4. 在 JavaScript 中使用 filter() 获取第一个数组元素
  5. 在 JavaScript 中使用解构赋值获取第一个数组元素
在 JavaScript 中获取数组的第一个元素

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

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

在 JavaScript 中使用 find() 获取第一个数组元素

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

JavaScript 中 find() 的语法

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

参数

  • $condition:这是一个强制性参数。用户可以传递与数组元素相关的任何条件,它会尝试找出第一个满足条件的匹配元素。

返回值

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

示例代码:

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

输出:

5

在 JavaScript 中使用 array[index] 获取第一个数组元素

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

JavaScript 中 array[index] 的语法

Array.prototype[$index]

参数

  • $index:它是一个强制参数,只接受指定要检索的元素索引的整数值。

返回值

它返回指定索引的元素。

示例代码:

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

输出:

5

在 JavaScript 中使用 shift() 获取第一个数组元素

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

JavaScript 中 shift() 的语法

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 中使用 filter() 获取第一个数组元素

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

JavaScript 中 filter() 的语法

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

参数

  • $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 中使用解构赋值获取第一个数组元素

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

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
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相关文章 - JavaScript Array