JS-数组与伪数组

Posted 2020-11-22 FAN

数组与伪数组

把符合以下条件的对象称为伪数组：

• 具有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"));