JavaScript反轉(zhuǎn)數(shù)組常用的4種方法
1.使用For循環(huán)反轉(zhuǎn)數(shù)組:
我們將為這種方法使用遞減循環(huán),以迭代給定數(shù)組的每個(gè)元素。 數(shù)組的最后一個(gè)元素將是循環(huán)的起點(diǎn)(arr.length — 1) ,它將一直運(yùn)行直到到達(dá)數(shù)組的起點(diǎn)(i ≥ 0)
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; function reverseArray1(arr) { var newArr = []; for (let index = arr.length - 1; index >= 0; index--) { newArr.push(arr[index]); } return newArr; } console.log(reverseArray1(arr));
reverseArray1函數(shù)將一個(gè)數(shù)組( arr )作為參數(shù),并通過(guò)向后循環(huán)遍歷給定的數(shù)組,以相反的順序創(chuàng)建一個(gè)相同元素的新數(shù)組( newArr )( let i = arr.length - 1; i >= 0; i -- )。 此解決方案不會(huì)修改原始數(shù)組,因?yàn)樗鼤?huì)將元素推入并存儲(chǔ)在新數(shù)組中,這會(huì)占用額外的空間。
2.使用Unshift()方法反轉(zhuǎn)數(shù)組:
這種方法與第一種方法沒(méi)有很大不同,因?yàn)樗€使用一個(gè)額外的變量來(lái)存儲(chǔ)反向數(shù)組,因此,原始數(shù)組保持不變。
function reverseArray2(arr) { var newArr = []; arr.forEach(element => { // unshift() 方法可向數(shù)組的開(kāi)頭添加一個(gè)或更多元素,并返回新的長(zhǎng)度。 newArr.unshift(element); }); return newArr; } console.log(reverseArray2(arr));
reverseArray2函數(shù)從頭到尾遍歷給定數(shù)組( arr )。 它在新數(shù)組( newArr )上使用unshift方法,并將每個(gè)元素插入到數(shù)組的開(kāi)始位置( newArr[0] )。 與第一個(gè)解決方案相比,第二個(gè)解決方案的空間效率也較低,因?yàn)樗枰鄡?nèi)存才能將反向數(shù)組存儲(chǔ)在其他變量( newArr )中。
3.就地反轉(zhuǎn)陣列: (改變?cè)瓟?shù)組)
與reverse方法類(lèi)似,我們的最后一種方法也通過(guò)在原位反轉(zhuǎn)其元素來(lái)修改原始數(shù)組。 這個(gè)解決方案; 與前兩個(gè)解決方案相比, 就地反轉(zhuǎn)數(shù)組要復(fù)雜得多。
function reverseArray3(arr) { for (let index = 0; index < Math.floor(arr.length / 2); index++) { // 借助第三方變量交換兩個(gè)變量的值 var temp = arr[index]; arr[index] = arr[arr.length - 1 - index]; arr[arr.length - 1 - index] = temp } return arr; } console.log(reverseArray3(arr));
在上面的代碼中,我們使用Math.floor向下舍入( i < Math.floor(arr.length/2) ) i < Math.floor(arr.length/2)給定數(shù)組的一半元素。 然后將數(shù)組的元素放在第一位和最后一位,第二位與第二位到最后一位,依此類(lèi)推。 代替使用局部綁定,我們使用數(shù)組解構(gòu)來(lái)交換其元素。
4.直接調(diào)用 reverse():
console.log(['a','b','c','d'].reverse());
總結(jié)
到此這篇關(guān)于JavaScript反轉(zhuǎn)數(shù)組常用的4種方法的文章就介紹到這了,更多相關(guān)JS反轉(zhuǎn)數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序商城項(xiàng)目之淘寶分類(lèi)入口(2)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)商城系列之淘寶分類(lèi)入口,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04js控制再次點(diǎn)擊按鈕之間的間隔時(shí)間可防止重復(fù)提交
使用js控制再次點(diǎn)擊按鈕之間的間隔時(shí)間可防止重復(fù)提交,需要的朋友可以參考下2014-08-08移動(dòng)端JS實(shí)現(xiàn)拖拽兩種方法解析
這篇文章主要介紹了移動(dòng)端JS實(shí)現(xiàn)拖拽兩種方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10IE和Firefox之間在JavaScript語(yǔ)法上的差異
這篇文章主要為大家詳細(xì)介紹了IE和Firefox之間在JavaScript語(yǔ)法上的差異,在JavaScript語(yǔ)法上不同的7個(gè)方面,感興趣的小伙伴們可以參考一下2016-04-04JavaScript驗(yàn)證圖片類(lèi)型(擴(kuò)展名)的函數(shù)分享
這篇文章主要介紹了JavaScript驗(yàn)證圖片類(lèi)型的函數(shù)分享,需要的朋友可以參考下2014-05-05兼容Firefox的Javascript XSLT 處理XML文件
這篇文章主要介紹了兼容Firefox的Javascript XSLT 處理XML文件,需要的朋友可以參考下2014-12-12JS實(shí)現(xiàn)動(dòng)態(tài)給圖片添加邊框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)給圖片添加邊框的方法,涉及javascript操作圖片border的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04微信小程序 組件的外部樣式externalClasses使用詳解
這篇文章主要介紹了微信小程序里 組件的外部樣式externalClasses使用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09