JS數(shù)組在內(nèi)存中的效率問題淺析
JS數(shù)組
我們所熟知的JS數(shù)組的結(jié)構(gòu)和其他語言數(shù)組結(jié)構(gòu)類似,即物理內(nèi)存是連續(xù)的,所以這也就導(dǎo)致了數(shù)組成員移動次數(shù)越少,其效率越高,一般數(shù)組會被分配到一段連續(xù)的內(nèi)存中,像這樣

大家可能會疑問,你為啥要給畫一個邊框呢,其實我們的數(shù)組在定義的時候默認(rèn)了它的長度,即當(dāng)我們像要在數(shù)組中添加元素的時候,就需要對它的長度做出改變。
效率比較
JS提供了幾個api來讓我們便捷地向數(shù)組中添加元素,比如說push,unshift
push()是添加一個元素在數(shù)組的末尾,這里我們無需操作其他的元素,只需要this,length+=1即可
unshift()是在數(shù)組的頭部添加一個元素,我們看到的僅僅只要其表面數(shù)組的頭部增加了一個元素,其實底層數(shù)組的中的所有成員都需要向后移動,從尾到頭的順序,如下所示,其就會凸顯出性能差的特點(diǎn)。

舉個栗子??
我們下面寫個栗子來清晰得比較一下兩者所耗費(fèi)的時間,我們的unshift耗費(fèi)了0.24毫秒,push耗費(fèi)了0.8毫秒,當(dāng)然所耗費(fèi)的時間還是根據(jù)所移動的元素數(shù)量來以指數(shù)倍提高的。
function _shift() {
var arr = []
console.time('_shift')
for (let i = 0; i < 1000; i++) {
arr.unshift(1)
}
console.timeEnd('_shift')
}
_shift()
function _push() {
var arr = []
console.time('_push')
for (let i = 0; i < 1000; i++) {
arr.push(1)
}
console.timeEnd('_push')
}
_push()
非連續(xù)內(nèi)存問題
除此之外我們都知道JS數(shù)組是可以在同一數(shù)組中存儲不同數(shù)據(jù)類型的數(shù)據(jù)的,所以就造成了JS的數(shù)組是否分配連續(xù)內(nèi)存,是要看我們的數(shù)組成員類型的,當(dāng)數(shù)組內(nèi)成員為同一類,則為連續(xù)內(nèi)存,當(dāng)數(shù)組成員存在數(shù)組,字符串,那么就會分配非連續(xù)的內(nèi)存,多個非連續(xù)內(nèi)存會形成一個鏈表,當(dāng)存儲數(shù)據(jù)數(shù)量級龐大的時候,就會造成效率低下的問題。下面我們針對數(shù)組成員相同和數(shù)組成員不同進(jìn)行一次耗時比較,為了凸顯效果我將次數(shù)提高到了10的7次冪
function _diff() {
var arr = new Array(10000000)
arr.push({ name: "cxy" })
console.time('_diff')
for (let i = 0; i < 10000000; i++) {
arr[i] = i
}
console.timeEnd('_diff')
}
_diff()
function _same() {
var arr = new Array(10000000)
console.time('_same')
for (let i = 0; i < 10000000; i++) {
arr[i] = i
}
console.timeEnd('_same')
}
_same()
最后可以清楚地比較出兩者的差距,非連續(xù)內(nèi)存的數(shù)組操作耗時是連續(xù)內(nèi)存的數(shù)組的幾倍。
總結(jié)
到此這篇關(guān)于JS數(shù)組在內(nèi)存中的效率問題的文章就介紹到這了,更多相關(guān)JS數(shù)組在內(nèi)存的效率內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
擴(kuò)展Bootstrap Tooltip插件使其可交互的方法
這篇文章主要介紹了擴(kuò)展Bootstrap Tooltip插件使其可交互的方法,結(jié)合實例形式分析了bootstrap擴(kuò)展tooltip插件的原理與具體操作技巧,需要的朋友可以參考下2016-11-11
JS基于遞歸實現(xiàn)網(wǎng)頁版計算器的方法分析
這篇文章主要介紹了JS基于遞歸實現(xiàn)網(wǎng)頁版計算器的方法,結(jié)合實例形式分析了javascript采用遞歸算法實現(xiàn)網(wǎng)頁版計算器的步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
JavaScript實現(xiàn)的in_array函數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)的in_array函數(shù),用于判斷一個值是否在數(shù)組中,類似PHP的in_array函數(shù),需要的朋友可以參考下2014-08-08
JavaScript基于replace+正則實現(xiàn)ES6的字符串模版功能
這篇文章主要介紹了JavaScript基于replace+正則實現(xiàn)ES6的字符串模版功能,結(jié)合實例形式分析了replace結(jié)合正則實現(xiàn)ES6字符串模板功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
webpack結(jié)合express實現(xiàn)自動刷新的方法
這篇文章主要給大家介紹了關(guān)于webpack結(jié)合express實現(xiàn)自動刷新的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用webpack具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JavaScript實現(xiàn)異步獲取表單數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)異步獲取表單數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-05-05

