JavaScript对象中的空插槽？ [英] Empty slots in JavaScript objects?

问题描述

最近我开始在firefox'console

Lately I started seeing this in firefox' console

Object [ <6 empty slots>, false, <3 empty slots>, 1 more… ]

当我有像

{
  6: false,
  10: true
}

我只想要一个带有数字键的对象，我可以访问，但我很担心，因为如果它跟踪空槽，那么这必须意味着一些内存浪费了？

I simply want an object with numeric keys that I can access, but I am worried by this because if it keeps track of empty slots then this must mean that some memory is wasted?

我的问题是否有效，如果是，那么定义这样一个对象的正确方法是什么？

Are my concerns valid and if yes what would be a correct way to define such an object?

推荐答案

问题可能是因为Firefox' console.log 解释了输入对象。不知何故，它被评估为一个数组而不是一个简单的对象。 Chrome做得对。如果你仔细研究如何在Javascript中管理数组，你可以找到以下内容：

The problem might be caused at how Firefox' console.log has interpreted the input object. Somehow, it got evaluated as an array instead of a simple object. Chrome does it right. If you look deeper into how an array is managed in Javascript, you can find the following:

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

更好地理解这一点是修补Array的长度属性。特别是当你使用 [] 构建数组时。要向数组添加元素，我们必须使用 .push（...）。此函数使用 length 属性（检查 15.4.4.7 Array.prototype.push ）。所以简而言之（交互式示例位于底部）

A better comprehending for this is to tinker with Array's length property. Especially when you have constructed your array by using []. To add elements to the array, we have to use .push(...). This function uses the length property (check 15.4.4.7 Array.prototype.push). So in short (interactive example is at the bottom)

const arr = []; // length = 0
arr.push('1stEl', '2ndEl', '3thEl'); // length = 3
// this isn't allowed, but you can do this
arr[7] = '7thEl'; // length = 8

你看到长度现在是 8 而不是 4 。索引 3..6 是保留的，但未定义。以下是控制台输出。

You see that the length is now 8 and not 4. The indices 3..6 are reserved, but undefined. Here below is a console output.

[
  "1stEl",
  "2ndEl",
  "3thEl",
  undefined,
  undefined,
  undefined,
  undefined,
  "7thEl"
]

如果再次使用 .push 方法，它会将新元素放在后面'7thEl'元素（索引8上也是如此）。

If you use a .push method again, it will place the new element after the '7thEl' element (so on index 8).

要检查此对象使用的密钥，我们可以使用 Object.keys（） 。你会得到

To check the keys that is used by this object, we can use Object.keys() on the array. You will get

[
  "0",
  "1",
  "2",
  "7"
]

您会看到使用了数字值作为钥匙。就像你的对象一样，

You see that numeric values are used as keys. Like your object, which is

{
  6: false,
  10: true
}

在此对象上使用 Object.keys 给出 [6，10] 。它具有与上述类似的输出。因此来自firefox的 console.log 将您的对象解释为数组，从而将其显示为数组。为了正确显示数组，它在键 0 处开始（逻辑上看，需要检查源代码）并以键数组结束。长度 - 1 。但索引 0,1..5 和 7..9 未被定义。因此它导致此输出

Using Object.keys on this object gives ["6", "10"]. It has a similar output as the above. So the console.log from firefox has interpret your object as an array, thus displaying it as an array. In order to display the array correctly, it starts (logically seen, need to check the source code yet) at key 0 and ends at key array.length - 1. But the indexes 0,1..5 and 7..9 aren't "defined". Thus it leads to this output

Object [ <6 empty slots>, false, <3 empty slots>, 1 more… ]

我不确定我是否必须将此限定为Firefox控制台上的错误或故障API ...或者控制台输入（初始化变量时）已经错误地读取了对象。

I'm not sure if I have to qualify this as a bug or glitch at Firefox's console API... Or that the console input (when initializing a variable) has read the object incorrectly.

---实例 -

const a = new Array(3);
console.log('using "new Array(...)" reserves memory space: ' + a.length);
console.log('---');

// using brackets
const b = [];
console.log('but what with [] ? At initial, we have ' + b.length);
b.push('1stEl', '2ndEl', '3thEl');
console.log('After push(\'1stEl\', \'2ndEl\', \'3thEl\'), we have ' + b.length);
// add to random index
b[7] = '7thEl';
console.log('After b[7] = \'7thEl\', we have ' + b.length);

console.log('displaying gives ', b);
console.log('using Object.keys: ', Object.keys(b));

// adding again
b.push('newEl');
console.log('After b.push(\'newEl\'), we have ' + b.length);

// object 
const obj = {
  6: false,
  10: true
};
console.log('obj defined as {6: false, 10: true }');
console.log('using Object.keys: ', Object.keys(obj));
console.log('obj: ', obj);

这篇关于JavaScript对象中的空插槽？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！