试图理解看起来像对象功能的 Javascript 代码作为地图

Question

我正在学习 javascript，遇到了一些类似于以下代码的 Javascript 代码。似乎 carArrays 对象被转换为映射只是通过将数组分配给 carArrays[car1.year]。所以我对这段代码有很多疑问。

1. 哪些 javascript 规则允许您这样做？

2. 我认为[] 表示数组。如果 carArrays 现在是一张地图，为什么要使用方括号来索引它？

3. 我对 carArrays 成为地图的解释是否正确？或者这仍然被认为是具有键 '1999' 和 '2005' 的对象？

我的代码：

function car( make, model, year){
    this.make = make;
    this.model = model;
    this.year = year;
}

let car1 = new car('bmw', '3series', 1999);
let car2 = new car('ford', 'crownvic', 1999);
let car3 = new car('honda', 'accord', 1999);

let car4 = new car('bentley', '5', 2005);
let car5 = new car('chevy', 'silverado', 2005);
let car6 = new car('toyota', 'rav4', 2005);

let carArrays = {};
carArrays[car1.year] = [car1, car2, car3];
carArrays[car4.year] = [car4, car5, car6];

console.log(carArrays);

Answer 1

1. 哪些 javascript 规则允许您这样做？

carArrays 是一个对象（用{} 表示）。这意味着它将具有键值对，其中一个键指向一个特定的值。但是，您需要定义这些键值对将是什么。目前您的对象是空的，但是，您可以通过多种方式向其添加键值对：

直接：

let carArrays = {
  "myKey": ["element1", "element2"]
}

使用dot-notation：

let carArrays = {};
carArrays.myKey = ["element1", "element2"];

...或使用bracket notation:

let carArrays = {};
carArrays["myKey"] = ["element1", "element2"];

上述所有添加键值对的方法都做同样的事情 - 它们将 "myKey" 的键添加到 carArrays 对象，其值是元素数组 (["element1", "element2"])。

括号符号需要注意的是，它允许你将一个键传递给对象来定义它，所以类似这样的东西也是有效的：

let carArrays = {};
let theKey = "myKey";
carArrays[theKey] = ["element1", "element2"]

所以，当您编写代码时：

let carArrays = {};
carArrays[car1.year] = [car1, car2, car3];

...您正在使用 括号表示法 将 carArrays 的 key 设置为存储在 car1.year 中的值（即：1999）及其指向汽车元素数组的值 ([car1, car2, car3])。

1. 我认为 [] 表示数组。如果carArrays 现在是一张地图，为什么要使用方括号对其进行索引？

如上所述，它不仅用于索引数组，还用于获取/设置对象的值。这被称为bracket notation。如果您进一步研究 Javascript，您会发现数组实际上只是对象，因此当您在数组上使用 [] 时，您实际上又在使用括号表示法。

1. 我对 carArrays 成为地图的解释正确吗？或者这仍然被认为是一个带有“1999”和“2005”键的对象？

Javascript 有两种主要的方式将数据表示为键值对关系。一种方法是使用Map 类，另一种方法是使用对象{}。 new Map 和 {} 都允许您保留存储键值对关系的数据结构。在您的代码中，您使用的是对象 ({})，而不是 Map。此外，在过去，我们并不总是在 Javascript 中使用 Map 类，因为它只是一个相对较新的添加（ES6），因此主要使用对象（{}）代替。要了解 Map 和 Object 之间的主要区别，您可以查看 this answer 或 this comparison from MDN。

因此，对于您的代码，它仍被视为具有键“1999”和“2005”的对象（因为您没有在代码中的任何位置创建new Map() 对象，而是使用常规对象（@987654354 @) 来存储你的键值对。）

Answer 2

要直接回答您的问题，carArrays 不是地图。

有关地图的正确定义，请参阅this。具体来说，您使用一个数组或对象来初始化一个映射，其元素是键值对，如下所示：

let myMap = new Map([[ 1, 'one' ],[ 2, 'two' ]]);

另一方面，car1、car2、car3、car4、car5 和 car6 都是对象。 carArrays 是数组的对象，而不是数组。 代码：

carArrays[car1.year] = [car1, car2, car3];

只需在carArrays 中创建1999 的新键或属性，并为该键分配一个包含三个对象的数组：car1, car2, and car3

您可以像这样可视化carArrays 对象：

{'1999': 
    [
        {
            'make':'bmw', 
            'model':'3series', 
            'year':1999
        },
        {
            'make':'ford', 
            'model':'crownvic', 
            'year':1999
        },
        {
            'make':'honda', 
            'model':'accord', 
            'year':1999
        }
    ],
 '2005':
    [
        {
            'make':'bentley', 
            'model':'5', 
            'year':2005
        },
        {
            'make':'chevy', 
            'model':'silverado', 
            'year':2005
        },
        {
            'make':'toyota', 
            'model':'rav4', 
            'year':2005
        }
    ]
}

但是，物体和地图有一些相似之处和不同之处。您也可以在MDN site 上查看它们

另请查看已接受的答案 here 以获得更多说明。

Answer 3

如果您运行代码并看到，console.log 将返回：

{
  "1999": [
    {
      "make": "bmw",
      "model": "3series",
      "year": 1999
    },
    {
      "make": "ford",
      "model": "crownvic",
      "year": 1999
    },
    {
      "make": "honda",
      "model": "accord",
      "year": 1999
    }
  ],
  "2005": [
    {
      "make": "bentley",
      "model": "5",
      "year": 2005
    },
    {
      "make": "chevy",
      "model": "silverado",
      "year": 2005
    },
    {
      "make": "toyota",
      "model": "rav4",
      "year": 2005
    }
  ]
}

花括号表示对象，方括号表示数组。所以这段代码：

let carArrays = {};
carArrays[car1.year] = [car1, car2, car3];
carArrays[car4.year] = [car4, car5, car6];

创建一个新对象carArrays，并创建两个键值对。键是年份，值是汽车对象数组。

function car( make, model, year){
    this.make = make;
    this.model = model;
    this.year = year;
}

let car1 = new car('bmw', '3series', 1999);
let car2 = new car('ford', 'crownvic', 1999);
let car3 = new car('honda', 'accord', 1999);

let car4 = new car('bentley', '5', 2005);
let car5 = new car('chevy', 'silverado', 2005);
let car6 = new car('toyota', 'rav4', 2005);

let carArrays = {};
carArrays[car1.year] = [car1, car2, car3];
carArrays[car4.year] = [car4, car5, car6];

console.log(carArrays);