是否可以在现有对象上进行解构?(Javascript ES6)

IT技术 javascript ecmascript-6 destructuring
2021-01-27 20:07:55

例如,如果我有两个对象:

var foo = {
  x: "bar",
  y: "baz"
}

var oof = {}

我想将 x 和 y 值从 foo 转移到 oof。有没有办法使用 es6 解构语法来做到这一点?

也许是这样的:

oof{x,y} = foo
6个回答

虽然丑陋且有点重复,但你可以做到

({x: oof.x, y: oof.y} = foo);

它将读取foo对象的两个值,并将它们写入对象上的相应位置oof

我个人还是更愿意阅读

oof.x = foo.x;
oof.y = foo.y;

或者

['x', 'y'].forEach(prop => oof[prop] = foo[prop]);

尽管。

@techguy2000 你忘记了var oof = {};.
2021-03-24 20:07:55
有人可以在 jsfiddle 中告诉我第一个建议在哪里工作吗?它在 chrome 上不起作用jsfiddle.net/7mh399ow
2021-03-26 20:07:55
替代 ['x', 'y'].forEach(prop => oof[prop] = foo[prop]); 如我所见,是唯一一个 DRY(不要重复自己),直到现在。在要映射多个键的情况下,“DRY”确实很有用。您只需要更新一处。也许我错了。不管怎么说,还是要谢谢你!
2021-03-29 20:07:55
第三个例子是 DRY,但你必须使用字符串作为键,这通常是 javascript 隐式的。不相信这比以下令人讨厌: const {x, y} = foo; const oof = {x, y};
2021-04-02 20:07:55
在第一个代码中,不应该是({x: oof.x, y: oof.y} = foo)? 我认为您oof 中添加了一个额外的f
2021-04-08 20:07:55

IMO 这是完成您正在寻找的最简单方法:

let { prop1, prop2, prop3 } = someObject;
let data = { prop1, prop2, prop3 };

  // data === { prop1: someObject.prop1, ... }

基本上,解构为变量,然后使用初始化器速记来创建一个新对象。不需要Object.assign

无论如何,我认为这是最易读的方式。您可以在此选择someObject您想要的确切props如果您有一个现有的对象,您只想将这些props合并到其中,请执行以下操作:

let { prop1, prop2, prop3 } = someObject;
let data = Object.assign(otherObject, { prop1, prop2, prop3 });
    // Makes a new copy, or...
Object.assign(otherObject, { prop1, prop2, prop3 });
    // Merges into otherObject

另一种可以说更简洁的写法是:

let { prop1, prop2, prop3 } = someObject;
let newObject = { prop1, prop2, prop3 };

// Merges your selected props into otherObject
Object.assign(otherObject, newObject);

我经常使用它来处理POST我只需要几块离散数据的请求。但是,我同意应该有一个单一的班轮来做这件事。

编辑:PS - 我最近了解到您可以在第一步中使用超解构从复杂对象中提取嵌套值!例如...

let { prop1, 
      prop2: { somethingDeeper }, 
      prop3: { 
         nested1: {
            nested2
         } 
      } = someObject;
let data = { prop1, somethingDeeper, nested2 };

另外,您可以在创建新对象时使用扩展运算符而不是 Object.assign:

const { prop1, prop2, prop3 } = someObject;
let finalObject = {...otherObject, prop1, prop2, prop3 };

或者...

const { prop1, prop2, prop3 } = someObject;
const intermediateObject = { prop1, prop2, prop3 };
const finalObject = {...otherObject, ...intermediateObject };
这就是我所做的,但它不是很干。我认为很多人真正需要的只是提取键功能。
2021-03-16 20:07:55
我喜欢这种方法,务实。
2021-03-17 20:07:55
@jgmjgm 是的,内置一个会很好,但我想这也不太难写。
2021-03-23 20:07:55

不,解构不支持速记中的成员表达式,但目前仅支持普通的属性名称。目前已经谈关于这样的esdiscuss,但不建议将它做成ES6。

但是,您可能可以使用Object.assign- 如果您不需要所有自己的属性,您仍然可以这样做

var foo = …,
    oof = {};
{
    let {x, y} = foo;
    Object.assign(oof, {x, y})
}
@loganfsmyth,您的示例至少在我使用节点 4.2.2 的测试中对我不起作用。--harmony_destructuring启用。我看到“SyntaxError: Unexpected token ”。
2021-03-14 20:07:55
@TJCrowder 不,我认为它没有改变,我想我在谈论{oof.x, oof.y} = foo. 或者也许我真的错过了。
2021-03-15 20:07:55
@Sulliwane:他(现在)这样做了Bergi,可能最好更新答案以指出您可以使用 Logan 所示的成员表达式。(规范在 2015 年 4 月到 6 月之间发生了如此大的变化,这是真的吗?)
2021-03-25 20:07:55
@loganfsmyth 你应该提交一个正确的答案,因为这是一个非常有用的评论 imo。
2021-04-08 20:07:55

除了Object.assign存在物体传播语法这是ECMAScript的一个阶段2提议。

    var foo = {
      x: "bar",
      y: "baz"
    }
    
    var oof = { z: "z" }
    
    oof =  {...oof, ...foo }
    
    console.log(oof)

    /* result 
    {
      "x": "bar",
      "y": "baz",
      "z": "z"
    }
    */

但是要使用此功能,您需要使用babelstage-2transform-object-rest-spread插件。这是一个关于 babel演示stage-2

这实际上并没有在现有对象上设置属性,而是创建一个包含两者所有属性的新对象。
2021-03-21 20:07:55

BabelJS 插件

如果您正在使用BabelJS,您现在可以激活我的插件babel-plugin-transform-object-from-destructuring请参阅 npm 包的安装和使用)。

我在这个线程中遇到了同样的问题,对我来说,当您从解构表达式创建对象时非常累人,尤其是当您必须重命名、添加或删除属性时。使用此插件,您可以更轻松地维护此类场景。

对象示例

let myObject = {
  test1: "stringTest1",
  test2: "stringTest2",
  test3: "stringTest3"
};
let { test1, test3 } = myObject,
  myTest = { test1, test3 };

可以写成:

let myTest = { test1, test3 } = myObject;

数组示例

let myArray = ["stringTest1", "stringTest2", "stringTest3"];
let [ test1, , test3 ] = myArray,
  myTest = [ test1, test3 ];

可以写成:

let myTest = [ test1, , test3 ] = myArray;
这正是我想要的。谢谢!
2021-03-30 20:07:55
let myTest = { test1, test3 } = myObject; 不起作用
2021-04-01 20:07:55