带对象的扩展运算符

Question

我试图在 javascript 中解决这个问题： 编写一个函数，将对象作为参数，其中包含带有个人信息的属性 . 提取名字、姓氏、大小和重量（如果有） .如果给定大小或重量，则将值转换为字符串 . 将单位厘米附加到尺寸 . 将单位 kg 附加到重量上 .返回一个包含我们感兴趣的所有可用属性的新对象 .所以我给出了这个解决方案：

function myFunction(obj) {
const {fn:fn , ln:ln ,size:s ,weight:w}= obj;
var newObj= {fn:fn , ln:ln};
if (s!==undefined && w!==undefined){
    newObj={fn:fn , ln:ln ,size:s.toString()+'cm' ,weight:w.toString()+'kg'};
}
else if(s===undefined || w===undefined){
    if (s===undefined && w!==undefined){
        newObj={fn:fn , ln:ln ,weight:w.toString()+'kg'};
    }
    else if (s!==undefined && w===undefined) {
        newObj={fn:fn , ln:ln ,size:s.toString()+'cm'};
    }
}
return newObj

}

而作者的解决方案是：

function myFunction(obj) {
return {
  fn: obj.fn,
  ln: obj.ln,
  ...(obj.size && { size: `${obj.size}cm` }),
  ...(obj.weight && { weight: `${obj.weight}kg` }),
};

}

有人可以向我解释（或让我参考我在哪里可以找到答案）使用扩展运算符的行以及为什么当重量或大小的值未定义时它会起作用？ 谢谢

Answer 1

那里发生了几件事：

• 对象扩展语法（它不是运算符） 允许您“扩展”值null 和undefined。执行此操作时，不会向正在创建的对象添加任何属性。 （这就像Object.assign，它忽略了参数列表中的null 和undefined。）

• && 运算符接受两个操作数，计算第一个，如果该值为 falsy，则将该值作为结果；它只计算第二个操作数，如果第一个值为真，则将其作为结果。

将这两件事放在一起，在对象字面量中，...(obj.size && { size: `${obj.size}cm` }) 部分的工作方式如下：如果obj.size 是undefined，则基本上是...undefined，它不会向对象添加任何属性。但是如果obj.size 是真的，第二个操作数{ size: `${obj.size}cm` }（一个对象字面量）会被求值，产生一个对象，最后你会得到...{ size: `${obj.size}cm` }，它将size 属性添加到正在创建的对象中。

注意：如果obj.size 是0，则结果中不会有size 属性，因为0 是假的。所以作者很可能错误地使用该解决方案删除size 或weight：

function myFunction(obj) {
    return {
        fn: obj.fn,
        ln: obj.ln,
        ...(obj.size && { size: `${obj.size}cm` }),
        ...(obj.weight && { weight: `${obj.weight}kg` }),
    };
}

console.log(myFunction({fn: "fn", ln: "ln", size: 0}));

当obj.size 是0 时，您最终会在对象中得到...0，它（理论上）从原始0 创建一个Number 对象（而不是原始对象）然后传播其属性。它不会在对象中放置任何属性，因为默认情况下，Number 对象没有任何自己的可枚举属性。

现在，如果问题被定义为 size 和 weight 永远不会是 0，那么公平。但在推广该解决方案之前，我会仔细考虑。

Answer 2

带有扩展运算符的行应该可以工作！但是如果 obj.size resp，他们只会添加值。 obj.weight 不是未定义的！

在这种情况下，他们分别添加键大小。物体的重量。

如果 obj.size=10，那么：

{key1:value1, key2:value2 ,..., keyN:valueN, ...(obj.size && { size: `${obj.size}cm` })}
=> {key1:value1, key2:value2 ,..., keyN:valueN, ...(10 && { size: `${10}cm` })}
=> {key1:value1, key2:value2 ,..., keyN:valueN, ...({ size: `10 cm` })
=> {key1:value1, key2:value2 ,..., keyN:valueN, size: `10 cm`}

如果 obj.size=undefined，那么：

{key1:value1, key2:value2 ,..., keyN:valueN,...(obj.size && { size: `${obj.size}cm` })}
=> {key1:value1, key2:value2 ,..., keyN:valueN,...(undefined )}
=> {key1:value1, key2:value2 ,..., keyN:valueN}

Answer 3

查看我的代码

function myFunction(newobj) {

  for (const key in newobj) {
    if (key == 'size' || key == 'weight') {
      key === 'size' ? newobj[key] += 'cm' : key === 'weight' ? newobj[key] += 'kg' : newobj
    } else {
      newobj
    }
  }

  let { fn, ln, size, weight } = newobj;
  let destobj = { fn, ln, size, weight }

  if (size !== undefined || weight !== undefined) {

    if (size !== undefined && weight === undefined) {
      destobj = { fn, ln, size }
    }
    else if (weight !== undefined && size === undefined) {
      destobj = { fn, ln, weight }
    }
    else {
      destobj

    }
  }
  else {
    destobj = { fn, ln }
  }

  return destobj

}
console.log(myFunction({ fn: 'Martin', ln: 'Harper', age: 26, email: 'martin.harper@test.de', weight: 102}))