方括号在表达式中代表什么意思,例如 `var x = a + [b]`?

90

我们收到了一家代理机构提供的 JavaScript 代码,看起来有些不对,但却能够正常工作。

出于某种原因,他们在变量周围添加了方括号([, ]),像这样:

var some_variable = 'to=' + [other_variable];

这个方法是可行的,但似乎方括号是完全不必要的。

使用这种语法是否有目的或者说它是技术上不正确的,但被浏览器忽略了?


在MDN文档中很好地解释了这个问题:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring - Thomas Boja
4
@TomBoja,这个MDN页面适用于解构赋值,我认为与此情况无关。 - Richard Ev
8
我搜寻了一下,发现虽然这不是正确的问题,但如果其他人正在寻找在JS中方括号的替代用途,那么你可能会查看计算属性名:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names - Tabloo Quijico
7个回答

257

如果有人在查找有关方括号(在某人的JavaScript中看到)的奇怪/新语法可能是什么,就像我一样,那么在这里到达的任何其他人都要知道...

现在,随着ES6的出现,我们也可以在左侧使用[]来解构数组,例如:

const names = ['Luke', 'Eva', 'Phil']; 
const [first] = names;  
console.log(first); // 'Luke' 
const [first, second] = names;  
console.log(first, second); // 'Luke' 'Eva'

查看更多信息,请参见http://www.deadcoderising.com/2017-03-28-es6-destructuring-an-elegant-way-of-extracting-data-from-arrays-and-objects-in-javascript/或谷歌搜索“es6解构”。


51
这可能不是原帖作者想要的,但它确实回答了我来到这里时的问题。谢谢Jim Smart。 - Baron Young
7
我通过谷歌搜索来到这里,虽然它并没有回答上述问题,但满足了我所查询的内容。谢谢。 - Naimur Hasan
这是我需要的答案。吉姆很聪明,像吉姆一样。 - FailedUnitTest
这就是我来这里的原因!非常感谢您,亲切的先生,为您的解释。 - undefined

55

方括号表示创建新的数组。

var ar=new Array("a","b");
var ar=["a","b"]; //Equal to the syntax above

在这种情况下,无论您是否使用方括号都没有区别,因为如果它是一个数组,它将被转换为字符串,但是如果您删除方括号,它会节省时间,因为它不需要构建一个新的数组并将其转换,而是直接使用简单的字符串。


1
那么在我的例子中,是创建了一个包含一个元素的新数组? - Richard Ev
7
是的,然后它被转换为字符串。 - mck89
然而 new Array("a", "b") === ["a", "b"] 返回 false。 - MrMythical

49

即使不改变Array原型,也存在差异:

var other_variable;
var some_variable = 'to=' + [other_variable];

如果other_variableundefined,则返回数组的值为"to="

如果没有数组,则返回值为"to=undefined"


1
这叫什么?我在哪里可以找到文档/更多信息? - milos

20
b = "bar" + ["foo"]

这是语法上正确的,但确实非常冗余。它的工作原理如下:

["foo"]

JavaScript将字符串"foo"转换为一个只包含一个元素 "foo" 的数组:

"bar" + ["foo"]
当使用 + 而其中一个操作数是字符串(在本例中为 "bar"),JavaScript 会将第二个操作数转换为字符串。由于第二个操作数是数组,因此会调用 Array.toString 方法,默认情况下该方法返回所有元素由逗号连接的字符串。我们只有一个元素,结果将等于这个元素。也就是说,在这种情况下,"foo" 等同于 ["foo"]
如果重新定义 Array.toString,您可以更好地了解正在发生的情况:
alert("bar" + ["foo"])
Array.prototype.toString = function() { return "???"; }
alert("bar" + ["foo"])

9

我猜有人告诉那个人:

  • "使用数组进行字符串拼接,速度更快!"

意思是:

var some_variable = ['to=', other_variable].join("");

显然在需要大量拼接字符串时,使用StringBuilder会更快。但这并不重要,因为该代码可能只运行一次。 过早优化=sqrt(所有邪恶)

而可怜的家伙做了另一件无关紧要的事情...

我爱人民。


9
可以构建这样的情形:
var some_variable = 'to=' + other_variable;

并且还有这个:

var some_variable = 'to=' + [other_variable];

产生不同的结果。具体而言,如果Array.prototype.toString()方法(或者Array.prototype.join()方法)已经从它的默认值更改,那么任何事情都可能发生。例如,额外的功能可以被添加到Array.prototype.toString()方法中以生成日志信息、进行一些查找或任何其他操作。
我想,这种情况发生的可能性很小,但是为了完整起见,需要提及。

8

也许是这样...

使用方括号符号访问全局变量

方括号符号需要在括号左侧有某种对象引用。

["document"] //Array literal, not a Property Accessor!

-如果尝试给它赋值,它会产生错误,因为它会被视为一个数组文字,如果尝试从中读取,则返回包含方括号内字符串的单元素数组。全局变量通常仅通过其一个标识符进行引用。这似乎排除了使用保存其标识符名称的字符串或生成或返回其名称的表达式引用全局变量的可能性。然而,JavaScript 全局变量(以及全局函数名)是全局对象的属性。任何持有对全局对象的引用的标识符都可以在方括号左侧使用,形成属性访问器,引用全局变量。

在 Web 浏览器中,全局对象是脚本正在运行的窗口(或帧)。每个窗口(或帧)对象包含许多属性,其中至少有两个属性是对窗口(全局对象)本身的引用。这些属性分别是“window”和“self”。当引用全局变量时,可以将这些属性名称用作方括号左侧的标识符。因此,假设定义了一个全局变量:-

var anyName = 0;
  • 该全局变量可以被引用为:

    window["anyName"]

与方括号表示法的任何其他用法一样,方括号内的字符串可以保存在变量中或由表达式构建/返回。

在全局上下文中执行的代码、全局函数中的代码(除了使用 new 关键字调用的 Object 构造函数)以及任何函数之外的行内代码,还可以使用 this 关键字来引用全局对象。this 关键字是根据执行上下文来引用对象的。对于在全局上下文中执行的代码,这是全局对象(在 Web 浏览器上,是 window 对象)。因此,在执行全局上下文中的代码时,上面的变量也可以称之为 this["anyName"]。

然而,在脚本中使用 this 关键字很可能会导致混淆,特别是在包含自定义 JavaScript 对象的脚本中,其中这些对象的方法(和构造函数)将使用 this 来引用其自己的对象实例。

一些 JavaScript 实现没有指向全局对象的属性。因此,可以创建一个自己的全局变量来引用全局对象,而不是尝试使用 this 关键字来访问全局变量。

var myGlobal = this;
  • 在脚本开始时作为内联代码执行,将会分配一个全局对象的引用(指的是该上下文中的this)。从此以后,所有全局变量都可以使用方括号表示法来引用:

    myGlobal["任何名称"];

  • 并期望 myGlobal 在任何执行上下文中都指向全局对象。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接