Question

基于现有对象创建新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')}
            // ...
      } ));
});

Answer 1

以下是一些想法：

仅创建一次默认设置
每次循环只调用$(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执行深拷贝而不是浅拷贝。（这个浅而深的要求也是我没有回应使用Object.assign的@Maxx建议的原因，因为它没有做深拷贝。）

Answer 2

您可以使用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}

基于现有对象高效创建新的JavaScript对象

2 个答案: