真伪数组的转化及apply/call/slice方法

匿名 (未验证) 提交于 2019-12-02 23:41:02

此篇文章前半部分都在介绍真伪数组转换的涉及的相关js方法,原理。
想要直接看真伪数组转化的具体方法可以直接看文章的最后一节“总结真伪数组的转换”。
注意:文章内所有的arr均为真数组的命名,obj及res为伪数组的命名。

补充this的含义:

this:谁调用就是谁
例如:

function test() {     console.log(this);//打印window。this是谁调用就是谁.此时this是window } test(); 
js的apply与call方法
  • apply和call方法的作用:
    专门用来修改方法内部的this
  • apply和call方法的格式:
    call(对象,参数1,参数2,…)
    apply(对象,[数组])
  • apply和call方法的使用案例
    -1.通过window.test找到test方法
    -2.通过apply方法将找的test内部的this改为自定义的对象obj
function test() {     console.log(this);//打印obj。this是谁调用就是谁 } var  obj = {"name":"lnj" }; window.test.apply(obj);//打印 {"name":"lnj" } window.test.call(obj);//打印 {"name":"lnj" } 
  • apply和call方法的区别
    以window.sum.apply(obj, [3, 5]);为例
    1.通过window.sum找到sum方法
    2.通过apply(obj)方法将找的sum内部的this改为自定义的对象
    3.将传入数组中的元素依次取出,传递给形参a、b
function sum(a, b) {    console.log(this);    console.log(a + b); } window.sum.call(obj, 1, 2);//打印 {"name":"lnj" }  3 window.sum.apply(obj, [3, 5]);;//打印 {"name":"lnj" }  8 
js的slice方法(截取数组的方法)
  • 如果slice方法什么参数都没有传递,会将数组中的元素放到一个新的数组中原样返回,直接返回[1, 3, 5, 7, 9];
  • 如果slice方法传递一个参数:从脚标为所传参数的地方开始截取
  • 如果slice方法传递两个个参数:从脚标为所传参数1的地方开始截取,到参数2之前停止截取。
var arr2 = [1, 3, 5, 7, 9]; var res1 = arr2.slice();//[1, 3, 5, 7, 9]; var res2 = arr2.slice(2);//从脚标2开始截取,结果为5,7,9 var res3 = arr2.slice(2, 4);//从脚标2开始截取,到脚标4为止,不包括脚标4,结果为5, 7 ### 
将真数组转换伪数组的一个过程
  • push原理:
var arr = []; arr.push(1);//将1添加到arr数组中 console.log(arr); 
  • 真数组转换伪数组原理
    1.通过[].push找到数组中的push方法
    2.通过apply(obj)将找到的push方法内部的this修改为自定义的对象obj
    3.将传入数组arr中的元素依次取出,传递给形参
var arr = [1, 3, 5, 7, 9]; var obj = {} [].push.apply(obj, arr);//将arr中的数字依次取出来push给obj console.log(obj);//{ 0:1,1:3,2:5,3:7,4:9,length:5 } 
伪数组转为真数组
  • 伪数组的分类:系统自带的伪数组自定义的伪数组
  • 系统自带的伪数组:
<div>我是div</div> <div>我是div</div> <div>我是div</div> var res = document.querySelectorAll("div");//找到界面上所有的div,返回的对象res就是系统自带的伪数组。 console.log(res);//系统自带的伪数组 
  • 自定义的伪数组
 var obj = {0:"lnj", 1:"33", length:2}; 
  • 系统自带的伪数组和自定义的伪数组转换为真数组
    都可以使用 [].push.apply(arr, res);方法来转换,区别在于自定义的伪数组转换为真数组,IE8以下的浏览器不可以
var res = document.querySelectorAll("div");//系统自带的伪数组 var obj = {0:"lnj", 1:"33", length:2};//自定义伪数组 var arr = [];//先定义一个真数组 [].push.apply(arr, res);//系统自带伪数组转换为真数组 [].push.apply(arr, obj);//自定义的伪数组转换为真数组,IE8以下的浏览器不可以(解决办法:IE8以下浏览器使用slice方法,并且不传参数) 
  • 解决自定义的伪数组转换为真数组,IE8以下的浏览器不可以的问题
    使用[].slice.call(obj)方法
var obj = {0:"lnj", 1:"33", length:2}; var arr3 = [].slice.call(obj);//将内部的this改为自定义的伪数组obj,slice:将this中的每一个元素放到一个新的数组中原样返回  

总结真伪数组的转换

伪数组快速转换为真数组:[].slice.call(obj);
真数组快读转换为伪数组:[].push.apply(obj , arr);

文章来源: https://blog.csdn.net/Cao_Mary/article/details/91494062
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!