2021-04-16

javascirpt的类数组对象可以像数组一样使用for循环遍历,但是却不能调用数组原型链的方法,为了让类数组对象可以像数组对象一样调用push,pop等方法,可以将类数组对象转成数组对象:

将类数组对象转换成数组

varargs = []; varobj = {0:"www",1:"jianshu",2:"com",length:3};for(vari = 0; i < obj.length; i++) {

    args.push(obj[i]);

}

console.log(args);  //["www","jianshu","com"]//等价于以下的写法console.log([].slice.call(obj));//["www","jianshu","com"]

理解[].slice.call(arguments)的原理,需要明白:

slice()方法的作用

call()方法的作用

slice()方法的内部实现

Array.prototype.slice()

console.log([1,2,3,4,5].slice(0,1));//[1]console.log([1,2,3,4,5].slice(1,3));//[2,3]console.log([1,2,3,4,5].slice(3));//[4,5]console.log([1,2,3,4,5].slice());//[1,2,3,4,5]

数组的slice(start,end)方法,返回从start开始到end的子数组,如果start和end都没有设置,则返回整个数组,这个过程不影响原数组。

Function.prototype.call()

function func(name, price) {

  this.name = name;

  this.price = price;

}varfood = {name:"apple",price:10};

func.call(food,"orange",15);

console.log(food); // {name: "orange", price: 15}

调用call方法传入的参数比原方法多一个参数,简单来说,call方法的作用就是:用call方法的第一个参数代替func方法内部的this,其他参数为原func方法的参数。

slice方法内部实现

slice方法内部实现,V8源码第587行,其基本原理就类似我们上面开头写的for循环遍历原数组,根据start和end的值再复制一份到新数组并返回。所以当我们使用[].slice.call(arguments),slice方法内部的this就会被替换成arguments,并循环遍历arguments,复制到新数组返回,这样就得到了一个复制arguments类数组的数组对象。

为了提高性能,减少一层对原型链的追溯,一般我们会采用以下的写法:

Array.prototype.slice.call(arguments)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JS基础讲解 JavaScript组成ECMAScript:解释器、翻译DOM:Document Object M...
    FConfidence阅读 580评论 0 1
  • 数组:methods★Array.from():从一个类似数组或可迭代对象中创建一个新的数组实例Array.fro...
    HeroMeikong阅读 486评论 0 2
  • 1、es5和es6的区别,说一下你所知道的es6 ECMAScript5,即ES5,是ECMAScript的第五次...
    没糖_cristalle阅读 711评论 0 0
  • 你可能已经听说过ECMAScript 6(简称 ES6)了。ES6 是 Javascript 的下一个版本,它有很...
    米塔塔阅读 953评论 0 10
  • 你可能已经听说过ECMAScript 6(简称 ES6)了。ES6 是 Javascript 的下一个版本,它有很...
    奋斗的小废鱼阅读 771评论 0 16