在 javascript 中如何快速獲取數(shù)組指定位置的元素
前言
在 JavaScript 中如果我們需要獲取一個(gè)數(shù)組指定位置的元素,通常情況下,我們一般采用以下方法:
1.通過(guò)下標(biāo)直接獲取指定元素:arr[index], index 為非負(fù)數(shù)。
let arr = [1, 4, 5, 8, 10] // 獲取數(shù)組的第一個(gè)元素 let num1 = arr[0] // 獲取數(shù)組的最后一個(gè)元素 let num2 = arr[arr.length - 1] // 獲取數(shù)組的倒數(shù)第二個(gè)元素 let num3 = arr[arr.length - 2] console.log(num1, num2, num3); // 1 10 8
根據(jù)正序位置獲取指定的元素比較方便,但是根據(jù)逆序位置(倒數(shù)第幾個(gè))獲取指定的元素稍微繁瑣(需要計(jì)算出正序位置)。
正序時(shí) index 為正整數(shù)或0,逆序時(shí) index 為負(fù)整數(shù)。
那么獲取對(duì)應(yīng)位置元素的表達(dá)式可以表示為:
index 為正數(shù)或0:arr[index]
index 為負(fù)數(shù): arr[arr.length + index]
2.通過(guò) slice 方法獲取
let arr = [2, 4, 6, 8, 10] // 獲取數(shù)組的第一個(gè)元素 let num4 = arr.slice(0, 1) // 獲取數(shù)組的最后一個(gè)元素 let num5 = arr.slice(-1) // 獲取數(shù)組的倒數(shù)第二個(gè)元素 let num6 = arr.slice(-2, -1) console.log(num4[0], num5[0], num6[0]); // 2 10 8
其實(shí)在其他語(yǔ)言中比如 python 如果你想要獲取倒數(shù)第幾個(gè)元素是可以通過(guò) arr[index] 直接獲?。ㄈ鏰rr[-1]獲取倒數(shù)第一個(gè)元素), 但是在 JavaScript 中是不支持這樣獲取的。
為了更方便獲取數(shù)組指定位置的元素(無(wú)論時(shí)正序還是逆序位置),數(shù)組提供了一個(gè)內(nèi)置方法 at() 可以通過(guò)元素下標(biāo)直接獲取指定位置的數(shù)組元素
數(shù)組的 at() 方法
我們使用 at 方法實(shí)現(xiàn)以上案例:
let arr2 = [2, 4, 6, 8, 10] // 獲取數(shù)組的第一個(gè)元素 let num4 = arr2.at(0) // 獲取數(shù)組的最后一個(gè)元素 let num5 = arr2.at(-1) // 獲取數(shù)組的倒數(shù)第二個(gè)元素 let num6 = arr2.at(-2) console.log(num4, num5, num6); // 2 10 8
語(yǔ)法:at(index), index 是整數(shù),其中包括負(fù)整數(shù)表示從左往右數(shù)第幾個(gè)元素。
獲取指定位置不存在的元素返回 undefined
let arr = [2, 4, 6, 8, 10] console.log(arr[5]); // undefined
獲取類(lèi)數(shù)組指定位置元素
let likeArr = { length: 2, 0: 'vue', 1: 'react' } let lang = Array.prototype.at.call(likeArr, 0) console.log(lang); // vue
對(duì)比
方法 | 參數(shù)范圍 | 簡(jiǎn)易程度 |
---|---|---|
arr[index] | 非負(fù)整數(shù) | 逆序獲取元素時(shí)需要進(jìn)行計(jì)算,相對(duì)繁瑣 |
slice(startIndex, endIndex) | 整數(shù) | 一般需要一到兩個(gè)下標(biāo),相對(duì)繁瑣 |
at(index) | 整數(shù) | 只需一個(gè)下標(biāo) index ,相對(duì)簡(jiǎn)單 |
到此這篇關(guān)于在 javascript 中快速獲取數(shù)組指定位置的元素的文章就介紹到這了,更多相關(guān)js獲取數(shù)組指定位置的元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Bootstrap模態(tài)框(Modal)實(shí)現(xiàn)過(guò)渡效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框(Modal)實(shí)現(xiàn)過(guò)渡效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03js Select下拉列表框進(jìn)行多選、移除、交換內(nèi)容的具體實(shí)現(xiàn)方法
我們經(jīng)常會(huì)看到很多的網(wǎng)站會(huì)看到有下拉列表的內(nèi)容進(jìn)行直接增加與移除,下面我來(lái)介紹一款js Select下拉列表框進(jìn)行多選、移除、交換內(nèi)容實(shí)例2013-08-08javascript實(shí)現(xiàn)數(shù)組內(nèi)值索引隨機(jī)化及創(chuàng)建隨機(jī)數(shù)組的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)數(shù)組內(nèi)值索引隨機(jī)化及創(chuàng)建隨機(jī)數(shù)組的方法,涉及javascript數(shù)組索引及隨機(jī)數(shù)的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08一文教會(huì)你如何在JavaScript中使用展開(kāi)運(yùn)算符
展開(kāi)運(yùn)算符(spread operator)允許一個(gè)表達(dá)式在某處展開(kāi),下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一文教會(huì)你如何在JavaScript中使用展開(kāi)運(yùn)算符的相關(guān)資料,需要的朋友可以參考下2022-10-10javascript實(shí)現(xiàn)帶下拉子菜單的導(dǎo)航菜單效果
這篇文章主要介紹了javascript實(shí)現(xiàn)帶下拉子菜單的導(dǎo)航菜單效果的方法,涉及javascript操作頁(yè)面元素與樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05基于JS實(shí)現(xiàn)簡(jiǎn)單的樣式切換效果代碼
這篇文章主要介紹了基于JS實(shí)現(xiàn)簡(jiǎn)單的樣式切換效果代碼,涉及簡(jiǎn)單的javascript控制頁(yè)面元素樣式變換的技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09