例如,如果我有两个对象:
var foo = {
x: "bar",
y: "baz"
}
和
var oof = {}
我想将x和y值从foo转移到oof。有没有办法使用es6解构语法?
可能是这样的:
oof{x,y} = foo
答案 0 :(得分:67)
虽然丑陋且有点重复,但你可以做到
({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]);
虽然。
答案 1 :(得分:32)
不,解构不支持缩写中的成员表达式,而只支持当前时间的普通属性名称。有have been talks关于此类问题,但没有任何提案可以进入ES6。
然而,您可以使用Object.assign
- 如果您不需要所有属性,您仍然可以
var foo = …,
oof = {};
{
let {x, y} = foo;
Object.assign(oof, {x, y})
}
答案 2 :(得分:18)
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
请求中使用了这个请求,我只需要一些离散数据。但是,我同意应该有一个班轮来做这件事。
答案 3 :(得分:10)
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
答案 4 :(得分:6)
如果您使用 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;
答案 5 :(得分:4)
这完全有可能。只是没有一个声明。
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
答案 6 :(得分:2)
您可以在箭头函数中返回解构对象,并使用Object.assign()将其指定给变量。
const foo = {
x: "bar",
y: "baz"
}
const oof = Object.assign({}, () => ({ x, y } = foo));
答案 7 :(得分:1)
您可以像这样使用重组:
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)
答案 8 :(得分:1)
干燥
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})()});
答案 9 :(得分:0)
这适用于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"
}
答案 10 :(得分:0)
我想出了这个方法:
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。
答案 11 :(得分:0)
这是一种作弊,但你可以这样做......
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' }
答案 12 :(得分:0)
这是我能提出的最易读,最简短的解决方案:
let props = {
isValidDate: 'yes',
badProp: 'no!',
};
let { isValidDate } = props;
let newProps = { isValidDate };
console.log(newProps);
将输出{ isValidDate: 'yes' }
总有一天会说let newProps = ({ isValidDate } = props)
这样的话会很好,但不幸的是,它不是ES6支持的东西。
答案 13 :(得分:0)
这不是一个漂亮的方法,我也不推荐这样做,但是这种方法可能只是为了获取知识。
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"}
答案 14 :(得分:0)
您可以破坏直接分配给另一个对象属性的对象。
工作示例:
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
答案 15 :(得分:0)
您可以使用JSON类方法来实现它,
const foo = {
x: "bar",
y: "baz"
};
const oof = JSON.parse(JSON.stringify(foo, ['x','y']));
// output -> {x: "bar", y: "baz"}
以数组格式传递需要添加到结果对象中的属性作为stringify
函数的第二个参数。