javascript - 在对象字面量内使用带有三元运算符的扩展语法

标签 javascript

考虑以下代码,其中一个对象由两部分组成:值及其相应的描述:

let flagConfigObj = {};

const features = {
  f1: {
    value: 1,
    type: 'type1'
  },
  f2: {
    value: 2,
    type: 'type2'
  }
};

let featuresDescription = {
  f1: {
    description: 'desc 1'
  },
  f2: {
    description: 'desc 2'
  }
};

Object.keys(features).forEach(key => {
  flagConfigObj[key] = {
    ...features[key],
    ...(featuresDescription[key] || { some: 'backup' })
  };
});

console.log(flagConfigObj);

正如您可能注意到的,构造复合 Material 时,有 || 运算符防止表单传播不存在的对象并将其替换为一些默认模板。因此,此代码的输出将是:

{ 
  f1: { value: 1, type: 'type1', description: 'desc 1' },
  f2: { value: 2, type: 'type2', description: 'desc 2' } 
}

但是当featuresDescription中相应的描述字段丢失时,它会被替换为:

{ 
  f1: { value: 1, type: 'type1', description: 'desc 1' },
  f2: { value: 2, type: 'type2', some: 'backup' } 
}

问题

如何用三元运算符 ?: 替换 || 语法? 我尝试过一些有趣的组合,例如

featuresDescription[key] ? ...featuresDescription[key] : {some: 'backup'}
{featuresDescription[key]} ? ...featuresDescription[key] : {some: 'backup'}

但是它们都给出了语法错误,我现在感觉只是盲目地随机化 [,],},{,... 的位置,而不是真正理解它......

一如既往地感谢任何帮助!

最佳答案

扩展语法是对象初始化语法的一部分,但不是通用表达式语法的一部分,所以你的整个? : 必须位于右侧:

 ... featuresDescription[key] ? featuresDescription[key] : { some: "backup" }

在这种特殊情况下,这与简单的 || 原始版本之间没有任何有效的区别。表达式

expr1 ? expr1 : expr2

表示“如果 expr1 计算结果为“真”值,则使用它的值;否则使用 expr2 的值”。这和什么完全一样

expr1 || expr2

的意思是。 (好吧,忽略 expr1 可能的副作用,这将是使用更简单的 || 形式的更强烈的动机,除非你为 future 埋下陷阱程序员。)

关于javascript - 在对象字面量内使用带有三元运算符的扩展语法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60309975/

相关文章:

javascript - 每第二次运行都会抛出 : MongoError: Topology was destroyed

javascript - 如何检测浏览器的协议(protocol)处理程序?

javascript - Google 跟踪代码管理器未加载 JavaScript,错误消息 "anonymous function"

javascript - Silktide cookie 同意 3.0.3 与使用 CSS 伪元素的 Font Awesome 5.0.2 冲突

javascript - Jquery 检查属性总是返回 false

javascript - 如何在 CSS 转换期间阻止处理事件循环中的其他消息?

javascript - 在 'Access-Control-Allow-Origin' 设置为 '*' 的 connectjs 中提供静态文件

JavaScript 编码风格 : curly brace after multiline condition

javascript - 从另一个 promise 返回 promise 的原因?

javascript - 在用户向下滚动时将元素 "up"滑动到另一个元素上,没有固定定位?