Reduce和对象解构/赋值

Question

假设我有两个简单的对象，我想创建第三个对象来连接它们的属性。这是完美的工作方式：

(()=>{
  const a1 = {a: 2, b: 3}
  const b1 = {a: 100, c: 5}
  return {...a1, ...b1}
})()
// { a: 100, b: 3, c: 5 }

但是，一旦我尝试使用.reduce创建一个从b1派生的新对象，它就停止工作了。为简单起见，让我们创建一个reduce函数，该函数简单地创建b1对象的浅层副本：

​

let r = (()=>{
  const a1 = {a: 2, b: 3}
  const b1 = {a: 100, c: 5},
  b2 = Object.entries(b1).reduce((acc, [key, value])=>Object.defineProperty(acc, key, {value}), {})
  console.log(b2) // {a: 100 c: 5}
  return {...a1, ...b2}
})()
console.log(r);// { a: 2, b: 3 }

​

我有一种感觉，.reduce函数有一些我不理解的地方。我能做些什么来解决这个问题呢？

Answer 1

应将该属性标记为可枚举

Object.defineProperty(acc, key, {value, enumerable: true});

为什么不直接使用函数Object.assign，它很简单。

​

let r = (()=> {
  const a1 = {a: 2, b: 3};
  const b1 = {a: 100, c: 5};
  const b2 = Object.entries(b1).reduce((acc, [key, value]) => Object.assign(acc, {[key]: value}), {})
  console.log(b2); // {a: 100 c: 5}
  return {...a1, ...b2}
})()
console.log(r); // { a: 2, b: 3 }

​

Answer 2

默认情况下，使用defineProperty创建的属性是不可枚举的，因此它们不会包含在展开中。

要修复，请执行以下操作：

b2 = Object.entries(b1).reduce((acc, [key, value]) =>
  Object.defineProperty(acc, key, {value, enumerable: true})
, {})

Answer 3

一种修复方法是使用Object.assign创建b1的副本，如下所示：

​

let r = (()=>{
  const a1 = {a: 2, b: 3}
  const b1 = {a: 100, c: 5}
  const b2 = Object.assign({}, b1)
  console.log(b2) // {a: 100 c: 5}
  return {...a1, ...b2}
})()

console.log(r); // { a: 100, b: 3, c: 5 }

​