JavaScript 声明一个变量并在一个语句中使用逗号运算符？

Question

众所周知，要声明多个变量，可以使用如下格式：let k = 0,    j = 5 /*etc....*/众所周知，要在一行中执行多个语句（这对于箭头函数很有用，因此不必编写return关键字），也使用逗号“，”运算符，如下所示：let r = "hello there world, how are you?".split("").map(x => (x+=5000, x.split("").map(  y => y+ + 8).join(""))).join("")console.log(r)不是最优雅的例子，但重点是您可以在一行中执行多个语句，用逗号“，”分隔，并返回最后一个值。所以问题：你如何结合这两种技术？意思是，我们如何在一行中声明一个变量，然后在一个逗号之后，将该变量用于某事？以下不起作用：let k = 0, console.log(k), k += 8说未捕获的语法错误：意外的标记“。”并且没有console.log，它认为我正在重新声明k：let k = 0, k += 8给Uncaught SyntaxError: Identifier 'k' has already been declared并将整个内容放在括号中，如下所示：(let k = 0, k += 8);给Uncaught SyntaxError: Unexpected identifier指的是关键字“让”。但是，没有那个关键字，就没有问题：(k = 0, k += 8);除了 k 现在变成了一个全局变量，这是不想要的。这里有某种解决方法吗？如何在 JavaScript 中将逗号运算符与局部变量声明一起使用？编辑响应 VLAZ 的 eval 部分答案，将参数传递给 eval，可以制作一个自定义函数：function meval(mainStr, argList) {    let ID = (        Math.random().toString() +         performance.now().toString()            ).split(".").join("").split("")    .map(x => ("qwertyuio")[x])    .join(""),        varName = "$______"+ID+"_____$",        str = `        var ${varName} = {};        (argList => {            Object.entries(argList).forEach(x => {                ${varName}[x[0]] = x[1];               })                     });    `;  let myEval = eval;                  return (() => {    myEval(str)(argList)    myEval(`      ${        Object.keys(argList).map(x =>           "let " + x + " = " + varName + "['" + x +"'];"        ).join("\n")      }      ${mainStr}      delete window[${varName}];    `)      })()}meval(`    var g = a.ko + " world!"    `, {    a: {ko: "hi"}})console.log(g);

Answer 1

你不能这样做。变量声明语法允许使用逗号以便一次声明多个变量。每个变量也可以选择性地初始化为声明的一部分，因此语法是（更抽象地）：

(var | let | const) variable1 [= value1], variable2 [= value2], variable3 [= value3], ..., variableN [= valueN]

但是，这不是逗号运算符。就像逗号 inparseInt("42", 10)也不是逗号运算符一样 - 它只是逗号字符在不同的上下文中具有不同的含义。

然而，真正的问题是逗号运算符与表达式一起使用，而变量声明是一个语句。

差异的简短说明：

表达式

基本上任何产生值的东西：2 + 2, fn(), a ? b : c, 等等。它将被计算并产生一些东西。

表达式可以在很多情况下嵌套：2 + fn()或者( a ? ( 2 + 2 ) : ( fn() ) )（为清楚起见，每个表达式都用括号括起来）。即使一个表达式没有产生一个不会改变事物的可用值——一个没有显式返回的函数也会产生undefined，所以2 + noReturnFn()会产生乱码，但它仍然是一个有效的表达式语法。

注意 1 of 2（下一节中更多）：变量赋值是一个表达式，doinga = 1将产生被赋值的值：

let foo;

console.log(foo = "bar")

展开片段

声明

这些不会产生价值。不undefined只是没有。示例包括if(cond){}, return result, switch。

声明仅在独立时有效。你不能像这样嵌套它们，if (return 7)因为这在语法上是无效的。您不能进一步在预期表达式的情况下使用语句 -console.log(return 7)同样无效。

请注意，表达式可以用作语句。这些被称为表达式语句：

console.log("the console.log call itself is an expression statement")

展开片段

因此，您可以在语句有效的情况下使用表达式，但不能在表达式有效的情况下使用语句。

