例如,如果我有两个对象:
var foo = {
x: "bar",
y: "baz"
}
和
var oof = {}
我想将x和y值从foo转移到oof。有没有办法使用es6解构语法来做到这一点?
也许像这样:
oof{x,y} = foo
Object.assign
例如,如果我有两个对象:
var foo = {
x: "bar",
y: "baz"
}
和
var oof = {}
我想将x和y值从foo转移到oof。有没有办法使用es6解构语法来做到这一点?
也许像这样:
oof{x,y} = foo
Object.assign
Answers:
虽然难看且有点重复,但您可以
({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]);
虽然。
var oof = {};
。
({x: oof.x, y: oof.y} = foo)
?我认为您在oof中加了一个额外的f。
不,解构不支持简写的成员表达式,而当前仅支持普通的属性名。目前已经谈关于这样的esdiscuss,但不建议将它做成ES6。
但是,您可能可以使用Object.assign
-如果不需要所有自己的属性,则仍然可以使用
var foo = …,
oof = {};
{
let {x, y} = foo;
Object.assign(oof, {x, y})
}
--harmony_destructuring
启用。我看到“ SyntaxError:意外的令牌。”
{oof.x, oof.y} = foo
。也许我真的很想念它。
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
要求很多,我只需要离散数据几块。但是,我同意应该做到这一点。
编辑: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 };
除了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"
}
*/
但是要使用此功能,您需要使用Babel stage-2
或transform-object-rest-spread
插件。这是关于Babel的演示stage-2
如果您使用的是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;
let myTest = { test1, test3 } = myObject;
不起作用
完全有可能。只是没有一个陈述。
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
您可以像这样使用重组:
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)
oof = {...oof, ...foo}
干燥
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})()});
您可以破坏直接分配给另一个对象属性的对象。
工作示例:
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
这适用于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"
}
oof
只是收到了的引用,foo
并绕过了整个销毁过程(至少在Chrome中是如此)。oof === foo
并let oof = { x } = foo
返回{ x, y }
我想出了这种方法:
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。
这是一种作弊行为,但您可以执行以下操作...
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' }
您可以使用JSON类方法来实现它,如下所示
const foo = {
x: "bar",
y: "baz"
};
const oof = JSON.parse(JSON.stringify(foo, ['x','y']));
// output -> {x: "bar", y: "baz"}
将需要添加到结果对象的属性作为第二个参数传递给stringify
数组格式的函数。
Object.assign(oof, foo)