在 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