BabelJS插件

Question

例如，如果我有两个对象：

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

和

var oof = {}

我想将x和y值从foo转移到oof。有没有办法使用es6解构语法？

可能是这样的：

oof{x,y} = foo

Answer 1

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

({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]);

虽然。

Answer 2

不，解构不支持缩写中的成员表达式，而只支持当前时间的普通属性名称。有have been talks关于此类问题，但没有任何提案可以进入ES6。

然而，您可以使用Object.assign - 如果您不需要所有属性，您仍然可以

var foo = …,
    oof = {};
{
    let {x, y} = foo;
    Object.assign(oof, {x, y})
}

Answer 3

IMO这是完成您所寻找目标的最简单方法：

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

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

基本上，将结构化为变量，然后使用初始化程序简写来创建一个新对象。无需Object.assign

我认为这是最可读的方式，无论如何。因此，您可以从someObject中选择您想要的精确道具。如果您有一个现有的对象，您只想将道具合并到，请执行以下操作：

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请求中使用了这个请求，我只需要一些离散数据。但是，我同意应该有一个班轮来做这件事。

Answer 4

Object.assign以外的object spread syntax是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"
}
*/

但要使用此功能，您需要为babel使用stage-2或transform-object-rest-spread插件。这是demo on babel with stage-2

Answer 5

BabelJS插件

如果您使用 BabelJS ，现在可以激活我的插件babel-plugin-transform-object-from-destructuring（see npm package for installation and usage）。

我遇到了与此主题相同的问题，对我来说，当您从解构表达式创建对象时，这非常令人筋疲力尽，尤其是当您必须重命名，添加或删除属性时。有了这个插件，维护这样的场景对你来说就容易多了。

对象示例

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;

Answer 6

这完全有可能。只是没有一个声明。

var foo = {
    x: "bar",
    y: "baz"
};
var oof = {};
({x: oof.x, y: oof.y} = foo); // {x: "bar", y: "baz"}

（请注意语句周围的括号。）但请记住，易读性比代码打高尔夫球更重要:)。

来源：http://exploringjs.com/es6/ch_destructuring.html#sec_assignment-targets

Answer 7

您可以在箭头函数中返回解构对象，并使用Object.assign（）将其指定给变量。

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

const oof = Object.assign({}, () => ({ x, y } = foo));

Answer 8

您可以像这样使用重组：

const foo = {x:"a", y:"b"};
const {...oof} = foo; // {x:"a", y:"b"}

如果oof具有值，则合并两个对象：

const foo = {x:"a", y:"b"};
let oof = {z:"c"}
oof = Object.assign({}, oof, foo)

Answer 9

干燥

var a = {a1:1, a2: 2, a3: 3};
var b = {b1:1, b2: 2, b3: 3};

const newVar = (() => ({a1, a2, b1, b2})).bind({...a, ...b});
const val = newVar();
console.log({...val});
// print: Object { a1: 1, a2: 2, b1: 1, b2: 2 }

或

console.log({...(() => ({a1, a2, b1, b2})).bind({...a, ...b})()});

Answer 10

这适用于chrome 53.0.2785.89

let foo = {
  x: "bar",
  y: "baz"
};

let oof = {x, y} = foo;

console.log(`oof: ${JSON.stringify(oof)});

//prints
oof: {
  "x": "bar",
  "y": "baz"
}

Answer 11

我想出了这个方法：

exports.pick = function pick(src, props, dest={}) {
    return Object.keys(props).reduce((d,p) => {
        if(typeof props[p] === 'string') {
            d[props[p]] = src[p];
        } else if(props[p]) {
            d[p] = src[p];
        }
        return d;
    },dest);
};

您可以这样使用：

let cbEvents = util.pick(this.props.events, {onFocus:1,onBlur:1,onCheck:'onChange'});
let wrapEvents = util.pick(this.props.events, {onMouseEnter:1,onMouseLeave:1});

即，您可以选择想要的属性并将它们放入新对象中。与_.pick不同，您也可以同时重命名它们。

如果要将道具复制到现有对象上，只需设置dest arg。

Answer 12

这是一种作弊，但你可以这样做......

const originalObject = {
  hello: 'nurse',
  meaningOfLife: 42,
  your: 'mom',
};

const partialObject = (({ hello, your }) => {
  return { hello, your };
})(originalObject);

console.log(partialObject); // { hello: 'nurse', your: 'mom' }

在实践中，我认为你很少想要使用它。以下是更清楚的......但不是那么有趣。

const partialObject = {
  hello: originalObject.hello,
  your: originalObject.your,
};

另一种完全不同的路线，包括与原型混淆（现在小心......）：

if (!Object.prototype.pluck) {
  Object.prototype.pluck = function(...props) {
    return props.reduce((destObj, prop) => {
      destObj[prop] = this[prop];

      return destObj;
    }, {});
  }
}

const originalObject = {
  hello: 'nurse',
  meaningOfLife: 42,
  your: 'mom',
};

const partialObject2 = originalObject.pluck('hello', 'your');

console.log(partialObject2); // { hello: 'nurse', your: 'mom' }

Answer 13

这是我能提出的最易读，最简短的解决方案：

let props = { 
  isValidDate: 'yes',
  badProp: 'no!',
};

let { isValidDate } = props;
let newProps = { isValidDate };

console.log(newProps);

将输出{ isValidDate: 'yes' }

总有一天会说let newProps = ({ isValidDate } = props)这样的话会很好，但不幸的是，它不是ES6支持的东西。

Answer 14

这不是一个漂亮的方法，我也不推荐这样做，但是这种方法可能只是为了获取知识。

const myObject = {
  name: 'foo',
  surname: 'bar',
  year: 2018
};

const newObject = ['name', 'surname'].reduce(
  (prev, curr) => (prev[curr] = myObject[curr], prev),
  {},
);

console.log(JSON.stringify(newObject)); // {"name":"foo","surname":"bar"}

Answer 15

您可以破坏直接分配给另一个对象属性的对象。

工作示例：

let user = {};
[user.name, user.username] = "Stack Overflow".split(' ');
document.write(`
1st attr: ${user.name} <br /> 
2nd attr: ${user.username}`);

您可以使用与要捕获的对象属性名称相同的变量来进行销毁，而无需这样做：

let user = { name: 'Mike' }
let { name: name } = user;

使用这种方式：

let user = { name: 'Mike' }
let { name } = user;

如果属性名称相同，则可以为对象结构设置新值。

看这个工作示例：

// The object to be destructed
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// Destructing
let {width: w, height: h, title} = options;

// Feedback
document.write(title + "<br />");  // Menu
document.write(w + "<br />");      // 100
document.write(h);                 // 200

Answer 16

您可以使用JSON类方法来实现它，

const foo = {
   x: "bar",
   y: "baz"
};

const oof = JSON.parse(JSON.stringify(foo, ['x','y']));
// output -> {x: "bar", y: "baz"}

以数组格式传递需要添加到结果对象中的属性作为stringify函数的第二个参数。

MDN Doc for JSON.stringify

是否有可能对现有物体进行构造？（Javascript ES6）

16 个答案:

BabelJS插件

对象示例

数组示例

是否有可能对现有物体进行构造？ （Javascript ES6）

16 个答案:

BabelJS插件

对象示例

数组示例

是否有可能对现有物体进行构造？（Javascript ES6）