[].slice.call(document.querySelectorAll(‘li‘), 0)：类数组转数组

最新推荐文章于 2023-07-05 13:29:03 发布
最新推荐文章于 2023-07-05 13:29:03 发布
阅读量558 收藏 5
点赞数 2
分类专栏： 前端基础 文章标签： javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lychee_xiahua/article/details/120192884
版权
本文介绍了JavaScript中类数组对象的概念，如arguments和DOM查询结果，它们拥有length属性但缺少数组的方法。文章通过实例解释了如何将类数组转换为真正的数组，包括使用Array.prototype.slice.call()和ES6的扩展运算符及Array.from()方法。重点讨论了类数组与数组之间的区别，并提供了相关参考链接。
摘要由CSDN通过智能技术生成

前言

今天看到一句这样的代码：

[].slice.call(document.querySelectorAll('li'), 0)

这是在干嘛？没看懂。搜了一下，大家说，这是在把DOM节点数组转为真正的数组。哦~ 我想起来了，好像是有这么回事，selector 返回的数组好像是叫「类数组」来着。

什么是类数组

类数组又叫伪数组，是形似数组，但不是数组的类数组对象。函数的 arguments 参数，以及 DOM 元素查找方法返回的 nodeList

最低0.47元/天 解锁文章
夏狗花花
关注
专栏目录
类数组转化为数组的几种方式？
strongestegg的博客
11-24 4982
（1）通过 call 调用数组的 slice 方法来实现转换 Array.prototype.slice.call(arrayLike); 数组的slice()方法可以从已有数组中返回一个新数组，它可以接受两个参数arr.slice(start,end),第一个参数规定从何处开始选取，第二个参数表示从何处选取结束，如果不传参将返回原数组的一个副本，但该方法不会修改原数组，而是返回截取的新数组。 slice(start,end) 方法选择一个从开始到结束(不包括结束)的数组的一部分浅拷贝到一个新的数组对象，方
解决document.querySelectorAll()生成的nodelist转化成array的问题
weixin_44840878的博客
08-17 1788
使用Array.prototype.slice.call()方法或者[].slice.call()方法
JS - 把类似document.querySelectorAll(".xxx")、document.getElementsByName("xxx")这种方法的返回结果转换成数组对象...
weixin_30760895的博客
05-08 355
var btns = document.querySelectorAll(".btn");console.log(btns instanceof Array); // falsebtns = Array.prototype.slice.call(btns, 0);console.log(btns instanceof Array); // true 转载于:https://www.cnblogs....
Array.prototype.slice.call(document.querySelectorAll('a'), 0)
weixin_30606669的博客
11-08 168
Array.prototype.slice.call(document.querySelectorAll('a'), 0)的作用就是将一个DOM NodeList 转换成一个数组。 slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。语法为arr.slice([begin[, end]])，其中arr可为string或Array。更多了解可以参考MDN ...
js把对象转换成数组
热门推荐
qq_15509267的博客
10-31 1万+
1.把类似数组的对象转换成数组 【1】什么是类似数组的对象 比如： let arrayLike = { '0':"z", '1':"y", '2':"k", length:3 }; 本质是有length属性，可以类似数组的获取元素的方式arrayLike[0]、arrayLike[1]去获取元素，也可以通过arrayLike.length获取伪数组的长度。...
将类数组转换为数组的方法
Allen-Ye博客
11-04 449
开发过程中，有很多时候获取到的是类似数组的对象。比如元素的集合（elementcollection,nodeList，以及今天开发时发现classList也是类数组）。有时我们需要类数组去调用数组的方法，怎么办？现在我们以div的为例 一、遍历类数组，依次将元素放入一个空数组。 类数组本身虽然不是数组，但是有interator接口，所以可遍历。（interator指可遍历、可迭代） <div></div> <div></div> <div&
JS 高级
欢迎
06-02 273
二.常用数组方法 1.every( )------->检测数值元素的每个元素是否都符合条件。2.filter( )------->检测数值元素，并返回符合条件所有元素的数组。3.find( )------->返回符合传入测试（函数）条件的数组元素。4.findlndex( )------->返回符合传入测试（函数）条件的数组元素索引。5.forEach( )------->数组每个元素都执行一次回调函数。6.includes( )------->判断一个数组是否包含一个指定的值。7.indexOf( )--
2021JavaScript面试题（最新）不定时更新（2021.11.6更新）
m0_54883970的博客
08-01 606
*构造函数原型**每一个构造函数的内部都有一个prototype属性，这个属性时一个指针，指向另一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。**对象原型**当我们使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的prototype属性对应的值，这个指针称为对象的原型。原型链闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。闭包的用途}而通过。...
javaScript学习笔记
s_86597的博客
08-31 619
js学习笔记 js组成部分：ECMAScript标准规范，DOM文档对象模型，控制标签，BOM浏览器对象模型，控制浏览器 标签获取： document.getElementById(’’); //通过id名获取元素，只能获取一次，再用只能重新获取 ? 标签的修改： ? 添加内容：innerHTML方法 document.getElementById('').innerHTML="需要添加的内容"； document.getElementById('').style.backgroundColor="gr
前端手写(九)——类数组转化为数组
weixin_47450807的博客
03-30 549
一、写在前面 数组对于前端的重要性，就不用说了，因为我们可以将很多其他数据类型转化为数组，利用数组中的很多方法就行解决问题。下面我们将总结一下将类数组转化为数组的方法。 二、具体方法 2.1、使用Array.from <script> let divs = document.querySelectorAll('div') console.log(divs) console.log(Array.from(divs)) </script> 2.2、使用c
如何循环遍历document.querySelectorAll()方法返回的结果
weixin_30381317的博客
02-25 214
使用JavaScript的forEach方法，我们可以轻松的循环一个数组，但如果你认为document.querySelectorAll()方法返回的应该是个数组，而使用forEach循环它： /* Will Not Work */ document.querySelectorAll('.module').forEach(function() { }); 执行上面的代码，你将会得到...
牛客JS进阶题【仅记录关键思路】未完待续
最新发布
特仑苏的博客
07-05 111
【代码】牛客JS进阶题【仅记录关键思路】未完待续。
伪数组转化真数组_ES6 数组方法
weixin_39640203的博客
12-18 532
nodelist伪数组转数组，让其拥有数组方法扩展运算符 ... let arr = document.querySelectorAll('ul li'); // 当获取dom元素list的时候，所得到的是伪数组，不具备数组方法，怎么去转化成数组呢 // es5之前的写法是利用循环或者slice.call来转化 let newArr = [].slice.call(arr); //demo1 e...
伪数组如何转为真数组
Maybe__row的博客
04-25 218
比如:有三个li标签 <ul> <li></li> <li></li> <li></li> </ul> 我通过document.querySelectorAll来获取所有的li标签,使其成为伪数组 let list = document.querySelectorAll("li"); 此时我们就可以使用: Array.form(伪数组) 这种方法来转换为真数组 Array.from(li...
JavaScript(WebAPI)
dddddrrrzz的博客
05-25 1619
目录一、DOM 基本概念1.1 获取元素querySelector二、事件初识三、操作元素3.1 操作元素内容 JS 分成三个大的部分 ECMAScript(JS): 基础语法部分; DOM API: 操作页面结构;(最核心的库) BOM API: 操作浏览器; WebAPI 就包含了 DOM + BOM 所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发. API参考文档 一、DOM 基本概念 DOM 全称为 Document Object Model. W3C 标准给我们
伪数组转成真数组的5种方法
csc_cary的博客
06-29 6281
伪数组转成真数组的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
JavaScript基础面试题总结03
m0_64526818的博客
02-11 454
多维数组降维的几种方法? 怎么判断两个对象相等？ 什么是类数组（伪数组），如何将其转化为真实的数组？ 如何遍历对象的属性？ 如何实现数组的随机排序？
老生常谈JS数组去重
进无止进
09-09 625
数组去重，历史悠久的话题了，不过今天只记录个人比较喜欢的方法 1、数组去重需求 项目需要对类似这种数组去重： let lists = [{ id: 1, name: '法外狂徒', age: 20 }, { id: 3, name: '张三', age: 20 }, { id: 1, name: '法外狂徒', age: 20 }, { id: 4, name: '李四', age: 20 }] 该数据以id作为唯一标识，去重时只需去除重复id的那一项即.
D3.js基础教程：数组排序与求值(v3)
虽然JavaScript本身提供了诸如`push`, `pop`, `shift`, `unshift`, `slice`, `splice`等数组操作方法，但D3.js为了更好地适应数据可视化需求，扩展了一些额外的函数，使得处理数组变得更加高效和灵活。 一、排序 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值