根據現有對象有效創建新的JavaScript對象

-1

根據現有對象創建新JavaScript對象並將其擴展爲新屬性的最佳做法是什麼？根據現有對象有效創建新的JavaScript對象

下面應該可以工作，但是，我希望有一個更有效的解決方案。

<div class="chart" data-type="bar" data-title="My Bar Chart 1" data-foo="Hello"></div> 
<div class="chart" data-type="pie" data-title="My Bar Pie" data-foo="Good Morning"></div> 
<div class="chart" data-type="bar" data-title="My Bar Chart 2" data-foo="Good Day"></div> 
<div class="chart" data-type="bar" data-title="My Bar Chart 3" data-foo="Good Evening"></div> 

$('.charts').each(function(){ 
    $(this).highcharts($.extend({}, { 
     bar: {/* default settings for a bar chart */ }, 
     pie: {/* default settings for a pie chart */ }, 
     line:{/* default settings for a line chart */ } 
     }[$(this).data('type')], { 
     title: {text: $(this).data('title')}, 
     somethingElse: {foo: $(this).data('bar')} 
      // ... 
     })); 
});

來源

2016-07-29 user1032531

@ 4castle Where syntax errors？我試圖根據HTML中包含的數據創建不同的圖表。 – user1032531

我想我現在想通了。縮進讓我失望。我看到的唯一改進是第一個'{}'是不必要的。 – 4castle

@ 4castle是的，使用單獨的變量會使其更具可讀性。我們質疑我的方法的部分是我經常使用某種類型的地方，例如條形圖。讓我覺得我應該重新思考我的方法。 – user1032531

這裏有幾個想法：

只有創建默認設置一次
只有調用$(this)每一次循環
（可能）嘗試撥打$this.data()前立即收集所有數據

注意：這是過早優化的經典案例。 Highcharts將會比創建設置做更多的工作，所以它可能毫無意義地優化了設置對象的創建！

子彈點建議納入，你的JS看起來是這樣的：

var defaults = { 
    bar: {/* default settings for a bar chart */ }, 
    pie: {/* default settings for a pie chart */ }, 
    line:{/* default settings for a line chart */ } 
}; 

$('.charts').each(function(){ 
    var $this = $(this), 
     data = $this.data(), 
     settings = $.extend(true, {}, defaults[data.type], { 
      title: { text: data.title }, 
      somethingElse: { foo: data.bar }, 
      ... 
     }); 
    $this.highcharts(settings); 
});

注：不知道準確的默認設置是多麼複雜，它的安全的true參數傳遞給$.extend確保jQuery的做一個深拷貝而不是淺拷貝。（這個淺的vs深的要求也是我沒有迴應@Maxx建議使用Object.assign的原因，因爲它不會執行深度複製。）

來源

2016-07-29 15:25:32 searlea

感謝searlea，是的，我知道與highcharts相比，性能可以忽略不計，但是想要學習「正確的方式」。另外，認爲最好使用單個對象來處理所有子對象，而不是像一個文字對象每次通過一些switch語句？謝謝！ – user1032531

「正確的方式」取決於上下文。你可能會發現'switch'（或'if-else'風格的邏輯）可以讓你更好地構造代碼（或者不同），然後你可以使用三元運算符或習慣用法，比如'title：data.title || 'default title''根據需要構造對象。另一方面，使用單個默認對象允許您在一個位置添加其他類型（散點圖，標尺，樣條曲線......），而無需更新詳細的「開關」。 – searlea

-1

您可以使用Object.assign()

const someObj = {a: 1}; 
const newObj = Object.assign({}, someObj, {newProp: 2}); 

console.log(someObj); // {a: 1} same 
console.log(newObj); // {a: 1, newProp: 2}

來源

2016-07-29 14:49:27 Maxx

根據現有對象有效創建新的JavaScript對象

回答

相關問題