解構ES6嵌套對象

Question

如何使用ES6和解構爲用戶提供選項。不確定如何使用嵌套對象而不會獲取由部分對象覆蓋的默認值。

Take this simple example from MDN：

function drawES6Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) 
 
{ 
 
    console.log(size, cords, radius); 
 
    // do some chart drawing 
 
} 
 

 
drawES6Chart({ 
 
    cords: { x: 18}, 
 
    radius: 30 
 
});

輸出顯示

big {"x":18} 30 

，但我想讓它顯示

big {"x":18,"y": 0} 30 

提供的線對象是局部的，並刪除默認的y值。我想保留任何未被明確覆蓋的值。

Answer 1

您可以爲整個選項對象（按原樣）提供默認值，但不能（直接）爲其中的從屬對象提供默認值。

我喜歡bergi's answer，但是as Paul pointed out，它確實定義了函數內的x和y符號。

如果你不想這樣，你可以在函數而不是內使用Object.assign：

cords = Object.assign({}, {x: 0, y:0}, cords); 

感覺ES5十歲上下，但...

爲了避免重複自己，你可以把默認在一個變量：（live copy on Babel's REPL）

let cordsDefaults = {x: 0, y: 0}; 
function drawES6Chart(
    {size = 'big', cords = cordsDefaults, radius = 25} = {} 
) 
{ 
    cords = Object.assign({}, cordsDefaults, cords); 
    console.log(size, cords, radius); 
    // do some chart drawing 
} 
drawES6Chart({cords: {x:18}}); 

輸出：

 
big {"x":18,"y":0} 25 

Answer 2

您需要解構的coords到其x的y組件，併爲他們分別提供默認值：

function drawES6Chart({size='big', cords: {x=0, y=0} = {}, radius=25} = {}) { 
    const coords = {x, y} 
    console.log(size, coords, radius); 
} 

你寫它只會提供一個默認值，如果沒有cords對象的樣子提供。
你已經選擇了爲完整的對象選擇正確的方法，它具有{}爲它的默認值，以及 - 而不是寫

function drawES6Chart({size, cords, radius} = {size:'big', cords:{x:0, y:0}, radius:25}) { 
    // not working