怎么实现系列：6.怎么判断是否是一个伪数组

Alin
203 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

系列介绍

经常会被面试官问到这个怎么实现，或者怎么实现xx？

有些功能或者效果没有做过或者实现过，回答不出来，场面一度有些尴尬

于是打算出一个怎么实现系列，来实现xx功能或者xx效果，以此来提升自己的实战效果和能力。

本系列是一个开放系列，我实现的不一定是最好的，欢迎大家交流讨论

场景

面试官：你了解数组吧

我：了解，经常使用数组

面试官：那伪数组有了解吗

我：了解，伪数组是类似数组的结构，有length属性，但是不能调用数组的方法

面试官：那怎么判断是一个伪数组？

（思考了一会）

我：数组知道怎么判断，伪数组不太会判断

面试官：...

数组

数组是一组有序的元素集合的数据结构，每个元素有其对应的下标

判断是否是数组有以下几种简单的方法

  1. Array.isArray()
  2. arr instanceof Array

通过以上几种方法，可以简单判断是否是一个数组

伪数组

伪数组是类似数组的数据结构，里面的元素都具有下标，且具有length属性，但是由于不是数组，故不能调用数组的方法

是伪数组的结构有：htmlCollection、arguments对象等，这些都是伪数组

数组可以通过上面提到的几种方法判断是否是一个数组，但是怎么判断是否是一个伪数组，这我倒是真没有了解过。平常也没有判断过是否是伪数组，只好到网上查阅一些资料学习下怎么判断是否是一个伪数组

查阅资料

在网上查阅了一下资料，浏览了一些资料和文章，在csdn的一篇文章里发现了相关资料

《javascriopt权威指南》上给出了代码用来判断一个对象是否是属于伪数组
function isArrayLike(o){
  if(o&&typeof o === 'object'&&isFinite(o.lenght)&&o.lenght>0&&o.length === Math.floor(o.length)&&o.length <4294967296) {
    return true
  }else {
    return false
  }
  
}

我们先使用这段代码，看下是否能判断是一个伪数组

实现

先创建一个html文件，创建一个script标签，把上面代码放到script标签里


<script>
            function isArrayLike(o) {
                if (
                    o &&
                    typeof o === "object" &&
                    isFinite(o.length) &&
                    o.length > 0 &&
                    o.length === Math.floor(o.length) &&
                    o.length < 4294967296
                )
                    return true
                return false
            }
        </script>

创建一个伪数组


let arrLike = document.querySelectorAll("body")

创建一个数组


let arr = [1, 2, 3]

调用isArrayLike方法，打印一下结果


console.log(isArrayLike(arrLike))
console.log(isArrayLike(arr))

到浏览器查看打印结果

0001.png

发现都是true

不对，伪数组应该打印为true，数组应该打印为false

思考一下，那我们能不能结合上面提到的判断是否是数组的方法，结合一下来进行判断呢

我们先尝试一下，看下会有什么效果

在isArrayLike函数里多增加一个判断条件


function isArrayLike(o) {
                if (
                    o &&
                    typeof o === "object" &&
                    isFinite(o.length) &&
                    o.length > 0 &&
                    o.length === Math.floor(o.length) &&
                    o.length < 4294967296 &&
                    !(o instanceof Array)
                )
                    return true
                return false
            }

再到浏览器里查看运行结果

0002.png

可以看到，对于伪数组打印为true，对于数组打印为false，可以达到效果

小结

如果想要判断是否是一个伪数组，可以通过调用上面定义的方法来进行判断

avatar
文章
阅读
粉丝