js中如何向數(shù)組中添加元素unshift()方法
js向數(shù)組中添加元素unshift()
將新項添加到數(shù)組起始位置:
實例
將新項添加到數(shù)組起始位置:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon","Pineapple");
fruits 將輸出:
Lemon,Pineapple,Banana,Orange,Apple,Mango
定義和用法
unshift() 方法可向數(shù)組的開頭添加一個或更多元素,并返回新的長度。
注意: 該方法將改變數(shù)組的數(shù)目。
提示:將新項添加到數(shù)組末尾,請使用push()方法。
js unshift性能分析
js unshift()方法可以向數(shù)組的頭部添加元素并返回新的數(shù)組長度,我們手寫一個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]
從上面代碼可以看出先把元素往后移動,再添加元素,對于數(shù)組長度很大的 情況下性能是比較差的。
但是我們可以先push(), 然后再reverse() ,效率更快。
咱們手寫一下push和reverse做下對比
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的時間復(fù)雜度要低。實際對比下
let arr = [] console.time('time1') for(let i = 0 ;i< 10000; i++) { arr.unshift(i) } console.timeEnd('time1') // 平均耗時 5ms
let arr = [] console.time('time2') for(let j = 0 ;j< 10000; j++) { arr.push(j) } arr.reverse() console.timeEnd('time2') // 平均耗時 0.47ms
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
js中常見的4種創(chuàng)建對象方式與優(yōu)缺點
不管是哪門語言,千變?nèi)f化不離其宗,深入理解其本質(zhì),方能應(yīng)用自如,下面這篇文章主要給大家介紹了關(guān)于js中常見的4種創(chuàng)建對象方式與優(yōu)缺點,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01uniapp開發(fā)微信小程序自定義頂部導(dǎo)航欄功能實例
uni-app是一個使用Vue.js開發(fā)跨平臺應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)微信小程序自定義頂部導(dǎo)航欄功能的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08JavaScript+canvas實現(xiàn)框內(nèi)跳動小球
這篇文章主要為大家詳細(xì)介紹了JavaScript+canvas實現(xiàn)框內(nèi)跳動小球,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04