注意 2 of 2：变量赋值是一个表达式，但是带赋值的变量声明不是。它只是变量声明语句语法的一部分。所以，这两者重叠但不相关，只是逗号运算符和声明多个变量是相似的（允许你做多件事）但不相关。

console.log(let foo = "bar"); //invalid - statement instead of expression

展开片段

与逗号运算符的关系

现在我们知道了区别，它应该变得更容易理解了。逗号运算符的形式为

exp1, exp2, exp3, ..., expN

并接受表达式，而不是语句。它一个一个地执行它们并返回最后一个值。由于语句没有返回值，因此它们在这种情况下永远不会有效：(2 + 2, if(7) {})从编译器/解释器的角度来看是无意义的代码，因为这里不能返回任何东西。

因此，考虑到这一点，我们不能真正混合变量声明和逗号运算符。let a = 1, a += 1不起作用，因为逗号被视为变量声明语句，如果我们尝试这样做( ( let a = 1 ), ( a += 1 ) )仍然无效，因为第一部分仍然是语句，而不是表达式。

可能的解决方法

如果您确实需要在表达式上下文中生成变量并避免生成隐式全局变量，那么您可以使用的选项很少。让我们用一个函数来说明：

const fn = x => {

  let k = computeValueFrom(x);

  doSomething1(k);

  doSomething2(k);

  console.log(k);

  return k;

}

因此，它是一个产生一个值并在少数地方使用它的函数。我们将尝试将其转换为速记语法。

IIFE

const fn = x => (k => (doSomething1(k), doSomething2(k), console.log(k), k))

                   (computeValueFrom(x));

fn(42);

在您自己的内部声明一个以k为参数的新函数，然后立即使用 的值调用该函数computeValueFrom(x)。如果为了清楚起见，我们将函数与调用分开，我们会得到：

const extractedFunction = k => (

  doSomething1(k), 

  doSomething2(k), 

  console.log(k), 

  k

);

const fn = x => extractedFunction(computeValueFrom(x));

fn(42);

因此，该函数k使用逗号运算符按顺序获取和使用它几次。我们只是调用函数并提供 的值k。

使用参数作弊

const fn = (fn, k) => (

  k = computeValueFrom(x), 

  doSomething1(k), 

  doSomething2(k), 

  console.log(k), 

  k

);

fn(42);

基本上和以前一样——我们使用逗号操作符来执行几个表达式。但是，这次我们没有额外的功能，我们只是在fn. 参数是局部变量，因此它们的行为类似于let/var在创建局部可变绑定方面。然后我们分配给该k标识符而不影响全局范围。这是我们的第一个表达式，然后我们继续其余的。

即使有人调用fn(42, "foo")第二个参数也会被覆盖，所以实际上它就像fn只接受一个参数一样。

使用正常的函数体作弊

const fn = x => { let k = computeValueFrom(x); doSomething1(k); doSomething2(k); console.log(k); return k; }

fn(42);

我撒了谎。或者更确切地说，我作弊了。这不在表达式上下文中，您拥有与以前相同的所有内容，但它只是删除了换行符。重要的是要记住，您可以这样做并用分号分隔不同的语句。它仍然是一条线，几乎没有比以前长。

函数组合和函数式编程

const log = x => {

  console.log(x);

  return x;

}

const fn = compose(computeValueFrom, doSomething1, doSomething2, log) 

fn(42);

这是一个巨大的话题，所以我几乎不会在这里触及表面。我也只是为了介绍这个概念而过度简化了事情。

那么，什么是函数式编程（FP）？

它使用函数作为基本构建块进行编程。是的，我们确实已经有了函数，并且我们确实使用它们来生成程序。然而，非 FP 程序本质上是使用命令式结构将效果“粘合”在一起。因此，您会期望ifs、fors 和调用多个函数/方法来产生效果。

在 FP 范式中，您拥有使用其他功能一起编排的功能。很多时候，这是因为您对数据上的操作链感兴趣。

itemsToBuy

  .filter(item => item.stockAmount !== 0)      // remove sold out

  .map(item => item.price * item.basketAmount) // get prices

  .map(price => price + 12.50)                 // add shipping tax

  .reduce((a, b) => a + b, 0)                  // get the total

