JS-数组与伪数组
数组与伪数组
把符合以下条件的对象称为伪数组:
- 具有length属性
- 按索引方式存储数据
- 不具有数组的push,pop等方法
伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,不具有数组的push,pop等方法,但仍可以用数组遍历方法来遍历它们。典型的是函数的argument
参数,还有像调用document.getElementsByTagName
, document.childNodes
之类的,它们返回的NodeList
对象都属于伪数组。
可以使用以下方法将伪数组转化为真正的Array对象。
Array.prototype.slice
function makeArray (c) {
try{
return Array.prototype.slice.call(c);
}catch(e){
var ret = [],i, len = c.length;
for(i = 0; i < len; i++) {
ret[i] = (c[i]);
}
return ret;
}
}
ES6中数组的新方法 Array.from()
function test(){
var arg = Array.from(arguments);
arg.push(5);
console.log(arg);
}
test(1,2,3,4); //1,2,3,4,5
ES6展开操作符
es6中,展开操作符对于实现了 Iterator 接口的对象转为真正的数组
任何 Iterator 接口的对象,都可以用扩展运算符转为真正的数组。
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
上面代码中,querySelectorAll方法返回的是一个nodeList对象。它不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList对象实现了 Iterator 。
对于那些没有部署 Iterator 接口的类似数组的对象,扩展运算符就无法将其转为真正的数组。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];
上面代码中,arrayLike是一个类似数组的对象,但是没有部署 Iterator
接口,扩展运算符就会报错。这时,可以改为使用Array.from
方法将arrayLike
转为真正的数组。
concat+apply
let nodeList = document.querySelectorAll('div');
let nodeArray = Array.prototype.concat.apply([], nodeList); // apply会将nodeList展开
jquery中的,jQuery.toArray()
方法
alert($('li').toArray());
jquery
中,jQuery.makeArray(obj)
将类数组对象转换为数组对象。
类数组对象有 length 属性,其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。
var arr = jQuery.makeArray(document.getElementsByTagName("div"));