在JS中检查变量是否为数组的方式有哪些(JS,web开发)

下面的代码片段用于检查变量或值是否为数组。在主流的浏览器可以使用Array.isArray方法。对于较旧的浏览器，可以使用polyfill

constvariable=['?','?','?'];//主流浏览器Array.isArray(variable);//老式浏览器Object.prototype.toString.call(variable)==='[objectArray]';

检查数组的现代方法

检查数组的最佳方法是使用内置的Array.isArray()

Array.isArray([]);//trueArray.isArray(['?']);//trueArray.isArray(newArray('?'));//true

浏览器支持

浏览器对 Array.isArray()的支持非常好

适用于旧版浏览器的 Polyfill

如果需要让较早的浏览器支持，则可以使用此MDN polyfill。

if(!Array.isArray){Array.isArray=function(org){returnObject.prototype.toString.call(org)==='[objectArray]'}}

其它方式：使用 Lodash 或 Underscore

如果你使用的是外部库，它们也有一些内置方法??

Lodash

检查值是否为数组对象。

constarray=['?','?','?'];constnotArray='notarray';_.isArray(array);//true_.isArray(notArray);//false

Underscore

如果对象是数组，返回 true。

constarray=['?','?','?'];constnotArray='notarray';_.isArray(array);//true_.isArray(notArray);//false

为什么我们不能使用typeof?

通常，我们要检查值的类型，我们只需使用 typeof

typeof'string';//'string'typeof100;//'number'typeoftrue;//'boolean'typeoffalse;//'boolean'typeoffunction(){};//'function'typeof{};//'object'typeof[];//'object'<--?

问题是数组实际上处于 Object 数据类型的保护伞之下。所以typeof 返回值是没问题。不幸的是，这对我们并没有什么帮助，因为我们只想检查值是不是数组。

typeof

Type例子返回值Stringtypeof "hello""string"Booleantypeof true
typeof false"boolean"Numbertypeof 100"number"Undefinedtypeof undefined"undefined"Functiontypeof function() {}"function"Nulltypeof null"object"非基本类型typeof {}
typeof []"object"

基本类型

在 JS 中有 6 种基本数据类型

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

2. string

3. number

4. bigint

5. boolean

6. undefined

7. symbol

非基本类型 (对象)

对象是指包含数据和使用数据的指令的数据结构。它们是通过引用存储的

我比较喜欢称它为“非基本类型 ”，但它们被称为Object。

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

2. object

3. array

4. function

尽管当我们在函数上使用typeof来检查函数的类型，它返回“ function”，但实际上它是一个对象。

》 MDN：尽管每个 Function 构造函数都是从 Object 构造函数派生的，但它是Function的特殊简写形式。

代码诊断

我收到了很多开发都提供用来检查Array的不同解决方案。乍一看，它们似乎是不错的解决方案。有点遗憾的是，有些问题或极端情况使它们不理想。

Array.length 的问题

constarray=['?','?','?'];array.length;//3

如果数组有长度，我们可以假设它是数组?

遗憾的是，此解决方案的问题在于还有其他具有长度即即的数据类型,如：字符串。因此，这可能导致误报。

conststring='notarray';string.length;//9

即使一个对象也可以有length属性:

constobject={length:2};constarray=['?','?','?'];typeofarray==='object'&&Boolean(array.length);//truetypeofobject==='object'&&Boolean(object.length);//true<--?

instanceof 的问题

constarray=['?','?','?'];arrayinstanceofArray;//true

这种方法在 ES5 很常见， 在许多情况下，这种可以很好的工作。但是，这有一个陷阱!它不适用于多个上下文(例如 框架 或windows)。因为每个框架在其自己的执行环境中都有不同的作用域。因此，它具有不同的全局对象和不同的构造函数。因此，如果尝试针对该框架的上下文测试数组，则该数组不会返回true，而会错误地返回false。

window.frames: frames[] 是窗口中所有命名的框架组成的数组。这个数组的每个元素都是一个Window对象，对应于窗口中的一个框架。

constframeNode=document.createElement('iframe');//创建一个iframe元素节点document.body.appendChild(frameNode);//从我们当前的窗口访问框架constframeBrowser=window.frames[window.frames.length-1];//访问我们创建的框架的“数组”对象frameArray=frameBrowser.Array;//在我们的框架环境中创建一个新的数组constnewFrameArray=newframeArray('?','?','?');newFrameArrayinstanceofArray;//❌falseArray.isArray(newFrameArray);//✅true

构造函数的问题

constarray=['?','?','?'];array.constructor===Array;//true

这是另一个很好的解决方案。不幸的是，这和instanceof有同样的问题。它也不能在多个上下文中工作。

//...newFrameArray.constructor===Array;//❌falseArray.isArray(newFrameArray);//✅true

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">