How to define array-like objects in javascript

The method of defining an array-like object in JavaScript is: 1. First create an empty object; 2. Directly define the numerical subscript attribute for the object; 3. The key point is to set the length attribute and splice attribute for the object to the number and function.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

There are many array-like objects in js. The simple concept is that they look like arrays, but are not arrays. They can be accessed using numeric subscripts and there are no array methods.

Examples: arguments, NodeList, HTMLCollection, jQuery, etc.

Characteristics of array-like objects

1. Has length attribute

var a=document.getElementsByTagName("p");
a.__proto__;// HTMLCollection {} 属于类数组对象a.length;//62

2. You can use numeric subscripts to access objects

a[0];//<p class="aspNetHidden">…</p>

3. You cannot use array prototype methods (such as slice, pop, etc.)

a.slice;//undefined Error!
a.pop;//undefined Error!

4. Using instanceof operations does not belong to Array

[] instanceof Array;//true
a instanceof Array;//false

5. Can be converted to a real array object

var arr = Array.prototype.slice.call(a);
arr instanceof Array;//true

PS: Note that some objects cannot be converted to a real array object using the slice method under IE8.

It is recommended to use the $.makeArray() method provided by jquery to convert array-like objects

6. You can usually define other custom attributes

a.item;//function item() { [native code] }

Array-like objects Advantages

Regarding the advantages, I believe there is no need to describe too much. It allows js to have the same operation method as other back-end languages.

For example, some list collections in C# can be accessed using the numeric subscript list[0] or the string name list['name'] to access the same object.

At the same time, it also has Various custom methods, custom attributes, and the elegant access methods of jquery objects can tell you that such a wonderful object is such a wonderful object.

How to manually create an array-like object

Return to the topic, how to manually create an array-like object.

1. First create an empty object

var array_like = {};//创建一个空对象

2. Directly define numerical subscript attributes for the object. This is absolutely not allowed in other languages. Object attributes cannot start with numbers, but It is possible in JS, even in Chinese

array_like[ 0 ] = "test 0";
array_like[ 1 ] = "test 1";
array_like[ 2 ] = "test 2";
array_like[ 3 ] = "test 3";

3. The key point is to set the length attribute and splice attribute for the object as numbers and functions

//关键点
array_like.length = 4;//为对象设置length属性
array_like.splice = [].splice;//同时设置splice属性为一个函数

PS: Setting the splice attribute is actually In order to deceive the browser's console and display an array, you can refer to here

4, test

//设定自定义属性
array_like.test0=array_like[0];
array_like.test1=array_like[1];
//直接输出
console.log( array_like );//['test 0','test 1'...]
//类型
console.log( $.type( array_like ) );//"object"
//数字下标访问
console.log( array_like[ 0 ] );//"test 0"
//自定义属性访问
array_like.test0;//"test 0"
//不是数组对象
array_like instanceof Array;//false
//转换为真数组对象
var Arr=Array.prototype.slice.call(array_like);
Arr instanceof Array;//true

5, full code:

var array_like = {};

array_like[ 0 ] = "test 0";
array_like[ 1 ] = "test 1";
array_like[ 2 ] = "test 2";
array_like[ 3 ] = "test 3";

array_like.length = 4;
array_like.splice = [].splice;

console.log( array_like );
console.log( $.type( array_like ) );
console.log( array_like[ 2 ] );

[Recommended learning ：javascript advanced tutorial】

The above is the detailed content of How to define array-like objects in javascript. For more information, please follow other related articles on the PHP Chinese website!