我想从一个较大的对象创建一个新对象,方法是仅复制其中的几个属性。我知道的所有解决方案都不是很优雅,我想知道是否有更好的选择,如果可能的话,可以使用本机(如以下代码末尾没有其他功能)?
这是我现在通常要做的:
// I want to keep only x, y, and z properties:
let source = {
x: 120,
y: 200,
z: 150,
radius: 10,
color: 'red',
};
// 1st method (not elegant, especially with even more properties):
let coords1 = {
x: source.x,
y: source.y,
z: source.z,
};
// 2nd method (problem: it pollutes the current scope):
let {x, y, z} = source, coords2 = {x, y, z};
// 3rd method (quite hard to read for such simple task):
let coords3 = {};
for (let attr of ['x','y','z']) coords3[attr] = source[attr];
// Similar to the 3rd method, using a function:
function extract(src, ...props) {
let obj = {};
props.map(prop => obj[prop] = src[prop]);
return obj;
}
let coords4 = extract(source, 'x', 'y', 'z');
答案 0 :(得分:11)
一种实现方法是通过对象分解和箭头功能:
let source = {
x: 120,
y: 200,
z: 150,
radius: 10,
color: 'red',
};
let result = (({ x, y, z }) => ({ x, y, z }))(source);
console.log(result);
此方法的工作原理是立即使用(({ x, y, z }) => ({ x, y, z }))
作为参数调用箭头函数source
。它将source
分解为x
,y
和z
,然后立即将它们作为新对象返回。
答案 1 :(得分:5)
只需执行一个功能。
const extract = ({ x, y, z }) => ({ x, y, z });
let source = { x: 120, y: 200, z: 150, radius: 10, color: 'red' };
console.log(extract(source));
另一种解决方案是对具有目标属性的目标对象进行破坏。
let source = { x: 120, y: 200, z: 150, radius: 10, color: 'red' },
target = {};
({ x: target.x, y: target.y, z: target.z } = source);
console.log(target);
答案 2 :(得分:3)
IIFE可能会解体吗?:
const coords = (({x, y, z}) => ({x, y, z}))(source);
答案 3 :(得分:1)
您可以通过Spread Operator
进行以下操作
let source = {
x: 120,
y: 200,
z: 150,
radius: 10,
color: 'red',
};
let {radius, color, ...newObj} = source;
console.log(newObj);
答案 4 :(得分:1)
对于像这样的简单情况,其他答案中提到的对象分解非常简洁,但是当您加倍使用属性名称时,在处理较大的结构时往往显得有些麻烦。
扩展自己的答案-如果您要编写一个extract
实用程序(我会自己玩一玩)...您可以通过循环操作使其更加灵活-允许您交换参数的顺序(特别是将数据源放在最后),同时在接受属性名称时仍然会变化。
我认为这个签名:extract = (...props) => src => { ... }
更优雅,因为它在编写新的命名函数时允许更大程度的重用:
const extract = (...props) => src =>
Object.entries(src).reduce(
(obj, [key, val]) => (
props.includes(key) && (obj[key] = val),
obj
), {})
const getCoords = extract('x', 'y', 'z')
const source = {
x: 120,
y: 200,
z: 150,
radius: 10,
color: 'red'
}
console.log(getCoords(source))
答案 5 :(得分:0)
您可以在reduce
数组上尝试[x,y,z]
:
let source = {
x: 120,
y: 200,
z: 150,
radius: 10,
color: 'red',
};
const coords = ['x','y','z'].reduce((a,c) => Object.assign(a,{[c]: source[c]}), {});
console.log(coords);
答案 6 :(得分:0)
第一种方法优雅且易读。
请不要通过一些变通方法来混淆简单的操作。其他需要维护此代码的人,包括将来的自己,将来会非常感激。