面试题 把伪数组转换成真实的数组(什么时伪数组和真实数组,操作数组的方法)

news/2024/7/10 23:05:11 标签: jquery, javascript, 前端

什么是伪数组?

1.具有length属性,可以获取长度。
2.具有索引,可以通过遍历获取所有元素。
3.不可以使用数组的内置方法和属性。

操作数组的几种方法

1.shift() 方法:把数组的第一个元素删除,并返回第一个元素的值
2.concat() 方法:用于连接两个或多个数组,并返回一个新数组,新数组是将参数添加到原数组中构成的
3.join() 方法:用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的
4. pop() 方法:用于删除并返回数组的最后一个(删除元素)元素,如果数组为空则返回undefined ,把数组长度减 1
5.push() 方法:可向数组的末尾添加一个或多个元素,并返回新的长度,(用来改变数组长度)。
6.reverse() :方法用于颠倒数组中元素的顺序。
7.slice() 方法:可从已有的数组中返回选定的元素。slice(开始截取位置,结束截取位置)
8.splice() :方法向/从数组中添加/删除项目,然后返回被删除的项目。
9.unshift:将参数添加到原数组开头,并返回数组的长度

为什么伪数组不能使用数组的内置方法和属性呢?我们不妨打印看一下伪数组在控制台的输出:
在这里插入图片描述
我们可以看到伪数组的__proto__指向的是一个Object对象,当然不能使用数组的内置方法和属性了。

我们再来看看真数组在控制台的输出:

在这里插入图片描述
可以看到,真数组的__proto__指向的是一个Array数组。

常见的伪数组

1.函数的内置对象arguments,它是所有实参组成的伪数组。

2.DOM对象组成的伪数组,通过document.querySelectorAll等获得的dom对象列表。

3.jQuery对象组成的伪数组,通过$(‘选择器’)获取到的包含dom对象列表和jQuery方法的jQuery对象。

将伪数组转化为真数组的几种方法

方法一:最简单的,先准备一个新的空数组,然后遍历伪数组,将伪数组中的值通过索引逐个添加到新数组当中。

javascript">let newArr = [];
for(let i = 0; i < arguments.length; i++){
  newArr[i] = arguments[i];
}

方法二:利用扩展运算符(…)将伪数组转化为真数组 - ES6语法

javascript">let divs = document.querySelectorAll('div');
let arr = [...divs];

方法三:利用Array的原型对象的slice方法,配合call()方法修改slice中this指向

javascript">let arr = [].slice.call(divs);

方法四:利用Array.from方法 - ES6

javascript">let arr = Array.from(divs);

注意:Array.from方法是从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。(MDN)
转自https://www.cnblogs.com/aishuishuiADgai/p/15589729.html
转自https://www.jianshu.com/p/395ee159d48b


http://www.niftyadmin.cn/n/1371559.html

相关文章

jsonp方法解决跨域

jsonp方法 只能get 浏览器只对XHR(XMLHttpRequest)请求有同源请求限制&#xff0c;而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制&#xff0c;利用这个“漏洞”就可以很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的&#xf…

CORS方式解决跨域

在后端设置响应头就可以了&#xff0c;前端无需操作 //解决跨域问题response.setHeader("Access-Control-Allow-Origin", "*");就是需要在http头中设置Access-Control-Allow-Origin来决定需要允许哪些站点来访问

LeetCode-213. 打家劫舍 II

LeetCode-213. 打家劫舍 II 难度&#xff1a;中等 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 &#xff0c;这意味着第一个房屋和最后一个房屋是紧挨着的。同时&#xff0c;相邻的房屋装有相互连…

LeetCode-337. 打家劫舍 III

LeetCode-337. 打家劫舍 III 难度&#xff1a;中等 小偷又发现了一个新的可行窃的地区。这个地区只有一个入口&#xff0c;我们称之为 root 。 除了 root 之外&#xff0c;每栋房子有且只有一个“父“房子与之相连。一番侦察之后&#xff0c;聪明的小偷意识到“这个地方的所…

网络中数据传输的过程

数据传输的背景 (1) 现在互联网中使用的是基于OSI七层模型的TCP/IP模型。TCP/IP模型包括五层&#xff0c;即物理层&#xff0c;数据链路层&#xff0c;网络层&#xff0c;传输层&#xff0c;应用层&#xff1b;其中数据链路层又可以分为两个子层&#xff0c;即LLC(逻辑链路控制…

html的几道面试题(1)

1、行内元素有哪些&#xff1f;块级元素有哪些&#xff1f;空(void)元素有哪些&#xff1f; 行内元素&#xff1a;a、b、span、img、input、strong、select、label、em、button、textarea . 块级元素&#xff1a;div、ul、li、dl、dt、dd、p、h1-h6、blockquote . 空元素&#…

面试题:关于三次握手和四次挥手

为什么要三次握手而不是两次握手 但是在三次握手的情况下服务端收不到最后的ACK包不会认为链接建立成功 其实三次握手的本质是解决 网络链接不可靠的问题 如何解决丢包问题和乱序问题 一下过程不区分前端和服务端&#xff0c;都可以作为接收端和服务端 TCP协议为每一个链接建…