資訊專欄INFORMATION COLUMN
摘要：在做數據比對的時候，可以通過嵌套循環，一層循環遍歷最新數據二層循環遍歷緩存數據，如果緩存數據中對應的為，則更改第一層循環對應的值。雖然通過嵌套循環可以實現效果，但是循環的次數是兩個數組長度的乘積，當數據量大的時候，這樣會很耗性能。
工作中經常會遇到這樣的需求：
1.購物車列表中勾選某些，點擊任意一項，前往詳情頁，再返回購物車依舊需要呈現勾選狀態
2.勾選人員后，前往別的頁面，再次返回，人員依舊程勾選狀態
3.等等....
// 緩存數據
var students = [
{ id: 35, name: "小明", age: 25, address: "環球中心",checked:true},
{ id: 36, name: "杰倫", age: 41, address: "中國臺灣" ,checked:true},
{ id: 37, name: "不擼死", age: 46, address: "霉國" ,checked:true}
]
// 最新數據
var data = [
{ id: 35, name: "小明", age: 25, address: "環球中心",checked:false },
{ id: 36, name: "杰倫", age: 41, address: "中國臺灣" ,checked:false},
{ id: 37, name: "不擼死", age: 46, address: "霉國" ,checked:false},
{ id: 38, name: "大明", age: 46, address: "哈哈哈哈哈" ,checked:false},
{ id: 39, name: "中明", age: 46, address: "中國四川" ,checked:false}
]
離開頁面的時候將勾選的數據緩存，再次返回到頁面時，將最新添加的數據和緩存的數據做對比，如果緩存中存在勾選，則更改對應的最新數據。
在做數據比對的時候，可以通過嵌套for循環，一層for循環遍歷最新數據,二層for循環遍歷緩存數據，如果緩存數據中對應的checked為true，則更改第一層for循環對應的值。雖然通過嵌套循環可以實現效果，但是循環的次數是兩個數組長度的乘積，當數據量大的時候，這樣會很耗性能。這里推薦另一種辦法，將緩存的數組轉換成Json對象，將唯一的id作為數組中每一項的key，將數組的每一項做為value，這樣循環的時候只需要一層循環即可。
// 緩存數據
var students = [
{ id: 35, name: "小明", age: 25, address: "環球中心",checked:true },
{ id: 36, name: "杰倫", age: 41, address: "中國臺灣" ,checked:true},
{ id: 37, name: "不擼死", age: 46, address: "霉國" ,checked:true}
]
// 最新數據
var data = [
{ id: 35, name: "小明", age: 25, address: "環球中心",checked:false },
{ id: 36, name: "杰倫", age: 41, address: "中國臺灣" ,checked:false},
{ id: 37, name: "不擼死", age: 46, address: "霉國" ,checked:false},
{ id: 38, name: "大名", age: 46, address: "哈哈哈哈哈" ,checked:false},
{ id: 39, name: "中明", age: 46, address: "中國四川" ,checked:false}
]
// 將數組轉換為json對象
function Array2Json(arr, obj = {}) {
arr.forEach(item => {
obj[item.id] = item;
})
return obj
}
students = Array2Json(students);
// 此處可以用for循環，但是推薦使用while，因為while比for效率高
let i = 0;
while (i < data.length) {
if (students[data[i].id]) {
data[i].checked = true
}
i++;
}
// 最終得到的data就是還原了勾選狀態的數據，可以直接渲染在界面上
console.log(data)
寫完了，要下班了，哈哈哈哈
---------------------------------------轉載請注明出處------------------謝謝-----------------
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97407.html
摘要：嵌套對象成員會造成重大性能影響盡量少用。一般來說你可以通過這種方法提高代碼的性能將經常使用的對象成員數組項和域外變量存入局部變量中。在反復訪問的地方使用局部變量存放引用小心地處理集合因為他們表現出存在性總是對底層文檔重新查詢。 前言 本期我來給大家推薦的書是《高性能JavaScript》,在這本書中我們能夠了解 javascript 開發過程中的性能瓶頸,如何提升各方面的性能，包括代碼...
摘要：然后執行環境會創建一個活動對象，活動對象作為函數運行的變量對象，包含所有局部變量命名參數參數集合和，當執行環境銷毀，活動對象也被銷毀。 高性能JavaScript整理總結 關于前端性能優化：首先想到的是雅虎軍規34條然后最近看了《高性能JavaScript》大概的把書中提到大部分知識梳理了下并加上部分個人理解這本書有參考雅虎特別性能小組的研究成果，所以跟34 軍規有很多相似之處有不當之...
摘要：然后執行環境會創建一個活動對象，活動對象作為函數運行的變量對象，包含所有局部變量命名參數參數集合和，當執行環境銷毀，活動對象也被銷毀。 高性能JavaScript整理總結 關于前端性能優化：首先想到的是雅虎軍規34條然后最近看了《高性能JavaScript》大概的把書中提到大部分知識梳理了下并加上部分個人理解這本書有參考雅虎特別性能小組的研究成果，所以跟34 軍規有很多相似之處有不當之...
摘要：高性能小結文章轉載于我的博客最近看完了動物叢書的高性能，覺得那本書的小結部分寫得非常不錯，簡潔輕快易懂概括性很強。由于局部變量存在于作用域鏈的起始位置，因此訪問局部變量比訪問跨作用域變量更快。 高性能javascript小結 文章轉載于我的CSDN博客：http://blog.csdn.net/hello_world_20/article/details/46793317 最近看完了動...
閱讀 1873·2021-11-15 11:39
閱讀 1081·2020-12-03 17:06
閱讀 737·2019-12-27 11:42
閱讀 3274·2019-08-30 13:59
閱讀 1464·2019-08-26 13:22
閱讀 3288·2019-08-26 12:15
閱讀 2475·2019-08-26 10:22
閱讀 1564·2019-08-23 18:40
