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"));

原文地址:https://www.cnblogs.com/fanlinqiang/p/11829327.html

时间: 2024-10-30 11:19:06

JS-数组与伪数组的相关文章

JavaScript中的数组与伪数组的区别

在JavaScript中,除了5种原始数据类型之外,其他所有的都是对象,包括函数(Function). 5种原始数据类型: number boolean string null undefined 在这个前提下,咱们再来讨论JavaScript的对象. 1.创建对象 var obj = {}; //种方式创建对象,被称之为对象直接量(Object Literal) var obj = new Object(); // 创建一个空对象,和{}一样 更多创建对象的知识,参见<JavaScript权威

JS数组之伪数组以及伪数组转化为标准数组

什么是伪数组? 1,具有length属性 2,能够使用数组遍历方法遍历它们 3,不具有数组的push,pop等方法 哪些是伪数组? 典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组, 诸如var obj5 = { 99: ‘abc’, length: 100 }这样的数据也是伪数组 真数组的判断方法 * 如何判断数据是不是真数组:* 1.数据 instanceof Ar

JS === 类数组(伪数组)

// 今天跟成哥学习了类数组的相关用法,涨见识了,记录一下~ 类数组: //属性要为索引(数字)属性,必须要有length属性,最好要加上push Array.prototype.push = function(target){ obj[obj.length] = target; obj.length++; } var obj = { "2" : " a", "3" : "b", "length" : 2,

伪数组与可迭代对象

这两者都可以通过Array.from(arrayLike[,mapFn[,thisArg]])来返回一个数组. 伪数组 首先先得清楚对象和数组的差别: 对象的原型链上只有Object.prototype,而数组的原型链上有Array.prototype和Object.prototype 对象没有length属性,数组有,且自动更新 对象根据键值对取值,而数组根据序号取值 ok,接下来就可以引出伪数组了. 定义: 拥有length属性,其他属性为非负整数字符串(因为对象使用[]来取值,会将数值隐式

你真的了解js伪数组吗?深入js伪数组

关于js伪数组 具有length属性: 按索引方式存储数据: 不具有数组的push().pop()等方法: 你可能知道怎么把伪数组转换为数组,但是你知道这里边的原理吗? 假如页面有一组li元素 <ul> <li>1111</li> <li>1111</li> <li>1111</li> </ul> 获取集合,控制台打印 这就是一个伪数组,长得很像数组,但是没有数组splice,concat,join,pop等方

js伪数组

伪数组定义 1.拥有length属性2.不具有数组所具有的方法 伪数组实例 <html> <head> <title></title> </head> <script> var fakeArray = { length: 3, "0": "first", "1": "second", "2": "third" };

关于js中伪数组

伪数组: 具有length属性: 按索引方式存储数据: 不具有数组的push().pop()等方法: 伪数组无法直接调用数组方法或期望length属性有什么特殊的行为,不具有数组的push().pop()等方法,但仍可以对真正数组遍历方法来遍历它们.这种对象有很多,比较特别的是function内的arguments对象,还有像调用getElementsByTagName, document.childNodes之类的,它们都返回的NodeList对象都属于伪数组,也称为类数组,还有自定义的对象,

js中伪数组

今天看资料时,讲到到了伪数组一词 当我们使用document.getElementsByTagName获取的元素标签集合就是伪数组 上图 当我用Array.isArray方法验证的时候,发现是false,(之前我一直觉得是数组的,暴露了小白的身份) 于是上网查了一下,看看别人的介绍 定义: 1.拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解2.不具有数组所具有的方法 (说实话,我希望来个明白人帮我翻译一下这段中文意思) 伪数

JS伪数组对象转对象---底层实现原理

2.伪数组对象转数组 Array.prototype.slice.call(jQuery实例对象) slice截取拷贝测试:      底层实现:     接下来写个伪数组对象   接下来,伪数组对象转数组,如下所示 此时,内部this指向fakeArr伪数组对象 . 原文地址:https://www.cnblogs.com/jianxian/p/12150992.html