仅当某值存在时才向其添加属性，&&，...

啧啧静

于 2022-12-22 14:47:12 发布

阅读量220

点赞数

文章标签： JavaScript 逻辑运算符展开运算符对象属性数组映射

本文链接：https://blog.youkuaiyun.com/zezejingi/article/details/128408421

版权

本文介绍了如何利用JavaScript中的逻辑运算符（&&）和展开运算符（...）来更简洁地为对象添加属性。示例中展示了在条件满足时如何优雅地为person2对象添加sex属性，以及在处理数组时如何根据条件为数组元素添加artificers属性。这种方法提高了代码的可读性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时，如果对象已经定义了属性，我们需要向对象添加属性，我们可能会这样写：

const person1= { id:'1001', name: '李四', sex:'18' }
const person2= { id:'1001',  name: '张三' }
const is_show= true

if (is_show) {
   person2.sex= person1.sex 
}

我们可以用一些更加便捷得方式来做：
|| 经常用于赋值；&& 经常执行后续代码
可以看到展开运算符的优先级还是比较低的

// 对象
const is_show = true
const person2= {
   id: '1001',
   name: '张三'
   ...is_show&& { sex: '18' }
}

// 数组
const person2 = this.person_list.map(item => {
   return {
     id: item.id,
     name: item.name, // 商品名称
     product_id: item.product_id, // 商品id
     sku_id: item.sku_id, // 商品sku_id
     recommend_user_id: item.recommend_user_id,  // 开单人
     ...(item.artificers.length && { artificers: item.artificers })  //商品没有技师  服务有技师，技师有长度得时候先添加artificers 属性
   };
 })