2020-11-17 伪数组和真数组之间的转换，以及call,apply方法测试

最新推荐文章于 2022-02-28 21:04:04 发布
最新推荐文章于 2022-02-28 21:04:04 发布
阅读量164 收藏
点赞数 1
分类专栏： 前端 JQ
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47843332/article/details/109734720
版权
前端 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
JQ
3 篇文章 0 订阅
订阅专栏

一、什么是伪数组？

    简单来说就是用对象的key=value方式存储数组的内容,属性为index索引。外加一个length的属性，值为最大index+1

在这里插入图片描述
在这里插入图片描述

1. 在JS当中arguments是最常接触的伪数组，在ES6之前可以通过遍历它转成真数组

在这里插入图片描述
在这里插入图片描述

2. ES6后可以用过…的方式把伪数组数据拿出来push到数组当中

在这里插入图片描述

3. 既然push是遍历添加的方式往数组里面添加元素，也就是说…里面是每一个伪数组的元素集合，底层应该是通过遍历添加到数组当中==（纯个人观点，不对勿喷）==

在这里插入图片描述

现在还没有搞懂为什么中间会有空格？？

二、通过[].push.apply()的方式把真数组转变为伪数组，同时也能把为伪数组变为真数组

在这里插入图片描述

这里可能存在一些疑惑为什么会这样，接下来讲解一下apply和call方法。

1. apply 和 call

众所周知在js当中函数内部打印this值是调用这本身,就是谁调用的this值指向的就是谁，要想改变this的值有3种方式 call(),apply(),bind()， 简单说说3者之间的区别，call，apply会直接调用函数，bind不会。bind还需要在调用，多数情况下配合定时器使用。接下来我只分析apply和call方法，想要了解bind可以自行百度

call和apply 两者存在大部分相似之处，调用方法也一样，都是 拥有该函数对象的名字.函数名.call(x,y)/apply(x,y) 传入的第一个参数x就是你想要改变的函数里面原本的this值，y就是传入的实参
在这里插入图片描述

可以看到call和apply都可以改变this的值，接下来我们通过可传入的参数和代码看看他们之间有何区别？

###
可以看到call方法从第二个参数开始传入，实参和形参一 一对应。接下来看apply

在这里插入图片描述
好像只有第一个数组的值可以传进去，分别赋值给了a,b。
在这里插入图片描述
把1，2的[]去掉直接报错，显而易见，apply方法只能接受两个参数，第一个是想要改变this的值，第二个是个数组对象。
在这里插入图片描述
一点问题的没有。总结apply会将传入的数组中的元素一次取出，传递给形参。

最后，还是那句话好的东西一般都有兼容性问题，在IE8以下[].push.apply()将自定义伪数组转变成数组会报错，接下来写通用的方法slice。

slice(indexStart,indexEnd)在数组当中是切割数组返回一个新的数组，原数组的不会被改变。第一个参数indexStart，从索引位置开始（包括）。第二个indexEnd，结束索引的位置（不包括）。[indexStart,indexEnd) 大于等于indexStart,小于indexEnd。只传入第一个参数的话，默认到末尾。

在这里插入图片描述
从原数索引为4的地方(也就是值为5)【包括它本身】开始到末尾 。
在这里插入图片描述

这很好理解，就是从原数索引为4的地方(也就是值为5)【包括它本身】开始到索引为6(也就是值为6的位置)【不包括它本身】 。

重点高潮来了!

如果什么都不传的话，他会遍历原数组返回一个新的数组给你。所以也可以通过它来遍历数组或伪数组
在这里插入图片描述
在这里插入图片描述
apply和call一样，因为没有传递第二个参数。为什么可以这样，因为第一张图 a.slice() 也就是他本是this.slice()。call/apply调用就等于 Person.slice()遍历它本身 返回一个新的数组。所以在开发当中可以先把全部的伪数组通过这个方法变成了真数组后在进行对应的操作。

