方括号[]中的键值对是什么意思？

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中的数组是异常对象 ，因此您可以像对待任何其他对象一样为它们分配属性。

MDN 说 ：

数组是类似列表的对象

...

数组不能使用字符串作为元素索引（如在关联数组中），但必须使用整数。 使用括号表示法（或点表示法）通过非整数设置或访问不会从数组列表本身设置或检索元素，但会设置或访问与该数组的对象属性集合关联的变量。 数组的对象属性和数组元素列表是分开的，并且数组的遍历和变异操作不能应用于这些命名属性。

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数组初始化程序遵循与函数调用类似的语法。 数组初始值设定项在Array构造函数上不是语法糖 ，但它类似于接受以逗号分隔的表达式列表。 没有理由认为它的行为应该与对象文字 var obj = {"foo": "bar"}语法相同，它有自己的规范。 这是一件好事，因为滥用数组作为键值对象是不好的做法 ，就像滥用函数作为键值对象一样：

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

来自关于数组文字的MDN文章 ：

数组文字是零个或多个表达式的列表，每个表达式表示一个数组元素，用方括号（ [] ）括起来。 使用数组文字创建数组时，会使用指定的值作为其元素进行初始化，并将其长度设置为指定的参数数。

表达式是“解析为值的任何有效代码单元”。 key: value语法本身不是表达式，只是对象初始化程序语法的一部分，并且在MDN表达式参考页面中不存在。

---

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

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

打印机操作是实现定义的。 它接受指示严重性的日志级别，要打印的参数列表以及特定于实现的格式化选项的可选对象。 出现在args中的元素将是以下之一：

• 任何类型的JavaScript对象。

• 特定于实现的可打印事物表示，例如堆栈跟踪或组。

• 应用了通用JavaScript对象格式或最佳有用格式的 对象 。

...

实现如何打印args取决于实现，但实现应该通过空格或类似的东西来分隔对象，因为这已成为开发人员的期望。

此外， 2.3.3。 常见对象格式说明：

通常，对象将以适合其上下文的格式打印。 本节介绍了将对象格式化为在其上下文中最有用的常用方法。 应该注意的是，本节中描述的格式应用于最终将传递到打印机的特定于实现的对象表示，其中将看到格式的实际副作用。

具有通用JavaScript对象格式的对象是通用JavaScript对象的潜在可扩展表示。 具有最佳有用格式的对象是被判断为最有用且信息丰富的对象的特定于实现的，可能交互式的表示。

经验证据支持上述陈述：

Firefox 67.0

Edge 42.17134.1.0

两个浏览器都没有显示括号之间的数组属性，只显示其数字索引元素（如果存在）。 Chrome在其控件规范的实现中呈现这些属性这一事实并不意味着或暗示JS应该在其数组初始化程序中允许这种语法。 浏览器的控制台演示文稿与语言的语法之间根本没有任何关系。

Answer 2

你在这里有一个被滥用为对象文字的数组。 例如，数组也具有length属性。 就像这样，您可以为数组分配键，但不应该这样做。

目前还不完全清楚你想要的是什么，通常使用Object.assign（）和对象文字而不是数组。 他们有自己的功能。

Object.assign({}, n);

将是一个理智的用例。

Answer 3

Object.assign()只是从第二个参数开始循环遍历所有对象的可枚举键，并将它们添加到target对象。

因此， Object.assign(arr, obj) 大致归结为（ polyfill ）：

for(key in obj)
  arr[key] = obj[key]

当您想要更新数组的特定索引而不改变原始数组时（如在react中），可以使用此技术

所以，这段代码

 const arr = [1, 2, 3, 4] const clone = [...arr] clone[2] = 10; console.log(arr, clone) 

可以像这样写：

 const arr = [1, 2, 3, 4] const clone = Object.assign([], arr, { [2]: 10 }) console.log(arr, clone) 

Answer 4

如果要将对象更改为数组，则应执行以下操作：

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

for (let [key, value] of Object.entries(n)) {
console.log(`${key}: ${value}`);
}

Object.entries（）方法返回给定对象自己的可枚举字符串键控属性[key，value]对的数组，其顺序与for ... in循环提供的顺序相同（不同之处在于 - in循环枚举原型链中的属性）。 Object.entries（）返回的数组的顺序不依赖于对象的定义方式。

Answer 5

Javascript中的数组是{}

考虑：

 let obj = {"keyOne":"keyOneValue!", "keyTwo":'keyTwoValue!'}; let array = Object.assign([], obj); console.log('Array is', array); console.log('Array keys are currently: ', Object.keys(array)); console.log('array.keyOne value:', array.keyOne); console.log('array.keyTwo value:', array.keyTwo); console.log('But Array length is', array.length); array.push('hello'); console.log('Array push one element array.push("hello")'); console.log('Array length after push', array.length); console.log('Array keys are now!!!', Object.keys(array));