Javascript 中的类数组对象

IT技术 javascript jquery arrays javascript-objects
2021-01-18 14:21:57

我想知道 jQuery 如何构造它的类数组对象。我正在努力解决的关键问题是它如何设法让控制台将其解释为数组并将其显示为数组。我知道这与 length 属性有关，但玩了一会儿后我不太明白。

我知道这与像对象这样的普通数组相比没有技术优势，如下例所示。但我认为这是用户测试和调试时的一个重要语义元素。

像对象这样的普通数组。

function foo(){
    // Array like objects have a length property and it's properties use integer
    // based sequential key names, e.g. 0,1,2,3,4,5,6 just like an array.
    this.length = 1;
    this[0] = 'hello'
}
// Just to make sure add the length property to the prototype to match the Array 
// prototype
foo.prototype.length = 0;

// Give the Array like object an Array method to test that it works     
foo.prototype.push = Array.prototype.push

// Create an Array like object 
var bar = new foo;

//test it 
bar.push('world');

console.log(bar);
// outputs 
{ 0: 'hello',
  1: 'world',
  length: 2,
  __proto__: foo
}

jQuery 将输出的位置

var jQArray = $('div')

console.log(jQArray);

// outputs
[<div></div>,<div></div>,<div></div>,<div></div>]

如果你跑 

console.dir(jQArray)

// Outputs

{ 0: HTMLDivElement,
  1: HTMLDivElement,
  2: HTMLDivElement,
  3: HTMLDivElement,
  4: HTMLDivElement,
  context: HTMLDocument,
  length: 5,
  __proto__: Object[0]
 }

jQuery 对象的 proto 尤其有趣，因为它是 Object 而不是 jQuery.fn.init 正如预期的那样，[0] 也表明了一些东西，因为这就是你得到的。 

console.dir([])
// outputs Array[0] as the object name or Array[x] x being the internal length of the
// Array

我不知道 jQuery 如何将它的原型设置为 Object[0] 但我猜答案就在那里。有人有任何想法吗？

2个回答

该对象必须具有length和splice

> var x = {length:2, '0':'foo', '1':'bar', splice:function(){}}
> console.log(x);
['foo', 'bar']

仅供参考，Object[0]作为原型的原因完全相同。浏览器将原型本身视为一个数组，因为：

$.prototype.length == 0;
$.prototype.splice == [].splice;
@zyklus 您是否碰巧知道这是 ECMA 规范（类数组对象）的一部分，还是浏览器的优点？
2021-03-30 14:21:57
如果您不需要使用 console.log() 将对象打印为数组，则不需要 splice。像 0,1 这样的长度和属性就足以使用数组方法。
2021-04-06 14:21:57
@Usagi - AFAIK 这与 ECMA 脚本无关，只是一个随机的开发工具。JS 中有很多“类似数组”的对象，无论是在语言中还是用户创建的，因此如果它们实现了Array.
2021-04-11 14:21:57

像这样？

function foo() {
  this.push('hello');
}
foo.prototype = [];

var bar = new foo();
console.log(bar.length); // 1
console.log(bar); // ["hello"]
这与我给@JohnStricler 的响应具有相同的效果。我不想将所有数组方法添加到我的对象以避免混淆，因为某些数组方法实际上返回一个新数组。因此，当使用它们时，我附加到对象的任何其他方法都将丢失。
2021-03-14 14:21:57
我再次查看了 jQuery 对象的原型链，但找不到在其中任何地方定义的 Array。
2021-03-23 14:21:57
jQuery 对象使用 Array 作为其原型。我认为您可以重新定义这些方法，以便它们返回新的 foo 对象而不是常规数组。
2021-03-29 14:21:57
@Andrey M. - 请不要说你不确定的东西。jQuery也没有用Array，因为它的原型。它使用push,sort和splicefrom Array，但仅此而已。
2021-04-06 14:21:57
其它你可能感兴趣的问题
上一篇隐藏滚动条，同时仍然可以使用鼠标/键盘滚动 下一篇网站可以调用浏览器扩展吗？