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

Если вы в порядке с изменением obj, просто измените его, прежде чем передать его:

var obj = { /* stuff */ };

obj.key3 = 'value3';
myFunction(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 2

С ES2018 или TypeScript 2.1 вы можете использовать синтаксис расширения объекта .

myFunction({ ...obj, key3: 'value3' });

С ES2015 вы можете использовать Object.assign .

myFunction(Object.assign({ key3: 'value3' }, obj));

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 +.