假设我有一个对象：
{
item1: { key: 'sdfd', value:'sdfd' },
item2: { key: 'sdfd', value:'sdfd' },
item3: { key: 'sdfd', value:'sdfd' }
}
我想通过过滤上面的对象来创建另一个对象，使我得到类似的东西。
{
item1: { key: 'sdfd', value:'sdfd' },
item3: { key: 'sdfd', value:'sdfd' }
}
我希望用ES6的扩展运算符来实现一个简洁的方法。
如果您有一组允许的值，您可以使用以下方法轻松地将它们保留在对象中：
const raw = {
item1: { key: 'sdfd', value:'sdfd' },
item2: { key: 'sdfd', value:'sdfd' },
item3: { key: 'sdfd', value:'sdfd' }
};
const allowed = ['item1', 'item3'];
const filtered = Object.keys(raw)
.filter(key => allowed.includes(key))
.reduce((obj, key) => {
obj[key] = raw[key];
return obj;
}, {});
console.log(filtered);这个代码使用以下方法：
Object.keys 枚举 raw 中的所有属性，然后Array.prototype.filter 选择出现在允许列表中的键，通过使用
Array.prototype.includes 确保它们存在Array.prototype.reduce 使用允许的属性构建一个新对象。这样可以复制允许的属性（但不会复制属性本身）。
你也可以使用展开语法创建一系列对象，而不会改变它们（感谢rjerue提出这个方法）：
const raw = {
item1: { key: 'sdfd', value:'sdfd' },
item2: { key: 'sdfd', value:'sdfd' },
item3: { key: 'sdfd', value:'sdfd' }
};
const allowed = ['item1', 'item3'];
const filtered = Object.keys(raw)
.filter(key => allowed.includes(key))
.reduce((obj, key) => {
return {
...obj,
[key]: raw[key]
};
}, {});
console.log(filtered);作为一项琐事，如果您想从原始数据中删除不需要的字段（我不建议这样做，因为它涉及到一些丑陋的突变），您可以像这样反转includes检查：
为了达到你的目的，你可以像这样反转includes检查来从原始数据中移除不需要的字段（虽然不建议这么做，因为这涉及到一些棘手的变化）：
const raw = {
item1: { key: 'sdfd', value:'sdfd' },
item2: { key: 'sdfd', value:'sdfd' },
item3: { key: 'sdfd', value:'sdfd' }
};
const allowed = ['item1', 'item3'];
Object.keys(raw)
.filter(key => !allowed.includes(key))
.forEach(key => delete raw[key]);
console.log(raw);我包含这个示例是为了展示一种基于变异的解决方案，但我不建议使用它。
Array.prototype.includes 不是 ES6 的一部分。它是在 ECMAScript 2016 (ES7) 中引入的。 - Vineetreturn { ...obj, [key]: raw[key] } - rjerueconst data = {
item1: { key: 'sdfd', value:'sdfd' },
item2: { key: 'sdfd', value:'sdfd' },
item3: { key: 'sdfd', value:'sdfd' }
};
const { item2, ...newData } = data;
现在，newData 包含：
{
item1: { key: 'sdfd', value:'sdfd' },
item3: { key: 'sdfd', value:'sdfd' }
};
或者，如果您将密钥存储为字符串：
const key = 'item2';
const { [key]: _, ...newData } = data;
在后一种情况下，[key] 被转换为 item2，但由于您正在使用 const 分配，所以您需要为分配指定一个名称。 _ 表示一个丢弃的值。
更一般地说：
const { item2, ...newData } = data; // Assign item2 to item2
const { item2: someVarName, ...newData } = data; // Assign item2 to someVarName
const { item2: _, ...newData } = data; // Assign item2 to _
const { ['item2']: _, ...newData } = data; // Convert string to key first, ...
这不仅将您的操作简化为一行代码，而且还不需要您知道其他键是什么（您想要保留的那些键）。
一个简单的实用函数看起来像这样：
function removePropFromObject(obj, prop) {
const { [prop]: _, ...rest } = obj
return { ...rest }
}
_代表一个可以忽略的值”，这个术语从哪里来？我第一次见到它。 - yhabib_ 只是一个在 JS 中可以使用的有效变量名称，但由于它几乎没有名字，如果你关心传达意图，就不应该以这种方式使用它。因此，它已被采用为表示你不关心的变量的一种方式。这里有更多关于它的讨论：https://dev59.com/gWgu5IYBdhLWcg3wU1mN - Ryan H.removePropFromObject 函数中，有必要再次返回展开的值吗？也就是说，你不能只做 return rest 而不是 return { ...rest } 吗？ - jorundur['item2'，'item4']，是否可以使用相同的解决方案？更进一步，如果是一个非允许值的数组，例如'[sdfd'，'abcd']在以下对象中：
{ item1: { key: 'sdfd', value:'sdfd' }, item2: { key: 'sdfd', value:'abcd' } }; - Derek Ballconst raw = { item1: { prop:'1' }, item2: { prop:'2' }, item3: { prop:'3' } };
const allowed = ['item1', 'item3'];
const filtered = Object.fromEntries(
Object.entries(raw).filter(
([key, val])=>allowed.includes(key)
)
);
了解更多： Object.fromEntries
Typescript中的Object.fromEntries时，请确保在tsconfig.json中设置"lib": ["ES2019"]。 - Stefan Stoicheventries/fromEntries技巧，但如果是一个大对象，它可能会影响性能 - https://jsbench.me/3ukxxhfgjr/1 - Mosh Feu虽然已经有人提到过，但是为了综合一些回答得出一个 ES6 的普遍解答：
const raw = {
item1: { key: 'sdfd', value: 'sdfd' },
item2: { key: 'sdfd', value: 'sdfd' },
item3: { key: 'sdfd', value: 'sdfd' }
};
const filteredKeys = ['item1', 'item3'];
const filtered = filteredKeys
.reduce((obj, key) => ({ ...obj, [key]: raw[key] }), {});
console.log(filtered);filteredKeys中有一个键不在raw中，则该键将以undefined的值出现在filtered中。在其他答案中，该键将根本不会出现在filtered中。 - Chuck您可以使用 Lodash#pick 找出最干净的方法。
const _ = require('lodash');
const allowed = ['item1', 'item3'];
const obj = {
item1: { key: 'sdfd', value:'sdfd' },
item2: { key: 'sdfd', value:'sdfd' },
item3: { key: 'sdfd', value:'sdfd' }
}
const filteredObj = _.pick(obj, allowed)
这只是用现代JS的一行代码的另一种解决方案，没有使用外部库。
我在尝试使用"Destructuring"特性：
const raw = {
item1: { key: 'sdfd', value: 'sdfd' },
item2: { key: 'sdfd', value: 'sdfd' },
item3: { key: 'sdfd', value: 'sdfd' }
};
var myNewRaw = (({ item1, item3}) => ({ item1, item3 }))(raw);
console.log(myNewRaw);undefined，例如如果我的原始数据中没有包含 item3，我认为你的代码会添加它。这可能不是所有情况下都是理想的（对于我的用例来说没问题！我正在使用它！）。 - charles-allen- Novy接下来的部分
在这两个答案的基础上：
https://dev59.com/21kT5IYBdhLWcg3wV-CY#56081419
https://dev59.com/21kT5IYBdhLWcg3wV-CY#54976713
我们可以这样做：
const original = { a: 1, b: 2, c: 3 };
const allowed = ['a', 'b'];
const filtered = Object.fromEntries(allowed.map(k => [k, original[k]]));
哪个更干净和更快：
好的，那这个一行代码怎么样？
const raw = {
item1: { key: 'sdfd', value: 'sdfd' },
item2: { key: 'sdfd', value: 'sdfd' },
item3: { key: 'sdfd', value: 'sdfd' }
};
const filteredKeys = ['item1', 'item3'];
const filtered = Object.assign({}, ...filteredKeys.map(key=> ({[key]:raw[key]})));
使用 Array.reduce 方法来处理允许的键，是另一种解决方案：
const raw = {
item1: { key: 'sdfd', value:'sdfd' },
item2: { key: 'sdfd', value:'sdfd' },
item3: { key: 'sdfd', value:'sdfd' }
};
const allowed = ['item1', 'item3'];
const filtered = allowed.reduce((obj, key) => {
obj[key] = raw[key];
return obj
}, {})
console.log(filtered);
特别是在处理较大的源对象（例如本示例中的原始数据）时，这将是有意义的。迭代不会使用源的所有条目执行，而是仅使用您想要过滤的键，因此更短/更快...
但我必须说，我也喜欢这里的答案中的解决方案，它使用了 Object.fromEntries, Array.filter, 和 Array.includes:
const object = Object.fromEntries(
Object.entries(raw).filter(([key, value]) => allowed.includes(key))
);
.reduce()” 的新特性是什么？我猜这个评论来自未来，但我认为即使在2020年它也不是新的。 - VLAZ你可以添加一个通用的ofilter（使用通用的oreduce实现），这样你就可以像过滤数组一样轻松地过滤对象 -
const oreduce = (f, acc, o) =>
Object
.entries (o)
.reduce
( (acc, [ k, v ]) => f (acc, v, k, o)
, acc
)
const ofilter = (f, o) =>
oreduce
( (acc, v, k, o)=>
f (v, k, o)
? Object.assign (acc, {[k]: v})
: acc
, {}
, o
)
我们可以在这里看到它正在运作 -
const data =
{ item1: { key: 'a', value: 1 }
, item2: { key: 'b', value: 2 }
, item3: { key: 'c', value: 3 }
}
console.log
( ofilter
( (v, k) => k !== 'item2'
, data
)
// [ { item1: { key: 'a', value: 1 } }
// , { item3: { key: 'c', value: 3 } }
// ]
, ofilter
( x => x.value === 3
, data
)
// [ { item3: { key: 'c', value: 3 } } ]
)
请在您自己的浏览器中验证以下结果 -
const oreduce = (f, acc, o) =>
Object
.entries (o)
.reduce
( (acc, [ k, v ]) => f (acc, v, k, o)
, acc
)
const ofilter = (f, o) =>
oreduce
( (acc, v, k, o)=>
f (v, k, o)
? Object.assign (acc, { [k]: v })
: acc
, {}
, o
)
const data =
{ item1: { key: 'a', value: 1 }
, item2: { key: 'b', value: 2 }
, item3: { key: 'c', value: 3 }
}
console.log
( ofilter
( (v, k) => k !== 'item2'
, data
)
// [ { item1: { key: 'a', value: 1 } }
// , { item3: { key: 'c', value: 3 } }
// ]
, ofilter
( x => x.value === 3
, data
)
// [ { item3: { key: 'c', value: 3 } } ]
)这两个函数可以用多种方式实现。 我选择在oreduce内附加到Array.prototype.reduce，但您也可以轻松地从头开始编写所有内容。
oreduce 中，第一个 acc 在 .reduce(acc, k) 中被遮蔽了，在 ofilter 中 o 也被遮蔽了 - oreduce 还使用了一个名为 o 的变量 - 那个是哪个？ - Jarrod Mosenofilter 中，变量 o 被遮蔽了，但它始终指向相同的输入变量；这就是为什么它在这里被遮蔽，因为它是相同的 - 累加器(acc)也被遮蔽，因为它更清楚地显示了数据如何通过 lambda 移动；acc 不总是相同的 绑定，但它始终代表我们希望返回的当前 持久 计算结果的状态。 - Mulan