带有对象的扩展运算符

如何解决带有对象的扩展运算符

我试图在 javascript 中解决这个问题：编写一个函数，该函数将一个对象作为参数，其中包含带有个人信息的属性 .如果可用，提取名字、姓氏、大小和重量 .如果给出大小或重量，将值转换为字符串 .将单位cm附加到尺寸 . 将单位 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,size:s.toString()+'cm',weight:w.toString()+'kg'};
}
else if(s===undefined || w===undefined){
    if (s===undefined && w!==undefined){
        newObj={fn:fn,weight:w.toString()+'kg'};
    }
    else if (s!==undefined && w===undefined) {
        newObj={fn:fn,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` }),};

}

有人可以向我解释（或将我推荐给我可以找到答案的地方）与扩展运算符的行，为什么当重量或尺寸的值未定义时它会起作用？谢谢

解决方法

有几件事正在发生：

对象扩展语法（它不是运算符）允许您“扩展”值 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，这（理论上）从原始对象创建一个 Number 对象（而不是原始对象） 0 然后传播其属性。它不会在对象中放置任何属性，因为默认情况下，Number 对象没有任何自己的可枚举属性。

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

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

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

如果 obj.size=10，则：

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

如果 obj.size=undefined，则：

{key1:value1,...(undefined )}
=> {key1:value1,keyN:valueN}