使用对象展开运算符

Question

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

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

，（理论上）它从原语

Number

创建一个

0

对象（而不是原语），然后传播其属性。它不会在对象中放置任何属性，因为默认情况下，

Number

对象没有任何自己的可枚举属性。

现在，如果问题被定义为

size

和

weight

永远不会是

0

，那就足够公平了。但在推广该解决方案之前，我会“仔细考虑”。

Answer 2

在这种情况下，他们分别添加了按键尺寸。物体的重量。

如果 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: '[email protected]', weight: 102}))