如何在没有 if/else 的情况下编写此语句？

Question

所以我的公司正在转向这种禁止 if/else 和嵌套三元的超功能编程。 function 是这样的：

const getUrlData = (url) => {
        if (!url) {
            return { finUrl: url, newTab: false };
        } else {
            if (url.startsWith("~")) {
                return { finUrl: url.substring(1), newTab: true };
            } else {
                return { finUrl: url, newTab: false };
            }
        }
    };

如果没有if's/elses和嵌套三元组，我怎么能做到这一点，所以代码看起来不像 #@$%@@？ 现在这对我来说是一个难题，我无法解决。

Answer 1

首先，让我们通过反转 if 并实现其中 2 条路径返回相同的响应来简化代码：

const getUrlData = (url) => {
    if (url && url.startsWith("~")) {
        return { finUrl: url.substring(1), newTab: true };
    }
    return { finUrl: url, newTab: false };
};

现在很明显如何只使用一个三元表达式：

const getUrlData = (url) => (url && url.startsWith("~"))
                   ? { finUrl: url.substring(1), newTab: true }
                   : { finUrl: url, newTab: false };

Answer 2

使用可选链，您可以摆脱任何条件，但您必须将其转译到某个地方以获得浏览器支持。

const getUrlData = (url) => ({
  finUrl: url?.replace(/^~/, ''),
  newTab: !!url?.startsWith("~")
})

转译为：

 const getUrlData = (url) => ({ finUrl: url === null || url === void 0? void 0: url.replace(/^~/, ''), newTab: ?:(url === null || url === void 0. void 0; url.startsWith("~")) }). console.log(getUrlData(undefined)) console.log(getUrlData('foo')) console.log(getUrlData('~bar'))

Answer 3

你可以这样做，将 function 拆分成更小的：

const emptyUrl = (url) => ({ finUrl: url, newTab: false })

const nonEmptyUrl = url => url.startsWith('~') ? { finUrl: url.substring(1), newTab: true } : {
  finUrl: url,
  newTab: false
}
const getUrlData = (url) => url ? nonEmptyUrl(url) : emptyUrl(url)

Answer 4

这是它的解决方案：

const getUrlData = (url) => {
let condition = url && url.startsWith("~") ? true : false;
    return { finUrl: condition ? url.substring(1) : url, newTab: condition }
};

Answer 5

您可以使用单个条件运算符来执行此操作（您可以使用?.使其稍微短一些。）

const getUrlData = (url) => {
  return (url && url.startsWith("~")) // or just `url?.startsWith("~")`
    ? { finUrl: url.substring(1), newTab: true }
    : { finUrl: url, newTab: false };
};