JS數組在內存中的效率問題淺析

JS數組

我們所熟知的JS數組的結構和其他語言數組結構類似,即物理內存是連續的,所以這也就導致瞭數組成員移動次數越少,其效率越高,一般數組會被分配到一段連續的內存中,像這樣

大傢可能會疑問,你為啥要給畫一個邊框呢,其實我們的數組在定義的時候默認瞭它的長度,即當我們像要在數組中添加元素的時候,就需要對它的長度做出改變。

效率比較

JS提供瞭幾個api來讓我們便捷地向數組中添加元素,比如說push,unshift

  • push()是添加一個元素在數組的末尾,這裡我們無需操作其他的元素,隻需要this,length+=1即可

  • unshift()是在數組的頭部添加一個元素,我們看到的僅僅隻要其表面數組的頭部增加瞭一個元素,其實底層數組的中的所有成員都需要向後移動,從尾到頭的順序,如下所示,其就會凸顯出性能差的特點。

舉個栗子🌰

我們下面寫個栗子來清晰得比較一下兩者所耗費的時間,我們的unshift耗費瞭0.24毫秒,push耗費瞭0.8毫秒,當然所耗費的時間還是根據所移動的元素數量來以指數倍提高的。

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()

非連續內存問題

除此之外我們都知道JS數組是可以在同一數組中存儲不同數據類型的數據的,所以就造成瞭JS的數組是否分配連續內存,是要看我們的數組成員類型的,當數組內成員為同一類,則為連續內存,當數組成員存在數組,字符串,那麼就會分配非連續的內存,多個非連續內存會形成一個鏈表,當存儲數據數量級龐大的時候,就會造成效率低下的問題。下面我們針對數組成員相同和數組成員不同進行一次耗時比較,為瞭凸顯效果我將次數提高到瞭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()

最後可以清楚地比較出兩者的差距,非連續內存的數組操作耗時是連續內存的數組的幾倍。

總結

到此這篇關於JS數組在內存中的效率問題的文章就介紹到這瞭,更多相關JS數組在內存的效率內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: