带对象的展开运算符

Question

我试图在 javascript 中解决这个问题：编写一个函数，该函数将一个对象作为包含带有个人信息的属性的参数 .Extract firstName, lastName, size, and weight 如果可用 .If size or weight given 将值转换为字符串 .将单位厘米附加到尺寸 .将单位公斤附加到重量上 .Return 具有我们感兴趣的所有可用属性的新对象 .所以我给出了这个解决方案：

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 而不是t 向对象添加任何属性。但是，如果 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 对象没有任何自己的可枚举属性。

现在，如果问题定义为 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: `cm` })}
=> {key1:value1, key2:value2 ,..., keyN:valueN, ...({ size: `10 cm` })
=> {key1:value1, key2:value2 ,..., keyN:valueN, size: `10 cm`}

如果obj.size=未定义，则：

{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}))

带对象的展开运算符

Spread operator with objects

javascript

spread

operator-keyword