javascript - 在 JavaScript 中将事物存储在对象与数组中

Question

这是一个普遍的问题，而不是我需要解决的问题。我只是一个初学者，试图了解做事的正确方法。

我想知道的是我是否应该只使用对象作为原型(prototype)(如果这是在这里使用的正确术语)或者是否可以使用它们来存储东西。

例如，在我正在进行的测试项目中，我想存储一些图像以供以后使用。我目前拥有的是这样的:

var Images = {
    james: "images/james.png",
    karen: "images/karen.png",
    mike: "images/mike.png"
};

因为我知道位置，我想我也可以将它们放在一个数组中并适本地引用数组中的位置:

var images = ["images/james.png", "images/karen.png", "images/mike.png"];
images[0];

使用这样的对象非常好，但我想知道哪种方法更合适。是情景吗？是否有任何性能原因可以做一个而不是另一个？作为一个新程序员，我应该习惯一种更被接受的方式吗？

提前感谢您的任何建议。

Answer 1

介绍

与 PHP 不同，JavaScript 没有关联数组。该语言中的两个主要数据结构是 数组字面量 ( [] ) 和 对象字面量 ({})。使用一个或另一个并不是真正的风格问题，而是需要的问题，所以你的问题是相关的。

来个客观的对比吧……

数组 > 对象

数组字面量(间接地是一个对象)比对象字面量有更多的方法。实际上，对象字面量是 Object 的直接实例。并且只能访问 Object.prototype方法。数组字面量是 Array 的一个实例并且不仅可以访问Array.prototype方法，也可以到Object.prototype (这是在 JavaScript 中设置原型(prototype)链的方式)。

let arr = ['Foo', 'Bar', 'Baz'];
let obj = {foo: 'Foo', bar: 'Bar', baz: 'Baz'};

console.log(arr.constructor.name);
console.log(arr.__proto__.__proto__.constructor.name);

console.log(obj.constructor.name);

在 ES6 中，对象字面量是不可迭代的(根据 可迭代协议(protocol) )。但是数组是可迭代的。这意味着您可以使用 for...of循环遍历数组字面量，但如果您尝试对对象字面量执行此操作，它将不起作用(除非您定义了 [Symbol.iterator] 属性)。

let arr = ['Foo', 'Bar', 'Baz'];
let obj = {foo: 'Foo', bar: 'Bar', baz: 'Baz'};

// OK
for (const item of arr) {
  console.log(item);
}

// TypeError
for (const item of obj) {
  console.log(item);
}

如果你想让一个对象字面量可迭代，你应该自己定义迭代器。您可以使用 来执行此操作发电机 .

let obj = {foo: 'Foo', bar: 'Bar', baz: 'Baz'};

obj[Symbol.iterator] = function* () {
  yield obj.foo;
  yield obj.bar;
  yield obj.baz;
};

// OK
for (const item of obj) {
  console.log(item);
}

数组 < 对象

如果出于某种原因需要描述性键，则对象字面量比数组更好。在数组中，键只是数字，这在您想要创建显式数据模型时并不理想。

// This is meaningful
let me = {
  firstname: 'Baptiste',
  lastname: 'Vannesson',
  nickname: 'Bada',
  username: 'Badacadabra'
};

console.log('First name:', me.firstname);
console.log('Last name:', me.lastname);

// This is ambiguous
/*
   let me = ['Baptiste', 'Vannesson', 'Bada', 'Badacadabra'];
   
   console.log('First name:', me[0]);
   console.log('Last name:', me[1]);
*/

对象字面量是极其多价的，而数组不是。对象字面量可以创建“惯用的”类、命名空间、模块等等...

let obj = {
  attribute: 'Foo',
  method() {
    return 'Bar';
  },
  [1 + 2]: 'Baz'
};

console.log(obj.attribute, obj.method(), obj[3]);

数组 = 对象

数组字面量和对象字面量不是敌人。事实上，如果你一起使用它们，它们是好 friend 。 JSON 格式充分利用了这种强大的友谊:

let people = [
  {
    "firstname": "Foo",
    "lastname": "Bar",
    "nicknames": ["foobar", "barfoo"] 
  },
  {
    "firstName": "Baz",
    "lastname": "Quux",
    "nicknames": ["bazquux", "quuxbaz"]
  }
];

console.log(people[0].firstname);
console.log(people[0].lastname);
console.log(people[1].nicknames[0]);

在 JavaScript 中，有一个名为 的混合数据结构。类数组对象 尽管您不一定意识到这一点，但它已被广泛使用。例如，好老arguments函数中的对象是一个类似数组的对象。 DOM 方法，如 getElementsByClassName()也返回类似数组的对象。正如您可能想象的那样，类数组对象基本上是一种特殊的对象字面量，其行为类似于数组字面量:

let arrayLikeObject = {
  0: 'Foo',
  1: 'Bar',
  2: 'Baz',
  length: 3 
};

// At this level we see no difference...
for (let i = 0; i < arrayLikeObject.length; i++) {
  console.log(arrayLikeObject[i]);
}

结论

数组字面量和对象字面量各有优缺点，但有了这里提供的所有信息，我认为您现在可以做出正确的决定。

最后，建议大家试试 ES6 引入的新数据结构: Map , Set , WeakMap , WeakSet .它们提供了许多很酷的功能，但在这里详细介绍它们会让我们走得太远......