数组支持来自函数世界的方法，因此这是一个有效的 FP 示例。

什么是功能组合

现在，假设您想从上面获得可重用的功能，然后提取这两个：

const getPrice = item => item.price * item.basketAmount;

const addShippingTax = price => price + 12.50;

但是你真的不需要做两次映射操作。我们可以将它们重写为：

const getPriceWithShippingTax = item => (item.price * item.basketAmount) + 12.50;

但是让我们尝试在不直接修改函数的情况下这样做。我们可以一个接一个地调用它们，这样就可以了：

const getPriceWithShippingTax = item => addShippingTax(getPrice(item));

我们现在已经重用了这些功能。我们会调用getPrice并将结果传递给addShippingTax. 只要我们调用的下一个函数使用前一个函数的输入，这就会起作用。但这并不是很好——如果我们想调用三个函数f, g, 和h一起，我们需要x => h(g(f(x))).

现在终于到了函数组合的用武之地。调用这些是有顺序的，我们可以概括它。

const compose = (...functions) => input => functions.reduce(

    (acc, fn) => fn(acc),

    input

)

const f = x => x + 1;

const g = x => x * 2;

const h = x => x + 3;

//create a new function that calls f -> g -> h

const composed = compose(f, g, h);

const x = 42

console.log(composed(x));

//call f -> g -> h directly

console.log(h(g(f(x))));

展开片段

你去了，我们已经将这些功能与另一个功能“粘合”在一起。相当于做：

const composed = x => {

  const temp1 = f(x);

  const temp2 = g(temp1);

  const temp3 = h(temp2);

  return temp3;

}

但支持任意数量的函数，并且不使用临时变量。因此，我们可以概括很多我们有效地执行相同操作的过程 - 从一个函数传递一些输入，获取输出并将其馈送到下一个函数，然后重复。

我在哪里作弊

呵呵，小子，告白时间：

正如我所说 - 功能组合与接受前一个输入的功能一起使用。所以，为了做我在 FP 部分一开始所做的事情，然后doSomething1需要doSomething2返回他们得到的值。我已经将其包括在内log以显示需要发生的事情 - 获取一个值，用它做某事，返回该值。我只是试图展示这个概念，所以我使用了最短的代码来达到足够的程度。

compose可能是用词不当。它有所不同，但有很多实现通过参数向后compose工作。所以，如果你想打电话-> ->你实际上会做. 这是有道理的——毕竟是真实的版本，所以这就是模仿。但它读起来不太好。我展示的从左到右的组合通常被命名为（如在Ramda中）或（如在Lodash中）。我认为如果用于功能组合标题会更好，但你的阅读方式一开始是违反直觉的，所以我选择了从左到右的版本。fghcompose(h, g, f)h(g(f(x)))composepipeflowcomposecompose

函数式编程真的非常非常多。有一些结构（类似于数组是 FP 结构）允许您从某个值开始，然后使用该值调用多个函数。但是组合更容易开始。

禁术eval

Dun, dun, dunn!

const fn2 = x => (eval(`var k = ${computeValueFrom(x)}`), doSomething1(k), doSomething2(k), console.log(k), k)

fn(42);

所以……我又撒谎了。你可能会想“天哪，如果这都是谎言，我为什么要使用这个人在这里写的任何人”。如果您认为-很好，请继续思考。不要使用它，因为它非常糟糕。

无论如何，我认为在其他人没有正确解释它为什么不好的情况下跳进去之前值得一提。

首先，发生了什么 - 使用eval动态创建本地绑定。然后使用所述绑定。这不会创建全局变量：

const f = x => (eval(`var y =  ${x} + 1`), y);

console.log(f(42));         // 42

console.log(window.y);      // undefined

console.log("y" in window); // false

console.log(y);             // error

展开片段

考虑到这一点，让我们看看为什么应该避免这种情况。

嘿，你注意到我用var了 , 而不是letorconst吗？这只是你可以让自己陷入的第一个陷阱。使用的原因var是当使用or调用时eval 总是会创建一个新的词法环境。您可以查看规范章节18.2.1.1 Runtime Semantics: PerformEval。由于和仅在封闭的词法环境中可用，因此您只能在内部访问它们而不能在外部访问它们。letconstletconsteval

