JavaScript 中獲取數(shù)組最后一個(gè)元素方法匯總
當(dāng)需要從 JavaScript 中的數(shù)組中獲取最后一個(gè)元素時(shí),有多種選擇,本文將提供 3 種可用方法。
1. 數(shù)組 length 屬性
??length?? 屬性返回?cái)?shù)組中元素的數(shù)量。從數(shù)組的長(zhǎng)度中減去 ??1?? 得到數(shù)組最后一個(gè)元素的索引,使用它可以訪問(wèn)最后一個(gè)元素。從長(zhǎng)度中減去 ??1?? 的原因是,在 JavaScript 中,數(shù)組索引編號(hào)從 ??0?? 開(kāi)始。即第一個(gè)元素的索引將為 ??0??。因此,最后一個(gè)元素的索引將為數(shù)組的 ??length-1??。
const arrayTest = ["第一個(gè)元素", "第二個(gè)元素", "最后一個(gè)元素"]; const length = arrayTest.length; const lastValue = arrayTest[length - 1]; console.log(lastValue); // 最后一個(gè)元素
2. 數(shù)組 slice 方法
??slice()?? 方法從一個(gè)數(shù)組中返回特定的元素,作為一個(gè)新的數(shù)組對(duì)象。此方法選擇從給定開(kāi)始索引開(kāi)始到給定結(jié)束索引結(jié)束的元素,不包括結(jié)束索引處的元素。??slice()?? 方法不會(huì)修改現(xiàn)有數(shù)組,提供一個(gè)索引值返回該位置的元素,負(fù)索引值從數(shù)組末尾計(jì)算索引。數(shù)組匹配的解構(gòu)賦值用于從 ??slice()?? 方法返回的數(shù)組中獲取元素。
const arrayTest = ["第一個(gè)元素", "第二個(gè)元素", "最后一個(gè)元素"]; const length = arrayTest.length; const [lastValue] = arrayTest.slice(-1); console.log(lastValue); // 最后一個(gè)元素
3. 數(shù)組 pop 方法
??pop()?? 方法從數(shù)組中刪除最后一個(gè)元素并將其返回,此方法會(huì)修改原來(lái)的數(shù)組。如果數(shù)組為空,則返回 ??undefined?? 并且不修改數(shù)組。
const arrayTest = ["第一個(gè)元素", "第二個(gè)元素", "最后一個(gè)元素"]; const length = arrayTest.length; const lastValue = arrayTest.pop(); console.log(lastValue); // 最后一個(gè)元素 console.log(arrayTest); // [ '第一個(gè)元素', '第二個(gè)元素' ]
性能比較
讓按性能比較這 3 種方法。
const arrayTest = ["第一個(gè)元素", "第二個(gè)元素", "最后一個(gè)元素"];
console.time("==> length");
const length = arrayTest.length;
let lastValue = arrayTest[length - 1];
console.log(lastValue);
console.timeEnd("==> length");
console.time("====> slice");
let [lastValue1] = arrayTest.slice(-1);
console.log(lastValue1);
console.timeEnd("====> slice");
console.time("======> pop");
let lastValue2 = arrayTest.pop();
console.log(lastValue2);
console.timeEnd("======> pop");輸出的結(jié)果如下:
最后一個(gè)元素 ==> length: 6.38ms 最后一個(gè)元素 ====> slice: 0.038ms 最后一個(gè)元素 ======> pop: 0.033ms
總結(jié)
??pop()?? 方法是最快的,如果可以修改數(shù)組,則可以使用它。如果你不想改變數(shù)組,可以使用 ??slice()?? 方法。利用數(shù)組 length 屬性的方法是最慢的,屬于是獲取數(shù)組最后一個(gè)元素的最常用方法。
到此這篇關(guān)于JavaScript 中獲取數(shù)組最后一個(gè)元素方法匯總的文章就介紹到這了,更多相關(guān)JavaScript獲取數(shù)組最后一個(gè)元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
使用swiper自定義分頁(yè)點(diǎn)擊跳轉(zhuǎn)指定頁(yè)面
這篇文章主要介紹了使用swiper自定義分頁(yè)點(diǎn)擊跳轉(zhuǎn)指定頁(yè)面方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04
ExtJs使用自定義插件動(dòng)態(tài)保存表頭配置(隱藏或顯示)
這篇文章主要介紹了ExtJs使用自定義插件動(dòng)態(tài)保存表頭配置(隱藏或顯示) ,需要的朋友可以參考下2018-09-09
javascript實(shí)現(xiàn)圖片循環(huán)漸顯播放的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片循環(huán)漸顯播放的方法,涉及javascript操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
jQuery實(shí)現(xiàn)動(dòng)態(tài)文字搜索功能
本文主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)文字搜索功能的分析過(guò)程,文章底部提供了完整的代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01
JS函數(shù)arguments數(shù)組獲得實(shí)際傳參數(shù)個(gè)數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS函數(shù)arguments數(shù)組獲得實(shí)際傳參數(shù)個(gè)數(shù)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05

