前端練習04 取物件的深層屬性

有時候我們需要訪問乙個物件較深的層次，但是如果這個物件某個屬性不存在的話就會報錯，例如：

var data =  } }
data.a.b.c // => scriptoj
data.a.b.c.d // => 報錯，**停止執行
console.log('scriptoj') // => 不會被執行

請你完成乙個safeget函式，可以安全的獲取無限多層次的資料，一旦資料不存在不會報錯，會返回undefined，例如：

var data =  } }
safeget(data, 'a.b.c') // => scriptoj
safeget(data, 'a.b.c.d') // => 返回 undefined
safeget(data, 'a.b.c.d.e.f.g') // => 返回 undefined
console.log('scriptoj') // => 列印 scriptoj

首先想到的方法就是利用迴圈實現，每次迴圈都進行一次判斷，判斷屬性是否存在，存在繼續，不存在跳出

最早完成的**：

const safeget = (data, path) => 
const temparr = path.split('.');
for (let i = 0; i < temparr.length; i++)  else 
}  return result;
};

這段**至少有兩個可以優化的地方：

沒有必要宣告result這個變數，直接使用data即可

for迴圈內部不必break，直接return跳出函式即可

所以優化之後：

const safeget = (data, path) => 
const temparr = path.split('.');
for (let i = 0; i < temparr.length; i++)  else 
}  return data;
};

除了使用迴圈，當然也可以遞迴呼叫函式來實現：

const safeget = (data, path) => 
if (!restpath) 
return safeget(data[key], restpath)
};

看看了討論區，受了一些啟發，還可以使用try...catch實現

const safeget = (data, path) => 
return data;
} catch (e) 
};

還可以使用es6中強大的reduce實現，非常簡潔：

const safeget = (data, path) => 
const temparr = path.split('.');
// 注意初始值是給誰賦值
return temparr.reduce((total, current) = > , data)
};

要注意的一點，

array.reduce(function(total, currentvalue, currentindex, arr), initialvalue)

引數initialvalue是初始值，是賦值給total的值，不要搞錯。

物件陣列的深拷貝和物件的深拷貝

1 對於普通陣列陣列元素為數字或者字串深拷貝很簡單，拷貝之後兩個陣列指標指向的儲存位址不同，從而完成深拷貝 var test 1,2,3 原陣列 var testcopy concat test 拷貝陣列 testcopy 0 4 console.log test 1,2,3 console....

前端css的練習

css初步總結 1 css的三種使用方式在標籤中使用css 在head中使用style樣式引入對於id，要使用 id 使用外部的檔案對於id，要使用 id 然後再進行書寫 2 css可以做什麼用？設定背景顏色設定字型大小設定字型樣式設定邊框樣式設定寬度高度等 3 這三種方式的優先順序...

js物件的深拷貝

關於物件的深拷貝一直是大家津津樂道乙個話題，本騷年通過研究 yuedu 發現還是很easy的。首推的方法簡單有效，json.stringfy 和json.parse 即可搞定。但是這種簡單粗暴的方法有其侷限性。當值為undefined function symbol會在轉換過程中被忽略。所以，物件值...

前端練習04 取物件的深層屬性

物件陣列的深拷貝和物件的深拷貝

前端css的練習

js物件的深拷貝

相關推薦