eval("const a = 1; console.log('inside eval'); console.log('a:', a)");

console.log("outside eval");

console.log("a: ", a); //error

展开片段

所以，作为一个黑客，你只能使用var这样声明在外部可用eval。

但这还不是全部。您必须非常小心传入的内容，eval因为您正在生成代码。我确实通过使用数字作弊（......一如既往）。数字文字和数值是相同的。但是，如果您没有数字，会发生以下情况：

const f = (x) => (eval("var a = " + x), a);

const number = f(42);

console.log(number, typeof number); //still a number

const numericString = f("42");

console.log(numericString, typeof numericString); //converted to number

const nonNumericString = f("abc"); //error

console.log(nonNumericString, typeof nonNumericString);

展开片段

问题是生成的代码numericString是var a = 42;- 那是字符串的值。所以，它被转换了。然后nonNumericString你会得到错误，因为它会产生var a = abc并且没有abc变量。

根据字符串的内容，你会得到各种各样的东西——你可能会得到相同的值但转换为数字，你可能会得到完全不同的东西，或者你可能会得到一个 SyntaxError 或 ReferenceError。

如果要将字符串变量保留为字符串，则需要生成字符串文字：

const f = (x) => (eval(`var a = "${x}"`), a);

const numericString = f("42");

console.log(numericString, typeof numericString); //still a string

const nonNumericString = f("abc"); //no error

console.log(nonNumericString, typeof nonNumericString); //a string

const number = f(42);

console.log(number, typeof number); //converted to string

const undef = f(undefined);

console.log(undef, typeof undef); //converted to string

const nul = f(null);

console.log(nul, typeof nul); //converted to string

展开片段

这行得通...但是您会丢失实际输入的类型-var a = "null"与null.

如果你得到数组和对象，那就更糟了，因为你必须对它们进行序列化才能将它们传递给eval. 并且JSON.stringify不会削减它，因为它不能完美地序列化对象 - 例如，它会删除（或更改）undefined值、函数，并且在保留原型或循环结构方面完全失败。

此外，eval编译器无法优化代码，因此它比简单地创建绑定要慢得多。如果您不确定是否会出现这种情况，那么您可能没有点击该规范的链接。现在就这样做。

后退？好的，你注意到跑步时涉及了多少东西eval吗？每个规范有 29 个步骤，其中多个引用了其他抽象操作。是的，有些是有条件的，是的，步骤的数量并不一定意味着它需要更多的时间，但它肯定会做比创建绑定所需的更多的工作。提醒一下，引擎无法动态优化，所以它会比“真实”（非eval编辑）源代码慢。

那是在提到安全性之前。如果你不得不对你的代码进行安全分析，你会非常讨厌 eval。是的，eval 可以安全eval("2 + 2")不会产生任何副作用或问题。问题是您必须绝对确定您将已知的良好代码提供给eval. 那么，分析的目的是eval("2 + " + x)什么？在我们追溯所有可能的路径x以进行设置之前，我们不能说。然后追溯用于设置的任何内容x。然后追溯那些，等等，直到你发现初始值是安全的。如果它来自不受信任的地方，那么你就有问题了。

示例：您只需获取 URL 的一部分并将其放入x. 说，你有一个example.com?myParam=42，所以你myParam从查询字符串中获取值。攻击者可以轻而易举地制作一个查询字符串，该字符串已myParam设置为窃取用户凭据或专有信息并将其发送给自己的代码。因此，您需要确保过滤myParam. 但是你也必须经常重新做同样的分析——如果你引入了一个新的东西，你现在x从一个cookie中获取价值怎么办？好吧，现在这很脆弱。

即使的每个可能值x都是安全的，您也不能跳过重新运行分析。而且您必须定期执行此操作，然后在最好的情况下，只需说“好的，没关系”。但是，您可能还需要证明这一点。您可能需要一个充实的x一天。如果您eval再使用四次，则需要整整一周。

所以，只要遵守古老的格言“eval is evil”。当然，它不一定是，但它应该是最后的工具。