首页 > 编程语言 > 详细

前端面试题之类数组的push

时间:2021-08-10 23:14:34      阅读:24      评论:0      收藏:0      [点我收藏+]

js中的类数组对象,它具有数组的下标和length,但是没有数组相关的方法(push、slice、map、、、),现将数组的方法强行给它,会发生什么呢?

var obj = {
    ‘2‘: 3,
    ‘3‘: 4,
    ‘length‘: 2,
    ‘splice‘: Array.prototype.splice
    ‘push‘: Array.prototype.push
}
console.log(obj) //=> ?

上面代码,强行给这个类数组对象增加一个数组的push方法,先打印一下这个类数组对象:

技术分享图片

接下来在类数组对象中使用push方法: 

var obj = {
    ‘2‘: 3,
    ‘3‘: 4,
    ‘length‘: 2,
    ‘splice‘: Array.prototype.splice,
    ‘push‘: Array.prototype.push
}
obj.push(1);
obj.push(2);
console.log(obj) //=> ?

最后会输出什么呢?

技术分享图片

 打印obj中的‘2’、‘3’对应的3,4,分别变成1,2了,其主要原因还是push。

在mdn中对push的描述:push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

push 是特意设计为通用的,既适用于数组,也适用于对象。正如下面的例子所示,Array.prototype.push 可以在一个对象上工作。 注意,我们没有创建一个数组来存储对象的集合。 相反,我们将该集合存储在对象本身上,并使用在 Array.prototype.push 上使用的 call 来调用该方法,使其认为我们正在处理数组,而它只是像平常一样运作。

var obj = {
    length: 0,
    addElem: function addElem (elem) {
        [].push.call(this, elem);
    }
};

obj.addElem({});
obj.addElem({});
console.log(obj.length); //=> 2

因此可以总结push的原理如下:

Array.prototype.push = function(elem){
  this[this.length] = elem;
  this.length ++;    
}

回到题目中,obj.push(1)=>obj[2] = 1;   //此时obj的length为2

      obj.push(2)=>obj[3] = 2;  //此时obj的length为3

因此,得到上面的打印结果,由于类数组对象中没有属性为‘0’、‘1’,所以前面会有俩个值为empty。

 

脚踏实地行,海阔天空飞

前端面试题之类数组的push

原文:https://www.cnblogs.com/coder--wang/p/15125586.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!