在 javascript 中的 return 中创建变量是一个好习惯吗？

Question

在Javascript中，在函数的return语句中，我无法显式声明这样的变量

return let text = "hello world!"

，到目前为止还不错

而且，当我声明一个变量时，我可以不用像

var

、

let

或

const

这样的关键字来完成它，这就是 w3school 所说的自动声明变量：https://www.w3schools.com/js /js_variables.asp 这样：

newVariable = "I'm a new variable"

而不是：

let newVariable = "I'm a new variable"

或那样：

const newVariable = "I'm a new const variable"

现在，我注意到，如果我在 return 语句中使用自动声明的变量，则似乎已在函数作用域之外声明了该变量：

let myP = document.getElementById("output");

function printInfos(name, age) {
  return info = `${name} is ${age}`;
}

printInfos("john", 4);

myP.textContent = info; // output "john is 4"

<p id="output"></p>

我认为正在发生的事情如下：

1. 函数返回展开后的整个表达式

   info = 'john is 4'

2. 然后将其评估为自动声明的变量

   info

但我想知道这在多大程度上是好的做法？

我已经认为自动声明的变量是不好的做法，但在大多数情况下，我什至不知道除了可读性之外的原因（当我看到没有关键字的变量时，我错误地认为它已经在之前声明过），因为我可以像对待它们一样对待它们带有

let

的声明

但是 return 语句中声明的大小写让我感到困惑，因为它允许我做一些我“正确”声明变量时无法做的事情，感觉就像一个错误

那么它是什么？我可以用吗？

Answer 1

您只能在非严格模式下以这种方式创建变量（这已被弃用）。

但它不是创建一个新变量，而是为全局对象的属性赋值（在我们的例子中为

window

）。所以可以认为你不能通过这种方式创建一个真正的新变量。

这也很糟糕，因为您可以覆盖分配给

window

的任何固有值或先前值。 另外，在 return 语句中引入新变量不会带来任何好处。就回来吧。

您可以通过中间变量将函数的结果分配给输出元素。看来也是白费力气了。直接赋值就可以了。

您可能会说您兑现了结果，但您可以为此创建一个记忆函数（最后一个片段）

let myP = document.getElementById("output");

function printInfos(name, age) {
  info = `${name} is ${age}`;
  // it's now a property of window
  console.log(window.info);
  return `${name} is ${age}`;
}

myP.textContent = printInfos("john", 4);

<p id="output"></p>

在严格模式下你会得到一个错误：

'use strict';

let myP = document.getElementById("output");

function printInfos(name, age) {
  info = `${name} is ${age}`;
  console.log(window.info);
  return `${name} is ${age}`;
}

printInfos("john", 4);

myP.textContent = info; // output "john is 4"

<p id="output"></p>

您可以使用多种方法来避免使用

const/let/var

声明新变量，例如通过函数参数（该示例不是现实生活中的情况）：

let myP = document.getElementById("output");

function printInfos(name, age, info = null) {
  info ??= [name, age];
  return info.join(' is ');
}

myP.textContent = printInfos("john", 4);

<p id="output"></p>

记忆版本（这里我们使用参数+闭包来避免变量声明+隐藏参数）：

let myP = document.getElementById("output");

const printInfos = (cache => (name, age) => cache[`${name}%${age}`] ??= `${name} is ${age}`)({});

myP.textContent = printInfos("john", 4);

<p id="output"></p>