快捷導(dǎo)航

JS數(shù)組在內(nèi)存中的效率問(wèn)題淺析

更新時(shí)間：2022年02月17日 16:05:53 作者：豬痞惡霸

用js有很久了,但都沒(méi)有深究過(guò)js的數(shù)組形式,下面這篇文章主要給大家介紹了關(guān)于JS數(shù)組在內(nèi)存中的效率問(wèn)題,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

JS數(shù)組

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

大家可能會(huì)疑問(wèn)，你為啥要給畫(huà)一個(gè)邊框呢，其實(shí)我們的數(shù)組在定義的時(shí)候默認(rèn)了它的長(zhǎng)度，即當(dāng)我們像要在數(shù)組中添加元素的時(shí)候，就需要對(duì)它的長(zhǎng)度做出改變。

效率比較

JS提供了幾個(gè)api來(lái)讓我們便捷地向數(shù)組中添加元素，比如說(shuō)push，unshift

push()是添加一個(gè)元素在數(shù)組的末尾，這里我們無(wú)需操作其他的元素，只需要this,length+=1即可
unshift()是在數(shù)組的頭部添加一個(gè)元素，我們看到的僅僅只要其表面數(shù)組的頭部增加了一個(gè)元素，其實(shí)底層數(shù)組的中的所有成員都需要向后移動(dòng)，從尾到頭的順序，如下所示，其就會(huì)凸顯出性能差的特點(diǎn)。

舉個(gè)栗子??

我們下面寫(xiě)個(gè)栗子來(lái)清晰得比較一下兩者所耗費(fèi)的時(shí)間，我們的unshift耗費(fèi)了0.24毫秒，push耗費(fèi)了0.8毫秒，當(dāng)然所耗費(fèi)的時(shí)間還是根據(jù)所移動(dòng)的元素?cái)?shù)量來(lái)以指數(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)存問(wèn)題

除此之外我們都知道JS數(shù)組是可以在同一數(shù)組中存儲(chǔ)不同數(shù)據(jù)類(lèi)型的數(shù)據(jù)的，所以就造成了JS的數(shù)組是否分配連續(xù)內(nèi)存，是要看我們的數(shù)組成員類(lèi)型的，當(dāng)數(shù)組內(nèi)成員為同一類(lèi)，則為連續(xù)內(nèi)存，當(dāng)數(shù)組成員存在數(shù)組，字符串，那么就會(huì)分配非連續(xù)的內(nèi)存，多個(gè)非連續(xù)內(nèi)存會(huì)形成一個(gè)鏈表，當(dāng)存儲(chǔ)數(shù)據(jù)數(shù)量級(jí)龐大的時(shí)候，就會(huì)造成效率低下的問(wèn)題。下面我們針對(duì)數(shù)組成員相同和數(shù)組成員不同進(jìn)行一次耗時(shí)比較，為了凸顯效果我將次數(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()