javascript - 方括号 [] 内的键值对是什么意思？

Question

让我们考虑以下是我的对象:

var n = {"aa":"x","dd":'d'};

我在 Object.assign 中使用方括号.它给出了以下结果。 [aa: "x", dd: "d"] .最终代码是:

var n = {"aa":"x","dd":'d'};
var m = Object.assign([],n);

// result is 
[aa: "x", dd: "d"]

在 console.log __proto__告诉这是 Array，如果它是后面的代码给出的数组，unexpected token error

var v = ["sss":"ddd","ccc":"ddd"]; 

这是什么意思？

Answer 1

数组是 JS 中的对象

JS 中的数组是 exotic objects ，因此您可以像任何其他对象一样为它们分配属性。

MDN says :

Arrays are list-like objects

...

Arrays cannot use strings as element indexes (as in an associative array) but must use integers. Setting or accessing via non-integers using bracket notation (or dot notation) will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array's object property collection. The array's object properties and list of array elements are separate, and the array's traversal and mutation operations cannot be applied to these named properties.

Object.assign不知道数组和对象之间的区别，只是将参数 2+ 中的键分配给参数 1 处的对象。这种行为应该不会太令人惊讶。

const a = [];
a.foo = 42;
const b = Object.assign([], a);                  // sure, why not?
console.log(typeof a, typeof b, b.foo);          // => object object 42
console.log(Array.isArray(a), Array.isArray(b)); // => true true

var a = ["foo": "bar"]语法不起作用，因为 JS 数组初始值设定项遵循与函数调用类似的语法。数组初始值设定项是 not syntactic sugar在 Array构造函数，但它的相似之处在于它接受以逗号分隔的表达式列表。没有理由认为它的行为方式应该与 object literal 相同。 var obj = {"foo": "bar"}语法，它有自己的规范。这是一件好事，因为它是 poor practice滥用数组作为键值对象就像滥用函数作为键值对象一样:

const func = () => "hello";
func.foo = 42;
console.log(func.foo, typeof func, func()); // => 42 function hello

来自 MDN article在数组文字上:

An array literal is a list of zero or more expressions, each of which represents an array element, enclosed in square brackets ([]). When you create an array using an array literal, it is initialized with the specified values as its elements, and its length is set to the number of arguments specified.

Expressions是“解析为值的任何有效代码单元”。 key: value语法本身不是一个表达式，只是对象初始化器语法的一部分，它在 MDN expression reference page 中不存在。 .

浏览器控制台打印是实现定义的

离开 JS 并进入浏览器，您发布的图像显示了 Chrome 如何使用属性记录数组，但这是根据 console.log 中的以下规范定义的实现。 -> console.logger -> console.printer :

The printer operation is implementation-defined. It accepts a log level indicating severity, a List of arguments to print, and an optional object of implementation-specific formatting options. Elements appearing in args will be one of the following:

• JavaScript objects of any type.

• Implementation-specific representations of printable things such as a stack trace or group.

• Objects with either generic JavaScript object formatting or optimally useful formatting applied.

...

How the implementation prints args is up to the implementation, but implementations should separate the objects by a space or something similar, as that has become a developer expectation.

此外，2.3.3. Common object formats状态:

Typically objects will be printed in a format that is suitable for their context. This section describes common ways in which objects are formatted to be most useful in their context. It should be noted that the formatting described in this section is applied to implementation-specific object representations that will eventually be passed into Printer, where the actual side effect of formatting will be seen.

An object with generic JavaScript object formatting is a potentially expandable representation of a generic JavaScript object. An object with optimally useful formatting is an implementation-specific, potentially-interactive representation of an object judged to be maximally useful and informative.

经验证据支持上述陈述:

火狐 67.0



边缘 42.17134.1.0



两个浏览器都没有在括号之间显示数组的属性，只显示它的数字索引元素(如果存在的话)。 Chrome 在其控制台规范的实现中呈现这些属性的事实并不强制或暗示 JS 应该在其数组初始值设定项中允许这种语法。浏览器的控制台显示和语言的语法之间根本没有关系。