简体   繁体   English

javascript - 将属性添加到对象文字并返回

[英]javascript - Add property to object literal and return

I have object literal what I consider as base object:我有对象文字我认为是基本对象:

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

and would like to use this object and pass it to function with extention like并希望使用此对象并将其传递给具有扩展名的函数,例如

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

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

or要么

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

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

+ operator is not correct for it. +运算符不正确。 How I can do it?我该怎么做? Is it a way ?这是一种方式吗?

EDIT: Do you want to permanently alter obj ?编辑:你想永久改变obj吗? - No, I would like to able to reuse it for next call as base. - 不,我希望能够在下一次调用时重复使用它作为基础。

With ES2018 or TypeScript 2.1 you can use the object spread syntax .在 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 } );

With ES2015 you can use Object.assign .在 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) );

Demo 演示

 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);

If you're okay with altering obj , just change it before you pass it:如果您可以更改obj ,只需在传递它之前更改它:

var obj = { /* stuff */ };

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

Do you want to permanently alter obj?你想永久改变 obj 吗? - No, I would like to able to reuse it for next call as base. - 不,我希望能够在下一次调用时重复使用它作为基础。

Okay, so you need to make a copy of obj , and alter the copy — either before you call myFunction :好的,所以您需要 制作obj的副本,并在调用myFunction之前更改副本:

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

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

or pass obj and the "extension" to myFunction :或将obj和“扩展名”传递给myFunction

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

myFunction(obj, extension);

and have myFunction do the work:并让myFunction完成工作:

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

    // rest of the function logic here
}

If you're already (or don't mind) using jQuery, $.extend() will be your best friend for the task.如果您已经(或不介意)使用 jQuery, $.extend()将是您完成这项任务的最佳朋友。

If you wanted to add properties to an existing object and return the new object in one line, you can use a combination of the Object.fromEntries and Object.entries functions:如果您想向现有对象添加属性并在一行中返回新对象,您可以组合使用Object.fromEntries和 Object.entries 函数:

 console.log( Object.fromEntries( Object.entries({ t:4, f:2 }) .concat( Object.entries({ q:2, p:9 }) ) ) );
This also works if you want to just modify a single property of an existing object, just, for the new object properties, add the object you want to replace, ie: 如果您只想修改现有对象的单个属性,这也适用,只需为新对象属性添加要替换的对象,即:

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

would just modify the t property of the original object.只会修改原始对象的t属性。

You could create a function that extends objects nondestructively (not "extend", really, just make a new object from another one), for example:您可以创建一个非破坏性扩展对象的函数(不是“扩展”,实际上,只是从另一个对象创建一个新对象),例如:

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

Note: You might be interested in Object.create which is way more flexible than the little "function F() {}; F.prototype = src;"注意:您可能对Object.create感兴趣,它比小“function F() {}; F.prototype = src;”更灵活in my code, but it's ES5+.在我的代码中,但它是 ES5+。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM