js中如何向數(shù)組中添加元素unshift()方法
js向數(shù)組中添加元素unshift()
將新項(xiàng)添加到數(shù)組起始位置:
實(shí)例
將新項(xiàng)添加到數(shù)組起始位置:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon","Pineapple");
fruits 將輸出:
Lemon,Pineapple,Banana,Orange,Apple,Mango
定義和用法
unshift() 方法可向數(shù)組的開(kāi)頭添加一個(gè)或更多元素,并返回新的長(zhǎng)度。
注意: 該方法將改變數(shù)組的數(shù)目。
提示:將新項(xiàng)添加到數(shù)組末尾,請(qǐng)使用push()方法。
js unshift性能分析
js unshift()方法可以向數(shù)組的頭部添加元素并返回新的數(shù)組長(zhǎng)度,我們手寫(xiě)一個(gè)unshift() 方法
Array.prototype._unshift = function () { let arr = this let oldLen = this.length let argLen = arguments.length let newLen = oldLen + argLen for (let i = oldLen - 1; i >= 0; i--) { arr[i + argLen] = arr[i] } for (let i = 0; i < argLen; i++) { arr[i] = arguments[i] } return newLen } let arr1 = [1, 3, 4, 5, 6] console.log(arr1._unshift(7, 8, 1),arr1); // 8, [7, 8, 1, 1, 3, 4, 5, 6]
從上面代碼可以看出先把元素往后移動(dòng),再添加元素,對(duì)于數(shù)組長(zhǎng)度很大的 情況下性能是比較差的。
但是我們可以先push(), 然后再reverse() ,效率更快。
咱們手寫(xiě)一下push和reverse做下對(duì)比
Array.prototype._push = function () { let arr = this let len = arguments.length for(let i = 0; i < len; i++) { this[this.length] = arguments[i] } return this.length } let arr = [2, 54, 65, 3, 4]
Array.prototype._reverse = function () { let arr = this let j = arr.length - 1 for(let i = 0; i < j; i++,j--) { let curLeft = arr[i] let curRight = arr[j] arr[i] = curRight arr[j] = curLeft } return arr }
可以看出reverse和push的時(shí)間復(fù)雜度要低。實(shí)際對(duì)比下
let arr = [] console.time('time1') for(let i = 0 ;i< 10000; i++) { arr.unshift(i) } console.timeEnd('time1') // 平均耗時(shí) 5ms
let arr = [] console.time('time2') for(let j = 0 ;j< 10000; j++) { arr.push(j) } arr.reverse() console.timeEnd('time2') // 平均耗時(shí) 0.47ms
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
js中常見(jiàn)的4種創(chuàng)建對(duì)象方式與優(yōu)缺點(diǎn)
不管是哪門(mén)語(yǔ)言,千變?nèi)f化不離其宗,深入理解其本質(zhì),方能應(yīng)用自如,下面這篇文章主要給大家介紹了關(guān)于js中常見(jiàn)的4種創(chuàng)建對(duì)象方式與優(yōu)缺點(diǎn),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01Javascript 頁(yè)面模板化很多人沒(méi)有使用過(guò)的方法
今天遇到一個(gè)問(wèn)題,這個(gè)問(wèn)題也是我以前遇到的問(wèn)題,以前的方式,也是大多數(shù)人使用的方式。大家可以看看我的文章2012-06-06原生js實(shí)現(xiàn)新聞列表展開(kāi)/收起全文功能
本文主要介紹了原生js實(shí)現(xiàn)新聞列表展開(kāi)/收起全文功能的知識(shí)要點(diǎn)、注意事項(xiàng)以及完整代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01JS實(shí)現(xiàn)分頁(yè)導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)動(dòng)態(tài)頁(yè)碼及分頁(yè)導(dǎo)航,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02uniapp開(kāi)發(fā)微信小程序自定義頂部導(dǎo)航欄功能實(shí)例
uni-app是一個(gè)使用Vue.js開(kāi)發(fā)跨平臺(tái)應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開(kāi)發(fā)微信小程序自定義頂部導(dǎo)航欄功能的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球
這篇文章主要為大家詳細(xì)介紹了JavaScript+canvas實(shí)現(xiàn)框內(nèi)跳動(dòng)小球,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04