24

在 JavaScript 中，有些对象伪装成数组（或“类数组”）。此类对象是arguments、NodeLists（从getElementsByClassName等返回）和 jQuery 对象。

当console.logged 时，它们显示为数组，但它们不是。我知道为了像数组一样，一个对象必须有一个length属性。

所以我做了一个这样的“对象”：

function foo(){
    this.length = 1;
    this[0] = "bar";
}

var test = new foo;

当 I 时console log(test)，我（如预期）得到一个foo对象。我可以使用“转换”它为一个数组

Array.prototype.slice.call(test)

但是，我不想转换它，我希望它像数组一样。我如何制作一个类似数组的对象，这样当它被console.logged 时，它就会显示为一个数组？

我试过设置foo.prototype = Array.prototype，但console.log(new foo)仍然显示一个foo对象，而不是一个数组。

4

6 回答 6

33

具体取决于控制台。对于 Chrome 的开发者控制台和 Firebug 中的自定义对象，您将需要length和splice属性。splice也必须是一个函数。

a = {
    length: 0,
    splice: function () {}
}
console.log(a); //[]

然而，重要的是要注意，没有官方标准。

jQuery (v1.11.1) 在内部使用以下代码来确定对象应该使用for循环还是for..in循环：

function isArraylike( obj ) {
    var length = obj.length,
        type = jQuery.type( obj );

    if ( type === "function" || jQuery.isWindow( obj ) ) {
        return false;
    }

    if ( obj.nodeType === 1 && length ) {
        return true;
    }

    return type === "array" || length === 0 ||
        typeof length === "number" && length > 0 && ( length - 1 ) in obj;
}

[]请注意，可能有一个for..in对象在控制台{}中显示为数组（for在 jQuery 中。

于 2012-08-09T15:19:59.343 回答
4

当我们可以使用类似arguments参数的数组时，我想到了同样的问题：

function arrayLike() {
  console.log(typeof arguments)
  console.log(arguments)
  console.log(Array.from(arguments))
}
arrayLike(1,2,3)

所以，让我们尝试创建我们自己的类似数组的对象：

let arrayLikeObject = {
  0: 1,
  1: 2
 }
 
 console.log(Array.from(arrayLikeObject))

显然，没有定义长度属性，所以我们arrayLikeObject只会返回一个空数组。现在，让我们尝试定义一个长度属性：

let arrayLikeObject = {
  length: 2,
  0: 1,
  1: 2
 }
 
 console.log(Array.from(arrayLikeObject))

如果长度设置不同怎么办？

let arrayLikeObject = {
  length: 1,
  0: 1,
  1: 2
 }
 
 console.log(Array.from(arrayLikeObject))
 // it will only return the value from first `0: 1`

let arrayLikeObject = {
  length: 5,
  0: 1,
  1: 2
 }
 
 console.log(Array.from(arrayLikeObject))
 // other 3 values will be printed as undefined

但是，我不想转换它...

您实际上想创建一个数组，而不是类似数组的对象。必须像您说的那样转换类似数组的对象：

Array.prototype.slice.call(arrayLikeObject)
// Or,
[].slice.call(arrayLikeObject)

如果你尝试在类数组对象上使用数组方法，那么你会得到类型错误：

let arrayLikeObject = {
  length: 5,
  0: 1,
  1: 2
 }

 console.log(arrayLikeObject.sort())

因此，要在 arrayLikeObject 上使用数组方法，我们需要将其转换为数组，就像我们在前面的示例中使用Array.from.

否则，您只需要创建一个数组：

let arr = [1,2] // I don't mean, you don't know

其他考虑：

您不能将其用作构造函数：

let arrayLikeObject = {
    length: 1,
    slice: function () {
      return 1
    }
}

console.log(new arrayLikeObject) // Type error

在以下代码段中，结果将是[undefined]长度属性设置为 1 但没有0索引属性：

let arrayLikeObject = {
  length: 1,
  slice: function () {
    return 1
  }
}
console.log(Array.from(arrayLikeObject))

但是如果将长度设置为 0，那么结果将是一个空数组[]，因为我们告诉我们在这个类似数组的对象中没有任何值。

于 2019-02-17T10:45:47.383 回答
3

这是任何用途吗：扩展数组原型，似乎他正在做你所做的并将原型创建为一个数组，但包括一个额外的方法（可能有效也可能无效，我没有测试过）：

var MyArray = function() {
};

MyArray.prototype = new Array;

MyArray.prototype.forEach = function(action) {
    for (var i = 0, l=this.length; i < l, ++i) {
        action(this[i]);
    }
};

希望它在某种程度上有所帮助。

于 2012-08-09T15:21:38.437 回答
2

看这个 ：

var ArrayLike = (function () {

 var result;

 function ArrayLike(n) {

     for (var idx = 0; idx < n; idx++) {
         this[idx] = idx + 1;
     }

     // this.length = Array.prototype.length; THIS WILL NOT WORK !

 }


 // ArrayLike.prototype.splice = Array.prototype.splice; THIS WILL NOT WORK !


 // THIS WILL WORK !
 Object.defineProperty(ArrayLike.prototype, 'length', {

     get: function() {

         var count = 0, idx = 0;

         while(this[idx]) {
             count++;
             idx++;
         }
         return count;

     }

 });


 ArrayLike.prototype.splice = Array.prototype.splice;


 ArrayLike.prototype.multiple = function () {

     for (var idx = 0 ; idx < this.length ; idx++) {

         if (result) {
             result = result * this[idx];
         } else {
             result = this[idx];
         }
     }

     return result;
 };

 return ArrayLike
 })();

var al = new ArrayLike(5);

al.__proto__ = ArrayLike.prototype;

console.log(al.length, al.multiple(), al);

这将在 Chrome 中显示：5 120 [1, 2, 3, 4, 5]

于 2016-01-11T19:12:15.797 回答
0

我想这就是你要找的。覆盖 toString 函数。

foo.prototype.toString = function()
{
    return "[object Foo <" + this[0] +">]";
}
于 2012-08-09T15:26:11.527 回答
0

您可能只想像继承基类一样继承 Array，因此您的对象只具有所有数组方法。你可以：

function Thing() {
    // Adding a property
    this.whatever = 96;
}
Thing.prototype = Object.assign(Object.create(Array.prototype), {
    // Adding a method
    has42: function() {
        // Call inherited Array method
        return this.includes(42);
    }
});

别的地方：

(function() {
    var test = new Thing();
    test.push(64, 69, 42, 96);
    console.log(test);
    var has = test.has42();
    console.log('should be true:', has);
    var i = test.indexOf(42);
    if (i >= 0)
        test.splice(i, 1);
    var has2 = test.has42();
    console.log('should be false:', has2);
    console.log(test);
 }());

问题是，你是否应该这样做。根据对象的使用方式，某些代码可能会在使用普通数组制作副本时重新创建数组并丢弃原型链。这可能是也可能不是问题，具体取决于您对此的具体操作。

于 2021-09-01T08:32:01.203 回答