SyntaxError: invalid assignment left-hand side

当在代码中出现意外的赋值情况时，JavaScript 就会抛出“invalid assignment left-hand side”的异常。当使用单个 = 符号而不是 == 或 === 时，可能会触发此异常。

错误信息

SyntaxError: Invalid left-hand side in assignment (V8-based)
SyntaxError: invalid assignment left-hand side (Firefox)
SyntaxError: Left side of assignment is not a reference. (Safari)

错误类型

SyntaxError 或 ReferenceError，根据语法情况来定。

什么地方出错了？

在某处出现了意外的赋值情况。比如说，这可能是因为赋值运算符与相等运算符不匹配。单个 = 符号用于给变量赋值，而 == 或 === 运算符则是用于比较值。

示例

典型的无效赋值情况

js
if (Math.PI + 1 = 3 || Math.PI + 1 = 4) {
  console.log("没门！");
}
// SyntaxError: invalid assignment left-hand side

const str = "你好，" += "你是在" += "找我吗？";
// SyntaxError: invalid assignment left-hand side

在 if 语句中，你需要使用严格相等运算符（===），而对于字符串拼接，则需要使用加号（+）运算符。

js
if (Math.PI + 1 === 3 || Math.PI + 1 === 4) {
  console.log("没门！");
}

const str = "你好，" + "来自" + "另一个世界！";

导致 ReferenceError 的赋值操作

无效的赋值操作不一定会产生语法错误。有时语法几乎是正确的，但在运行过程中，左侧表达式计算得出的是一个值而非引用，因此赋值仍然无效。这类错误会在程序执行到该语句时发生，即在实际执行阶段出现。

js
function foo() {
  return { a: 1 };
}
foo() = 1; // ReferenceError: invalid assignment left-hand side

函数调用、new 调用、super() 和 this 都是值而不是引用。如果你想在左侧使用它们，赋值目标需要是它们产生的属性值。

js
function foo() {
  return { a: 1 };
}
foo().a = 1;

备注： 在 Firefox 和 Safari 中，第一个示例在非严格模式下会产生 ReferenceError 错误，而在严格模式下则会产生 SyntaxError 错误。Chrome 在严格模式和非严格模式下都会抛出运行时的 ReferenceError 错误。

使用可选链运算符作为赋值目标

可选链运算符不是有效的赋值目标。

js
obj?.foo = 1; // SyntaxError: invalid assignment left-hand side

相反，你必须首先处理可能为空值的情况。

js
if (obj) {
  obj.foo = 1;
}

参见