JavaScript 代码优化符合 ES6 标准

Question

我对 ES6 不是很厉害，所以期待能得到一个小手：c。 如何优化此代码以获得更好的视觉外观？ 我尝试了以下解决方案，但是，我确信我可以在这里使用数组Array.prototype方法，如.map()或类似方法。 这里的想法是确保 const 列表永远不会undefined ，如果它们是 - 使用右侧的情况：

function getLeadingComments(context) {
    const contextOptions = context?.options[0];

    const description = contextOptions?.description || 'React based Progressive Web App';
    const author = contextOptions?.author || '';
    const license = contextOptions?.license || 'OSL-3.0';
    const packageName = contextOptions?.package || 'Powered by My Project';

    return `/**
 * ${description}
 *
 * Copyright © ${author}. All rights reserved.
 * See LICENSE for license details.
 *
 * @license ${license}
 * @package ${packageName}
 */
`;
}

Answer 1

正如Ivar所说，可选链接是在ES2020中引入的，如果左侧操作数是null或undefined ，您可以使用Nullish 合并运算符 (??)返回右侧。

function getLeadingComments(context) {
  const contextOptions = context?.options[0];

  const description =
    contextOptions?.description ?? "React based Progressive Web App";
  const author = contextOptions?.author ?? "";
  const license = contextOptions?.license ?? "OSL-3.0";
  const packageName = contextOptions?.package ?? "Powered by My Project";

  return `
/*
 * ${description}
 *
 * Copyright © ${author}. All rights reserved.
 * See LICENSE for license details.
 *
 * @license ${license}
 * @package ${packageName}
 */
`;
}

getLeadingComments({
  options: [
    {
      description: "Incoming Data Description",
      author: "Incoming Data Author",
      license: "Incoming Data License",
      package: "Incoming Data Package",
    },
  ],
});