前端優化之利用鍵值對快速查詢數據

通常情況下，我們獲取本地數據的時候，需要取對應的值，是採用循環。如果改變數據模型，封裝專門的方法來取值，會提高效率。分步驟處理數據，先存數據[id:{},id:{},…];取數據傳入id,取對應id的對象的值。
案例：

let data=[{id:1,name:"北京",gdp:34},{id:2,name:"上海",gdp:44},{id:3,name:"廣州",gdp:34},{id:4,name:"深圳",gdp:23},.....];
一般方法：循環查找
let name="";
data.map((item)=>{
	if(item.id==2){
		name=item.name
	}
})
console.log(name);//上海
//提高效率方法 先轉數據模型後根據對象屬性key直接取值，不需要循環
//轉換數據模型
 let formatData = {
      1: { id: 1, name: "北京", gdp: 34 },
      2: { id: 2, name: "上海", gdp: 44 },
      3: { id: 3, name: "廣州", gdp: 34 },
      4: { id: 4, name: "深圳", gdp: 23 }
    };
    //封裝取值方法 傳入參數key=id
    // 取name
    const getName = function(key) {
      if (formatData[key]) {
        return formatData[key].name;
      } else {
        return "";
      }
    };
    //取gdp值
    const getGDP = function(key) {
      if (formatData[key]) {
        return formatData[key].gdp;
      } else {
        return "";
      }
    };
    //合併上面兩個方法
    const getData = function(key, prop) {
      if (formatData[key]) {
        return formatData[key][prop];
      } else {
        return "";
      }
    };

    let name1 = getName(2);
    let gdp = getGDP(2);
    let name2 = getData(2, "name");
    console.log(name1, gdp, name2);//上海 44 上海