JavaScript >> Javascript 文檔 >  >> JavaScript

JavaScript:獲取列表中的最後一個元素

簡介

獲取列表/數組的最後一個元素是一種常見的操作。在本教程中,我們將了解如何獲取 JavaScript 數組/列表中的最後一個元素 .

JavaScript 是一種弱類型無類型 語言,這意味著在使用它之前不需要聲明變量的類型,因為JavaScript通過讀取變量的值來確定類型。

var x = "something" 被評估,並且 x 分配給 String 類型。相同的過程也適用於列表 - 您無需定義列表的類型,只需用值填充列表即可。

列表是通過將元素放在方括號([] ),其中元素可以是異構的(不必是同一類型):

var myList = ["Peter", "Smith", 25, 23, "Random String", 10]

JavaScript 有很多內置的方法可以用來操作像這樣的列表。以下是我們將用來獲取 last 的那些 元素。

使用 length 獲取最後一個元素

length 列表的屬性表示列表中的元素個數:

console.log(myList.length)

JavaScript 中數組/列表中的元素索引與其他語言非常相似。我們可以通過在方括號 [] 中傳遞一個元素,根據它的索引來訪問它 ,引用數組。最後一個元素的索引為 length-1 .

length field 只返回元素的保存值——這是一種快速、高效且廉價的操作。獲取 JavaScript 數組/列表的最後一個元素的最佳方法是:

var lastElement = myList[myList.length - 1];
console.log(lastElement);

這導致:

10

使用 pop() 獲取最後一個元素

pop() 方法返回最後一個元素 集合,但在此過程中將其刪除。不過,如果我們使用 spread 來自 ES6 的運算符 - 我們可以通過臨時將列表複製到內存中並執行 pop() 來避免此功能 在副本上,保持原始列表不變。

pop() 方法

讓我們pop() 列表中的最後一個元素:

var lastElement = myList.pop();
console.log(lastElement)
console.log(myList)

這會導致列表中缺少該元素:

10
["Peter", "Smith", 25, 23, "Random String"]

如果您不需要原始列表保持完整,則可以從中彈出元素,但如果您確實需要原始列表,則可以製作副本並 pop() 來自它。

pop() 使用 ES6 的擴展運算符

ES6 是 EcmaScript6 的縮寫 ,這是一個 JavaScript 標準 用於使 JavaScript 編程更容易(代碼更少​​,但做得更多)。

它成立於 1997 年,第一次重大突破是在 2015 年,採用 ES6 標準(或 EcmaScript2015)。最新版本是第 11 版,於 2020 年開發。所有版本都旨在使 JavaScript 編碼更容易(使用新的語法規則、新的關鍵字等)。

我們可以在這裡利用的特性是 spread operator (... )。

在其他功能中,擴展運算符 可以復制列表/數組:

[...myList]

這會生成一個新列表,其元素與 myList 相同 .話雖如此 - 我們可以 pop() 來自新列表而不是原始列表:

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

console.log([...myList].pop())
console.log(myList)

這導致:

10
["Peter", "Smith", 25, 23, "Random String", 10]

注意: 這可能寫起來很方便,但不是最便宜的解決方案,因為它複製了一個列表。對於小列表,它不會降低性能,但是對於更長的列表,這是一種簡單地獲取最後一個元素的低效方法。

使用 slice() 獲取最後一個元素

slice(a, b) 方法從點 a 'slices' 數組 指向 b-1 - 鑑於 ab 是整數。以更數學的方式,您可以像這樣查看切片:[a, b) - a 處的元素 包括在內,而 b 處的元素 不是:

console.log(myList.slice(1, 4))

這會產生原始數組的切片:

["Smith", 25, 23]

slice() 方法還接受負索引 - 它向後迭代集合。所以如果我們 slice(-4, -1) ,迭代將從後面的第三個元素開始,並在最後一個元素的前一個結束(因為 slice 不包括 b 點)。

這允許我們通過 slice() 從列表末尾簡單地包含最後一個元素 :

console.log(myList.slice(-1))

結果是:

[10]

這仍然是一個數組,所以要獲取這個元素,我們使用 myList.slice(-1)[0] 訪問它 - 這將返回我們的元素:

console.log(myList.slice(-1)[0])

注意: slice() 最好在您要檢索最後一個 N 時使用 數組的元素,而不是一個,因為您可以簡單地使用 length-1 而是。

使用 reverse() 獲取最後一個元素

reverse() 方法就地反轉列表。最後一個元素將成為第一個,反之亦然:

console.log(myList.reverse())

輸出將是:

[10, 'Random String', 23, 25, 'Smith', 'Peter']

現在我們的元素是第一個,所以我們可以使用 myListReversed[0] 訪問它 .

注意: 反轉數組/列表也是一項潛在的非常昂貴的操作。如果您只想訪問最後一個元素,請避免反轉集合。如果您要反轉它 - 您可以像這樣訪問元素。如果沒有,參考第一種使用length-1的方法 .

結論

其中最便宜、最有效且可能最直觀的方法是第一個 - myList[myList.length()-1] .這是你大部分時間都會用到的。

使用 pop() 從列表中刪除元素並返回它。如果您想要刪除 元素 - 這是您要使用的方法,否則,您必須手動刪除元素。

slice() 給了我們一個切片,如果我們想獲得最後一個 N,這是一個很好的方法 元素。

reverse() 就地反轉數組,如果您只想獲取一個元素,則應避免使用。不過,如果您要反轉數組,這不會花費任何額外費用。


Tutorial JavaScript 教程
  1. Javascript 中的行尾

  2. 為初學者學習 Node.js

  3. 一種實用的 Web 開發方法。

  4. try/catch 塊在 express js 上不起作用

  5. 製作您的虛擬化列表

  6. Mongoose Populate() 以最簡單的方式 |如何將集合導入到 Mongodb 中的另一個模式中

  7. 了解 JavaScript 中的轉換器

  1. 在 JavaScript 中將日期轉換為另一個時區

  2. 使用 Leaflet、HERE、VueJs #EN 快速交付折線

  3. React Js 中的 Windows 11 💻 🌈

  4. 帶有 requestAnimationFrame 的流暢動畫

  5. 我為前端開發人員提供的 10 個最佳 vs 代碼擴展

  6. 你可能應該學習 TypeScript

  7. 如何在 Alpine JS 中對最後一個值進行迭代?

  1. 響應式非畫布菜單

  2. 功能標誌與分支

  3. JavaScript-30-Day-15

  4. GREYOS - 世界上第一個元操作系統