资讯专栏INFORMATION COLUMN

伪数组及其转换为真数组原理

fobnn / 3365人阅读

摘要:伪数组及其转换为真数组原理什么是伪数组定义拥有属性和数值下标属性。不具有数组所具有的方法。伪数组是一个,而真实的数组是一个常见的伪数组参数数组对象列表比如通过得到的列表对象比如举例通过得到的对象列表是一个伪数组。

伪数组及其转换为真数组原理 什么是伪数组

定义:

拥有length属性和数值下标属性。

不具有数组所具有的方法。

</>复制代码

  1. 伪数组是一个Object,而真实的数组是一个Array
常见的伪数组

参数数组:arguments

DOM对象列表HTMLCollection():比如通过document.getElementsByTagName得到的列表

jquery对象:比如$("div")

举例

通过document.getElementsByTagName得到的DOM对象列表是一个伪数组。

</>复制代码

    • test1
    • test2
    • test3
    • test4

</>复制代码

  1. const lis = document.getElementsByTagName("li");
  2. console.log(lis); // HTMLCollection(4) [li, li, li, li]

伪数组是一个Object,而真实的数组是一个Array

</>复制代码

  1. console.log(lis instanceof Array); // false
  2. console.log(lis instanceof Object); // true

拥有length属性和数值下标属性

</>复制代码

  1. console.log(lis[1]); //
  2. test2
  3. console.log(lis.length); // 4

伪数组没有真实数组的方法

</>复制代码

  1. console.log(lis.forEach) //undefined
  2. lis.forEach((ele) => console.log(ele))

真实数组的forEach()方法:

</>复制代码

  1. const ll = [1,2,3];
  2. ll.forEach((ele) => console.log(ele))

Array.prototype.slice.call(lis)将伪数组转换为真数组

</>复制代码

  1. // Array.prototype.slice.call(lis):将伪数组转换为真数组
  2. const lis2 = Array.prototype.slice.call(lis); // 相当于 lis.slice()
  3. console.log(lis2 instanceof Array); //true
  4. console.log(lis2 instanceof Object); //true
  5. console.log(lis2[1]); //
  6. test2
  7. console.log(lis2.forEach); // ƒ forEach() { [native code] }
原理

数组的slice()截取数组中指定部分的元素, 生成一个新的数组 [1, 3, 5, 7, 9], slice(0, 3)

</>复制代码

  1. // slice2()
  2. Array.prototype.slice2 = function (start, end) {
  3. start = start || 0
  4. end = start || this.length
  5. const arr = []
  6. for (var i = start; i < end; i++) {
  7. arr.push(this[i])
  8. }
  9. return arr
  10. }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104335.html

相关文章

  • Django Web开发技术栈清单-Python基础篇

    摘要:使用单引号双引号和三引号或来表示字符串。不可变的集合函数会以字典类型返回当前位置的全部全局变量。用于将进制整数转换成进制,以字符串形式表示。返回字符串中最大的字母,或数组中的最大值。的作用就是减少了单行函数的定义。 问题答案由本人整理 1.基础语法是否熟悉?介绍一下 Python和其他语言最大的区别就是使用行和缩进,而不是大括号({})或者分号(;)来控制类、函数或者逻辑判断。Pyt...

    leeon 评论0 收藏0
  • 温故js系列(16)-数组&数组方法使用详解

    摘要:创建数组数组字面量数组构造函数参数为数组建议使用数组字面量方式,性能好,代码少,简洁,毕竟代码少。数组判断方法用来判断某个值是否为。的这是最简洁最直接的遍历数组元素的语法。把数组转换为本地数组,并返回结果。 前端学习:前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:数组&数组方法使用详解 Array对象 之前一...

    morgan 评论0 收藏0
  • Array 的一些常用 API

    摘要:不能通过判断,它是通过比较的。和返回布尔值用于检测数组中的元素是否有满足指定条件的用于检测数组中所有元素是否都符合指定条件。第二个可选参数是累加器的初始值。累加器,即函数上一次调用的返回值。 unshift、push、shift、pop 这4个方法都会改变原数组 unshift() 从前面添加元素,push() 从后面追加元素,返回数组长度 shift() 删除第0个元素,pop()...

    vslam 评论0 收藏0
  • 前端面试题总结

    摘要:工作中总结的一些比较重要的前端技能,觉得在面试中比较合适提问,即能查看出面试者的技术功底,又能考察其知识体系的广度。异步编程的考察,其关键字的使用,与的关系,同时可以深入考察总共有几种异步编程的方式。 工作中总结的一些比较重要的前端技能,觉得在面试中比较合适提问,即能查看出面试者的技术功底,又能考察其知识体系的广度。适用于应届生和工作年限两年下的同学,掌握下面的知识基本满足工作需求了。...

    wuyangnju 评论0 收藏0

发表评论

0条评论

fobnn

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<