javascript - 將屬性添加到對象文字並返回

Question

我有對象文字我認為是基本對象：

var obj = {
   key1   : 'value1',
   key2   : 'value2'
}

並希望使用此對象並將其傳遞給具有擴展名的函數，例如

myFunction( obj + { key3 : 'value3' } );

// param became:
{
   key1   : 'value1',
   key2   : 'value2',
   key3   : 'value3'
}

要么

myFunction( obj + { key2 : 'new value2' } );

// param became:
{
   key1   : 'value1',
   key2   : 'new value2'
}

+運算符不正確。 我該怎么做？ 這是一種方式嗎？

編輯：你想永久改變obj嗎？ - 不，我希望能夠在下一次調用時重復使用它作為基礎。

Answer 1

在 ES2018 或 TypeScript 2.1 中，您可以使用對象傳播語法。

// properties on the right overwrite properties on the left

// Overwrite properties from obj
myFunction( { ...obj, key3: 'value3' } );

// Don't overwrite properties from obj
myFunction( { key3: 'value3', ...obj } );

在 ES2015 中，您可以使用Object.assign 。

// Object.assign(a, b, c, ..) - copy properties from b to a, then from c to a etc.

// Overwrite properties from obj
myFunction( Object.assign({}, obj, { key3: 'value3' }) );

// Don't overwrite properties from obj
myFunction( Object.assign({ key3: 'value3' }, obj) );

---

演示

 var obj = { key1: 'value1', key2: 'value2'} console.log('-- Object Spread --'); console.log({ ...obj, key3: 'value3' }); console.log('overwrite'); console.log({ ...obj, key2: 'NEW2' }); console.log('no overwrite'); console.log({ key2: 'NEW2', ...obj }); console.log('-- Object Assign --'); console.log(Object.assign({ key3: 'value3' }, obj)); console.log('overwrite'); console.log(Object.assign({}, obj, { key2: 'NEW2' })); console.log('no overwrite'); console.log(Object.assign({ key2: 'NEW2' }, obj)); console.log('-- Original Object unchanged --'); console.log(obj);

Answer 2

如果您可以更改obj ，只需在傳遞它之前更改它：

var obj = { /* stuff */ };

obj.key3 = 'value3';
myFunction(obj);

---

你想永久改變 obj 嗎？ - 不，我希望能夠在下一次調用時重復使用它作為基礎。

好的，所以您需要 制作obj的副本，並在調用myFunction之前更改副本：

var obj = { /* stuff */ };
var extension = {key3: 'value3'};

myFunction($.extend({}, obj, extension));

或將obj和“擴展名”傳遞給myFunction ：

var obj = { /* stuff */ };
var extension = {key3: 'value3'};

myFunction(obj, extension);

並讓myFunction完成工作：

function myFunction(base, ext)
{
    if (typeof base === 'object' && typeof ext === 'object')
    {
        base = $.extend({}, base, ext);
    }

    // rest of the function logic here
}

如果您已經（或不介意）使用 jQuery， $.extend()將是您完成這項任務的最佳朋友。

Answer 3

如果您想向現有對象添加屬性並在一行中返回新對象，您可以組合使用Object.fromEntries和 Object.entries 函數：

 console.log( Object.fromEntries( Object.entries({ t:4, f:2 }) .concat( Object.entries({ q:2, p:9 }) ) ) );

如果您只想修改現有對象的單個屬性，這也適用，只需為新對象屬性添加要替換的對象，即：

 ....concat(Object.entries({t:2}))...

只會修改原始對象的t屬性。

Answer 4

您可以創建一個非破壞性擴展對象的函數（不是“擴展”，實際上，只是從另一個對象創建一個新對象），例如：

var oldObj = {name: 'foo'};

function extendNonDestructive(src, newProps) {
  function F() {} F.prototype = src;
  var newObj = new F;
  for (var p in newProps) {
    if (newProps.hasOwnProperty(p)) {
      newObj[p] = newProps[p]
    }
  }
  return newObj
}

var newObj = extendNonDestructive(oldObj, {lastName: 'bar'}); // Doesn't touch oldObj

注意：您可能對Object.create感興趣，它比小“function F() {}; F.prototype = src;”更靈活在我的代碼中，但它是 ES5+。