JavaScript类数组（push值和转换成数组）

太过爱你忘了你带给我的痛 2022-02-25 08:42 288阅读 0赞

**1.类数组push值**

类数组对象：只包含使用从零开始，且自然递增的整数做键名，并且定义了length表示元素个数的对象，我们就认为他是类数组对象！

所以给出定义：  
1.具有索引属性（数字）  
2.有length属性  
3.最好加上push属性

var obj = {
    	"0":'a',
    	"1":'b',
    	"2":'c',
    	"length":3,
    	"push":Array.prototype.push
    }
    
    //
    obj.push('s')
    4
    obj
    {0: "a", 1: "b", 2: "c", 3: "s", length: 4, push: ƒ}
    0: "a"
    1: "b"
    2: "c"
    3: "s"
    length: 4
    push: ƒ push()
    __proto__: Object
    
    //
    obj.push('2')
    5
    obj
    {0: "a", 1: "b", 2: "c", 3: "s", 4: "2", length: 5, push: ƒ}
    0: "a"
    1: "b"
    2: "c"
    3: "s"
    4: "2"
    length: 5
    push: ƒ push()
    __proto__: Object

类数组调用push方法是这样实现的：

Array.prototype.push = function(num){
    	this[this.length] = num;
    	this.length++;
    }

然后obj调用的时候，this就会变成obj，所以可以这样实现（这里的length和上面的“length”是对应的）.

再看一个实例：

var obj = {
    	'2':2,
    	'3':4,
    	'length':2,
    	'splice':Array.prototype.splice,
    	'push':Array.prototype.push
    }
    
    obj.push(1)
    3
    obj.push(2)
    4
    console.log(obj)
    Object(4) [empty × 2, 1, 2, splice: ƒ, push: ƒ]
    2: 1
    3: 2
    length: 4
    push: ƒ push()
    splice: ƒ splice()
    __proto__: Object
    
    obj.push(3)
    5
    obj
    Object(5) [empty × 2, 1, 2, 3, splice: ƒ, push: ƒ]
    2: 1
    3: 2
    4: 3
    length: 5
    push: ƒ push()
    splice: ƒ splice()
    __proto__: Object

再看一个实例：

var obj = {
    	"0":'a',
    	"1":'b',
    	"2":'c',
    	"length":2,
    	"push":Array.prototype.push
    }
    obj.push('2')
    3
    obj
    {0: "a", 1: "b", 2: "2", length: 3, push: ƒ}
    0: "a"
    1: "b"
    2: "2"
    length: 3
    push: ƒ push()
    __proto__: Object

参考文章：  
[https://blog.csdn.net/scwmason/article/details/80719249][https_blog.csdn.net_scwmason_article_details_80719249]  
[https://www.cnblogs.com/xjser/p/4962821.html][https_www.cnblogs.com_xjser_p_4962821.html]  
[http://www.html-js.com/article/1619][http_www.html-js.com_article_1619]  
[https://blog.csdn.net/paullinjie/article/details/78447050][https_blog.csdn.net_paullinjie_article_details_78447050]

**2.类数组转成数组**

JavaScript中常见的类数组有arguments对象和DOM方法的返回结果。

判断一个对象是否属于类数组：

function isArrayLike(o) {
        if (o &&                                // o is not null, undefined, etc.
            typeof o === 'object' &&            // o is an object
            isFinite(o.length) &&               // o.length is a finite number
            o.length >= 0 &&                    // o.length is non-negative
            o.length===Math.floor(o.length) &&  // o.length is an integer
            o.length < 4294967296)              // o.length < 2^32
            return true;                        // Then o is array-like
        else
            return false;                       // Otherwise it is not
    }

类数组转换成数组有什么优势？  
由于类数组不具有数组所具有的操作数组的方法，讲类数组转换为数组之后就能调用如shift,unshift,splice,slice,concat,reverse,sort等这些强大的方法，方便快捷。

类数组转换为数组方法：

原始方法

使用最原生的方法 使用一个新的数组：

var ss=document.getElementsByTagName("div");
    var res=[];
    for(var i=0;i<ss.length;i++){
              res.push(ss[i]);
    }

1.Array.prototype.slice.call()

var ss=document.getElementsByTagName("div");
    ss=Array.prototype.slice.call(ss);
    //
    ss instanceof Array //true
    
    console.log(Object.prototype.toString.call(ss).slice(8,-1)); //Array

这种方法是借用了数组原型中的slice方法，返回一个数组。slice方法的内部实现：

Array.prototype.slice = function(start,end){
    	var result = new Array();  
      	start = start || 0;  
      	end = end || this.length; //使用call之后this指向了类数组对象
      	for(var i = start; i < end; i++){  
           	result.push(this[i]);  
      	}  
      	return result;  
    }

2.Array.from()

Array.from()是ES6中新增的方法，可以将两类对象转为真正的数组：类数组对象和可遍历（iterable）对象（包括ES6新增的数据结构Set和Map）。

//
    var arrayLike = {
    	'0':'a',
    	'1':'b',
    	'2':'c',
    	length:3
    };
    
    var arr = Array.from(arrayLike);//['a','b','c']
    
    //把NodeList对象转换为数组，然后使用数组的forEach方法
    var ps = document.querySelectorAll('p');
    Array.from(ps).forEach(p){
    	console.log(p);
    }); 
    
    //转换arguments对象为数组
    function foo(){
    	var args = Array.from(arguments);
    	//...
    }
    
    //只要是部署了Iterator接口的数据结构，Array.from都能将其转换为数组
    Array.from('hello'); //['h','e','l','l','o']

3.扩展运算符（…）

同样是ES6中新增的内容，扩展运算符（…）也可以将某些数据结构转为数组

//arguments对象的转换
    function foo(){
    	var args = [...arguments];
    }
    
    //NodeList对象的转换
    [...document.querySelectorAll('p')]

扩展运算符实际上调用的是遍历器接口，如果一个对象没有部署此接口就无法完成转换。

附注：jQuery的$.makeArray()此方法可以将类数组对象转化为真正的数组

var arr = $.makeArray(arguments);

参考文章：  
[https://segmentfault.com/a/1190000015625985][https_segmentfault.com_a_1190000015625985]  
[https://segmentfault.com/a/1190000010979127][https_segmentfault.com_a_1190000010979127]  
[https://www.cnblogs.com/guorange/p/6668440.html][https_www.cnblogs.com_guorange_p_6668440.html]  
[https://blog.csdn.net/crystal6918/article/details/60467615][https_blog.csdn.net_crystal6918_article_details_60467615]

[https_blog.csdn.net_scwmason_article_details_80719249]: https://blog.csdn.net/scwmason/article/details/80719249
[https_www.cnblogs.com_xjser_p_4962821.html]: https://www.cnblogs.com/xjser/p/4962821.html
[http_www.html-js.com_article_1619]: http://www.html-js.com/article/1619
[https_blog.csdn.net_paullinjie_article_details_78447050]: https://blog.csdn.net/paullinjie/article/details/78447050
[https_segmentfault.com_a_1190000015625985]: https://segmentfault.com/a/1190000015625985
[https_segmentfault.com_a_1190000010979127]: https://segmentfault.com/a/1190000010979127
[https_www.cnblogs.com_guorange_p_6668440.html]: https://www.cnblogs.com/guorange/p/6668440.html
[https_blog.csdn.net_crystal6918_article_details_60467615]: https://blog.csdn.net/crystal6918/article/details/60467615