三 记录下

在这里插入图片描述
在这里插入图片描述
可以通过这种方式嫁接其他对象的任何方法。

四. 回调函数里面的this值

在这里插入图片描述
想要改变回调函数的this值，需要在内部使用call或者apply方法调用，同理想要改变普通函数的this值，在外部调用call和apply，即可

完！

weixin_47843332
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS Array.from()将伪数组转换成数组的方法示例
10-15
伪数组是指那些具有`length`属性和索引属性，但不具备数组方法（如`push`、`pop`等）的对象。常见的伪数组包括函数的`arguments`对象和某些DOM方法返回的结果，如`querySelectorAll`。例如： ```javascript let ...
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
09-05
通过`makeArray`，我们可以轻松地将这些伪数组转换为可以使用数组方法的数组。例如： ```javascript // 使用arguments function fun() { var ary = makeArray(arguments); console.log(ary.constructor === Array...
call apply 用在伪数组上
qq8344310的博客
08-12 107
这里只拿arguments这个伪数组作为演示 // 获取arguments function aa(){ console.log(arguments); // 输出 Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ] 伪数组，因为它的__proto__: Object 指向Object而非Array // ...
JavaScript中伪数组借用数组的方法call（）
weixin_45892086的博客
03-05 965
<script> // 伪数组 有数字下标 有length 能for循环遍历 不能使用数组的方法 var obj = { 0:"zs", 1:15, 2:"sing", length:3 } // 给obj数组添加其他属性 // 可以用call()方法借用 数组的push方法 // Array.prototype.push....
JavaScript中的call(),apply(),伪数组转化为数组
yangaoyuan1999的博客
10-29 600
js的执行模式： 1.一种是正常模式，第二种是严格模式，现在一般都采用正常模式 正常模式： function f1(){ console.log(this); } f1(); // window window.f1();//window 严格模式： "use strict"; function f1(){ console.log(this); } f1(); //undefined wi
Javascript中的apply()、call()以及伪数组
fredaouyang的博客
02-26 401
每个函数都包含两个非继承而来的方法，call()和apply() call和apply用途 这两个方法的用途都是使函数能在特定的作用域中运行（改变函数运行时的作用域），换言之就是可以设置函数中this对象的值。apply()方法接收两个参数，一个是在其中运行函数的作用域，另一个是参数数组，举一个例子： function product(){} product.prototype=
js中真伪数组转换
ameng0825的博客
12-16 236
1.js中真数组转换成伪数组 var arr=[1,2,3,4,5,6]; var obj={}; [].push.apply(obj,arr); console.log(obj);//input "{0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 5: 6, length: 6}" 1.通过[].push找到数组的push方法 2.通过apply(obj)将找到的pu...
javascript 伪数组实现方法
10-28
在使用slice方法转换伪数组时，如果对象缺少length属性，或者length属性值不是数值，那么slice方法还是会创建一个数组，但是数组长度为0，或者length属性值为数值转换后的数值，索引超出部分的值为undefined。...
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
10-28
在JavaScript中，我们经常会遇到需要将HTMLCollection、NodeList或者伪数组（也就是通常所说的类数组对象）转换成真正的数组的情况。类数组对象并不是真正的数组类型，它们通常是函数的参数对象（比如arguments对象...
JavaScript伪数组用法实例分析
10-18
在JavaScript编程中，伪数组（或称为类数组）是一个常见的概念，它和真正的数组有很多相似之处，但却不具备数组的一些属性和方法，比如不具备数组的push、pop、shift、unshift等方法，也不能直接调用数组的toString...
5 个JavaScript 中 Slice()的用例
web前端开发
11-21 867
英文 | https://betterprogramming.pub/5-use-cases-for-slice-in-javascript-13462f2e177f翻译 | 杨小爱sli...
如何在数组对象中为每个对象添加属性
qq_57399113的博客
02-28 5186
我们可以通过Object.assign为对象添加属性，如果需要为某些对象添加不同属性，判断即可。
向数组的对象里添加新属性
weixin_46856618的博客
05-19 5316
向数组的对象里添加新属性 arr.forEach(item => { item.a= 1; }) (a:就是添加的属性 1是值) console.log(arr) 数组对象里添加一个新属性 var array=[ {name:"名称", age:"年龄"}, {name:"名称", age:"年龄"}, {name:"名称", age:"年龄"} ] for(var i=0; i<array.length; i++){ array[i].sex="性
JS中[].slice.call的理解
真是6的不行的博客
05-21 6524
原文：https://www.cnblogs.com/wuvkcyan/p/9446800.html 首先要说明[].slice.call()与Array.prototype.slice.call() 有什么区别? [].slice === Array.prototype.slice true []为创建数组,当[].slice的时候,自然会去找原型链 [].__proto__.slice ==...
原生JS实现 slice() 方法
Mencre的博客
03-21 963
定义和用法 slice() 方法可从已有的数组中返回选定的元素。 语法 arrayObject.slice(start,end) 实现 Array.prototype.slice=function(start,end){ start=start===undefined?0:start; end=end===undefined?thi...
js数组操作方法concat()、slice()、splice()
rsylqc的专栏
04-18 1万+
concat()方法 concat()方法：基于当前数组中所有项创建新数组。 具体过程为：先创建数组的一个副本，若是concat()存在参数，将接收到的参数添加到副本的末尾，然后返回新构建的数组；若是没有传递参数，仅仅复制当前数组并返回副本数组。 concat()中的参数可以是一个新的数组也可以是一个字符串。 var colors = ["red","green","bl
伪数组转成真数组的5种方法
csc_cary的博客
06-29 6144
伪数组转成真数组的5种方法 1.for循环 第一种就是使用最基础的for循环，这个应该有一点基础的都看得懂。 const divs = document.querySelectorAll('div'); let arr = []; console.log(divs instanceof Array); for (let i = 0; i < divs.length;i++) { arr.push(divs[i]); } console.log(arr inst
给数组中所有对象加一个属性
前端-舟遥遥的博客
09-28 1万+
新数组：array; 原数组：list; 给原数组list的对象加一个名为indexNum的属性，属性值为str let array = []; let list = [{name:'aa',age:11},{name:'bb',age:22},{name:'cc',age:33},]; list.map((item,index)=>{ array.push( ...
apply()方法
热门推荐
明知迷途，从未折返
11-01 3万+
说明： 本博客内容摘自MDN，防止用的时候打不开 作用：apply( ) 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。 参数 ： 一共有2个参数，均为可选参数 第一个参数： this指向。（this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。） 第二个参数：...
js 伪数组遍历方法
最新发布
08-12
在 JavaScript 中，伪数组（类似数组的对象）是指具有数字索引和length属性的对象，但不具备数组原型上的方法。遍历伪数组有以下几种方法： 1. for循环：使用普通的for循环可以遍历伪数组，通过索引访问每个元素。 ```javascript var pseudoArray = {0: 'a', 1: 'b', 2: 'c', length: 3}; for (var i = 0; i < pseudoArray.length; i++) { console.log(pseudoArray[i]); } ``` 2. Array.from() 方法：将伪数组转换为真正的数组，然后可以使用数组的遍历方法。 ```javascript var pseudoArray = {0: 'a', 1: 'b', 2: 'c', length: 3}; var array = Array.from(pseudoArray); array.forEach(function(element) { console.log(element); }); ``` 3. Array.prototype.forEach() 方法：可以直接使用该方法遍历伪数组。 ```javascript var pseudoArray = {0: 'a', 1: 'b', 2: 'c', length: 3}; Array.prototype.forEach.call(pseudoArray, function(element) { console.log(element); }); ``` 这些方法都可以用来遍历伪数组，根据实际情况选择适合的方法即可。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值