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

关于js伪数组

  • 具有length属性;
  • 按索引方式存储数据;
  • 不具有数组的push()、pop()等方法;

你可能知道怎么把伪数组转换为数组,但是你知道这里边的原理吗?

假如页面有一组li元素

<ul>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
</ul>

获取集合,控制台打印

这就是一个伪数组,长得很像数组,但是没有数组splice,concat,join,pop等方法

通过如下方法转换为数组

Array.prototype.slice.call(oUL);

可以看到变成了数组,并且拥有了Array的所有方法

那么问题来了,这是怎么实现的呢?

接下来重点来了

var obj = {//构造一个伪数组
    "0": "aaa",
    "1": 12,
    "length": 2,
    "push": Array.prototype.push,
    "splice": Array.prototype.splice
}

Array.prototype.push = function(arr) {//动态改变length,并且添加新元素到数组末尾this[this.length] = arr;    this.length++;
}
console.log(obj);

obj.push("newVal");

console.log(obj)

可以看到,现在我们的伪数组已经和之前有一样的结构和功能,既可以存储对象数据,又可以有数组的方法。

如果你看懂了以上教程,我出道题来考考你,说明你真的懂了

var obj = {
    "0": "a",
    "1": "b",
    "3": "c",
    "length": 3,
    "push": Array.prototype.push,
}

obj.push("d");

console.log(obj);
console.log(obj.length);

欢迎留言回答,评论,说说你的答案

原文地址:https://www.cnblogs.com/zt123123/p/8287725.html

时间: 2024-10-09 10:47:50

你真的了解js伪数组吗?深入js伪数组的相关文章

在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

伪数组(类数组): 无法直接调用数组方法或期望length属性有什么特殊的行为,不具有数组的push,pop等方法,但仍可以对真正数组遍历方法来遍历它们.典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组.可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象. function log(){ var args

如何将伪数组转换成真正的数组

1.常见的伪数组有哪些? arguments.通过document.getElements..获取到的内容 2.伪数组有什么特点? 具有length属性,也是一个一个的元素组成的,但是构造器不是Array,不能使用数组的方法 3.转换为真正的数组的方法: 通过遍历将伪数组里元素放入到一个新的数组里 通过call改变数组slice方法里的this指向 因为我想要让伪数组也能使用数组的方法,为什么伪数组就不能使用数组方法,为什么数组就能使用push方法 一个数组都是由她的构造器实例化出来的,var

JS中深拷贝数组、对象、对象数组方法

我们在JS程序中需要进行频繁的变量赋值运算,对于字符串.布尔值等可直接使用赋值运算符 "=" 即可,但是对于数组.对象.对象数组的拷贝,我们需要理解更多的内容. 首先,我们需要了解JS的浅拷贝与深拷贝的区别. 我们先给出一个数组: var arr = ["a","b"]; 现在怎么创建一份arr数组的拷贝呢?直接执行赋值运算吗?我们来看看输出结果 var arrCopy = arr; arrCopy[1] = "c"; arr

数组方法总结 常用数组方法总结 js的数组或对象常用方法总结

js常用数据类型的方法使用归纳 * String---->是一个对象    * 字符串可以看成是字符组成的数组,但是js中没有字符类型 * 字符是一个一个的,在别的语言中字符用一对单引号括起来 * 在js中字符串可以使用单引号也可以使用双引号 * 因为字符串可以看成是数组,所以,可以通过for循环进行遍历 * 字符串特性:不可变性,字符串的值是不能改变 * 字符串的值之所以看起来是改变的,那是因为指向改变了,并不是真的值改变了 * 字符串的常用属性:     * .length------>字

Js 基本数据类型,var 变量,数组

(一) Js 数据类型 分为基本数据类型以及引用类型 基本数据类型有 null,undefined,Boolen,Number,String,还有一种复杂数据类型 Object. var var1 = "xianrongbin", var2 = false, var3 = null, var4 = undefined, var5 = 123; console.log(typeof var4); var var6 = [1, 23, 5]; console.log(typeof var6

用js 对拥有多个对象的数组进行排序

我们想要根据某个对象属性对数组进行排序.而传递给数组sort()方法的比较函数要接收两个参数,即要比较的值.可是,我们需要一种方式来指明按照哪个属性来排序.要解决这个问题,可以定义一个函数,它接收一个属性名,然后根据这个属性名来创建一个比较函数,下面就是这个函数的定义. 1 function createComparisonFunction(propertyName) { 2 return function (object1, object2) { 3 var value1 = object1[

观V8源码中的array.js,解析 Array.prototype.slice为什么能将类数组对象转为真正的数组?

在官方的解释中,如[mdn] The slice() method returns a shallow copy of a portion of an array into a new array object. 简单的说就是根据参数,返回数组的一部分的copy.所以了解其内部实现才能确定它是如何工作的.所以查看V8源码中的Array.js     可以看到如下的代码: 一.方法  ArraySlice,源码地址,直接添加到Array.prototype上的"入口",内部经过参数.类型

JS数组常用函数以及查找数组中是否有重复元素的三种常用方法

阅读目录: DS01:常用的查找数组中是否有重复元素的三种方法 DS02:常用的JS函数集锦 DS01.常用的查找数组中是否有重复元素的三种方法 1. 1 var ary = new Array("111","22","33","111"); 2 var s = ary.join(",")+","; 3 for(var i=0;i<ary.length;i++) { 4 if(s.

如何用js定义数组,用js来拼接json字段

定义js数组的方式有: var arr = (); var arr = []; var arr = new Array(); 如何拼接成一个json字段. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> obj TO JSON Demo </TITLE> <META NAME="Genera

js数组合并(一个数组添加到另一个数组里面)方法

js定义两个数组. var arrA=[1,2,3]; var arrB=[4,5,6]; 要实现[1,2,3,4,5,6],如果直接arrA.push(arrB); 则arrB只会作为了arrA的一个元素.执行如图: 要合并或连接,则需要使用concat() 方法. concat(Array) 方法 concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.array1.concat([item1[, item2[, . . . [, itemN