作者:墙脚等红线_987 | 来源:互联网 | 2023-05-18 14:23
Javascript中伪数组和数组以及转化
之前看到过一个经典的面试题 说如何将伪数组转成数组 当时一脸懵逼 如今学会了高级JS然后再次看这个问题 好像没有想象中那么难。
伪数组和数组
在Javascript中,除了5种原始数据类型之外,其他所有的都是对象,包括函数(Function)。
对象与数组的关系
首先你得确保你知道原型链以及原型得继承。
我们都知道所有的JS内置构造函数的对象原型都指向的是Object的原型对象(Object.prototype
)。(也可理解为 继承自Object.prototype
)
在这个前提下,可以理解为使用new Araay() 或 [ ] 创建出来的数组对象,都会拥有Object.prototype
的属性值。
var obj = {};
var arr = [];
可以得到对象和数组的第一个区别:对象没有数组 Array.prototype
的属性值。
什么是数组
数组具有一个最基本特征:索引,这是对象所没有的,下面来看一段代码:
var obj = {};
var arr = [];
obj[2] = 'a';
arr[2] = 'a';
console.log(obj[2]);
console.log(arr[2]);
console.log(obj.length);
console.log(arr.length);
obj[2]输出’a’,是因为对象就是普通的键值对存取数据
而arr[2]输出’a’ 则不同,数组是通过索引来存取数据,arr[2]之所以输出’a’,是因为数组arr索引2的位置已经存储了数据
obj.length
并不具有数组的特性,并且obj没有保存属性length,那么自然就会输出undefined
而对于数组来说,length是数组的一个内置属性,数组会根据索引长度来更改length的值
为什么arr.length
输出3,而不是1
因为在给数组添加元素时,并没有按照连续的索引添加,所以导致数组的索引不连续,那么就导致索引长度大于元素个数
什么是伪数组
- 拥有 length 属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)
- 不具有数组所具有的方法
伪数组,就是像数组一样有 length
属性,也有 0、1、2、3
等属性的对象,看起来就像数组一样,但不是数组,比如:
var obj = {
0: 5,
1: 8,
2: 4,
3: 6,
lenngth:4
};
常见的伪数组有:
- 函数内部的
arguments
- DOM 对象列表(比如通过
document.getElementsByTags
得到的列表) jQuery
对象(比如 $("div")
)
伪数组是一个 Object,而真实的数组是一个 Array。
因为在原型链中没有Array.prototype
这一环,所以他没有操作数组的方法push,pop,shift,unshift
等。Javascript
中常见的伪数组对象有以nodeList
为原型的DOM对象,函数的参数arguments
对象等。
那么有没有方法将这些伪数组对象转换成数组,从而直接使用push,pop等方法来对其进行操作呢?
下面我将介绍五种方法
讲伪数组转换成数组的方法
ES5提供了二种方法:
var obj=document.querySelectorAll('div');
var arr1=new Array();
arr1=arr1.__proto__.slice.call(obj);
console.log(arr1);
var arr2=new Array();
arr2=Array.prototype.slice.call(obj);
console.log(arr2);
arrayObject.slice(start,end)
参数 | 描述 |
---|
start | 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 |
ES6提供了两种方法:
var arr3=new Array();
var arr3=Array.from(obj);
console.log(arr3);
var arr4=[...obj];
console.log(arr4);
var ArrayLikeObj = {"0": 1, "1": 2, length: 2}
var result = [...ArrayLikeObj ]
console.log(result)
![img](https://img1.php1.cn/3cdc5/35ac/243/3d8a610b395f70df.png)
最后一种方法那就是简单粗暴
var arr5=new Array();
for(var k in obj)
{
arr5.push(obj[k]);
}
console.log(arr5);
特例
如果我们遇到的知识一个对象没有length长得怎么办呢 我们可以利用for in来做
var obj = {
0: 5,
1: 8,
2: 4,
3: 6,
};
var arr1=new Array();
for( var k in obj)
{
arr1.push(obj[k]);
}
console.log(arr1);