2017-02-27 50 views
-1

我在這裏有兩種如何更新數組元素的方法。在javascript中更新數組元素,splice push vs獲取值?

var x = [{test: 'test', id: 1}, {test: 'test2', id: 2}, {test: 'test3', id: 3}]; 

SPLICE PUSH

for(var i in x) { 
    if(x[i].id === 2) { 
     x.splice(i, 1); 
     x.push({test: 'updated', id: 3}); 
     break; 
    } 
} 

得到值

for(var i in x) { 
    if(x[i].id === 1) { 
     x[i] = {test: 'updated', id: 3} 
     break; 
    } 
} 

我不知道哪一個是高效得多快一樣或更少的內存使用情況。任何建議非常感謝你。

+0

環路,可能是值得除非有足夠的理由這樣做並避免繼承的屬性(除非您特別想訪問它們),否則不建議使用* for..in *來覆蓋數組中的每個元素。除非你期望找到不止一個元素,否則一旦找到了你之後的元素,你可能會從循環中突破。這兩個示例都創建了id爲3的重複元素。使用[* splice *](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/splice),您可以將元素替換爲一個去,不需要* splice *和* push *。 – RobG

+0

@RobG - 好吧,我不好,我加了一個'break'。 。但是關於循環你會推薦什麼,並回到我的問題,哪個更好**拼接推**或**獲得值**? –

+0

@RobG - 我明白了。 。所以單獨拼接。 。非常感謝讓我試試 –

回答

1

splice可我跑了一些jsPerf測試,並增加了一個例子https://jsperf.com/slice-push-vs-direct-update/1

Benchmarks

相當昂貴最慢的是到目前爲止拼接 - 通過迭代直接更新大約2倍的速度比片,而是創建一個對象映射然後直接訪問是迄今爲止最快的!

我的第三個測試和最快的選項是這樣的:

xMap[testID ] = {name: 'updated', id:3}; 

如果你有獨特的ID,你可以做到這一點的數組轉換爲對象地圖

for(var i = 0; i < x.length; i++){ 
    xMap[x[i].id] = x[i]; 
} 

我的選擇是更少的內存效率,但速度更快 - 但是,如果您使用新對象更新數據,則可能需要更新地圖。

更新: 更改爲for(var i=0; i < x.length; i++){}風格循環使事情在Chrome快了很多!拼接仍然很慢,但直接更新在地圖的13%以內。

值得注意的是,雖然數據尺寸的增加,這些也可能會改變,因此在測試類似大小的數據集,你會期望在最大的則基準,一點:)

+0

- 哇這真的清除了我的問題。 。非常感謝 。 。我只是將您收錄的鏈接添加爲書籤。 。非常感謝你的配偶。 。 :D –

+0

非常歡迎 - 我剛剛添加了2個測試 - 使用'for(var i = 0; i Brian

+1

這些年來,已經有很多比較數組變異的方法(例如[* Native map vs. forEach追加與數組循環*](https://jsperf.com/native-map-versus-數組循環),它在Firefox中顯示的性能差異可以忽略不計)。實現,方法和場景之間有很大的差異。最重要的是,如果性能不是問題(很少會出現這種情況),那麼最具語義和最容易維護的方法的重要性遠遠超過偶爾節省幾個納秒的方法。 – RobG