javascript - JavaScript 中对象的可选值

Question

这个问题已经有答案了:

How to use optional chaining in Node.js 12 (5 个回答)

已关闭 10 个月前。

我的目的是从对象中获取值并将其传递给其他对象，或者如果键不存在则使用默认值。 They使用运算符|| ，但它对我不起作用。

当我尝试在在线编码平台中编译代码部分的片段时:https://www.programiz.com/javascript/online-compiler/ ，它会抛出一个错误:

代码:

const object = {
  "a": 1,
  "b": 2
};

console.log({
  "a": object?.a || 2,
  "b": object?.b || 4,
  "c": object?.c || 6
});

错误:

    "a": object?.a || 2,
                ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47

Answer 1

看起来该网站使用的任何 JavaScript 引擎都不支持可选链接 (?.)。但您的示例中不需要可选链接，object 永远不会 null 或 undefined - 属性它可能不存在，但object本身永远不会null或undefined。因此，只需删除 ? ("a": object.a || 2,)。

const object = {
    a: 1,
    b: 2,
};

console.log({
    a: object.a || 2,
    b: object.b || 4,
    c: object.c || 6,
});

也就是说，您可能会寻找其他站点(或在本地运行)。可选链接已经在该语言中存在了几年了......

与可选链接同时添加的另一件事与此处相关:??，即“无效合并”。这可能是您真正想要的代码。如果左侧值为 any falsy value，则 || 将使用右侧值。 , ?? 仅在左侧值为 null 或 undefined 时才使用右侧值。以下是差异示例 - 请注意我如何将 a 的值从 1 更改为 0，并注意使用每个运算符后记录的内容:

const object = {
    a: 0,
    b: 2,
};

console.log("Using ||:");
console.log({
    a: object.a || 2,
    b: object.b || 4,
    c: object.c || 6,
});

console.log("Using ??:");
console.log({
    a: object.a ?? 2,
    b: object.b ?? 4,
    c: object.c ?? 6,
});

.as-console-wrapper {
    max-height: 100% !important;
}

注意object.a || 如何2 使用了 2，但是 object.a ?? 2 使用了 0(object.a 的值)。

如果 object 可能为 null 或 undefined，您可能需要可选链接和 nullish 合并:

function example(object) {
    console.log(`Using ${JSON.stringify(object)}:`);
    console.log({
        a: object?.a ?? 2,
        b: object?.b ?? 4,
        c: object?.c ?? 6,
    });
}
example(null);
example({
    a: 0,
    b: 2,
});

.as-console-wrapper {
    max-height: 100% !important;
}