JS判断数组的5种方法

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JS判断变量是否为数组的几种方法》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

判断一个变量是否为数组最推荐的方法是使用 Array.isArray()，因为它准确、可靠且能正确处理跨iframe等不同执行环境下的数组判断；2. typeof 不能用于判断数组，因为它对所有对象（包括数组、普通对象、null）都返回"object"，无法区分具体类型；3. instanceof Array 在跨执行环境（如多个iframe）时会失效，因为不同环境中的 Array 构造函数不相等，导致判断错误；4. Object.prototype.toString.call() 也能正确判断数组且跨环境安全，但语法较冗长，适合需要通用类型判断的场景，而 Array.isArray() 更简洁高效，是判断数组的首选方法。

在JavaScript里，要判断一个变量是不是数组，最直接、最推荐的方法就是使用 Array.isArray()。这个方法是专门为此设计的，它能提供最准确、最可靠的判断结果，几乎没有副作用。

解决方案

判断一个变量 myVar 是否是数组，你只需要这样做：

if (Array.isArray(myVar)) {
  console.log("这是一个数组！");
} else {
  console.log("这不是一个数组。");
}

Array.isArray() 方法会返回一个布尔值：如果是数组，就返回 true；如果不是，就返回 false。它能正确处理所有可能的情况，包括跨iframe的数组实例，这是其他一些传统方法做不到的。我个人觉得，当你需要一个明确的、无歧义的答案时，它就是你的首选。

为什么不推荐使用 typeof 判断数组？

说实话，刚接触JavaScript的时候，很多人（包括我自己在内）都会下意识地想用 typeof 来判断变量类型。但对于数组来说，typeof 根本就靠不住。如果你对一个数组执行 typeof，它会返回 "object"。问题是，null 也会返回 "object"，普通的JavaScript对象也会返回 "object"。

console.log(typeof []);         // "object"
console.log(typeof {});         // "object"
console.log(typeof null);        // "object"
console.log(typeof "hello");     // "string"
console.log(typeof 123);         // "number"

你看，它根本无法区分数组和普通对象，甚至连 null 都搅和进来了。所以，如果你想用 typeof 来判断数组，那基本是行不通的，它会给你一个模棱两可的答案，导致逻辑出错。这玩意儿在判断原始类型（字符串、数字、布尔、undefined、symbol、bigint）时还算好用，但一碰到对象，特别是数组，就彻底歇菜了。

instanceof Array 在什么情况下会失效？

instanceof 操作符看起来似乎是个不错的选择，它能检查一个对象是否是某个构造函数的实例。所以，你可能会写 myVar instanceof Array。在大多数情况下，这确实能正常工作。

let arr = [1, 2, 3];
console.log(arr instanceof Array); // true

let obj = {};
console.log(obj instanceof Array); // false

但是，instanceof 有一个致命的缺陷，那就是它依赖于原型链。当你的代码运行在不同的JavaScript执行环境（比如，一个页面包含了多个 iframe，或者你在Node.js环境中使用 vm 模块创建的沙箱）时，每个环境都有自己独立的全局对象和构造函数。这意味着，一个 iframe 中创建的数组，它的 Array 构造函数和主窗口的 Array 构造函数是不同的，即使它们都叫 Array。

<!-- index.html -->
<iframe id="myFrame" src="about:blank"></iframe>
<script>
  const iframe = document.getElementById('myFrame');
  const iframeDoc = iframe.contentWindow.document;
  const iframeArray = iframe.contentWindow.Array; // 获取iframe中的Array构造函数

  const arrInMain = [];
  const arrInIframe = iframeDoc.createElement('script').parentNode; // 随便找个iframe中的数组

  console.log(arrInMain instanceof Array);        // true (主窗口的数组是主窗口Array的实例)
  console.log(arrInIframe instanceof Array);      // false (iframe的数组不是主窗口Array的实例)
  console.log(arrInIframe instanceof iframeArray); // true (iframe的数组是iframe中Array的实例)
</script>

在这种跨上下文的情况下，instanceof Array 会失效，因为它无法识别来自不同上下文的数组实例。这在大型应用或第三方库集成时，是一个非常隐蔽且难以调试的坑。所以，除非你确定你的代码只在一个单一的JavaScript执行环境里运行，否则 instanceof 并不是一个可靠的数组判断方法。

Object.prototype.toString.call() 是如何判断数组的，它和 Array.isArray() 有何异同？

Object.prototype.toString.call() 是一种非常通用的方法，用来判断任何JavaScript内置对象的类型。当你在一个数组上调用它时，它会返回 "[object Array]"。

let arr = [1, 2, 3];
let obj = {};
let str = "hello";
let num = 123;
let nul = null;
let und = undefined;

console.log(Object.prototype.toString.call(arr)); // "[object Array]"
console.log(Object.prototype.toString.call(obj)); // "[object Object]"
console.log(Object.prototype.toString.call(str)); // "[object String]"
console.log(Object.prototype.toString.call(num)); // "[object Number]"
console.log(Object.prototype.toString.call(nul)); // "[object Null]"
console.log(Object.prototype.toString.call(und)); // "[object Undefined]"

这种方法之所以可靠，是因为 Object.prototype.toString 是一个内部方法，它会根据对象的 [[Class]] 内部属性返回一个字符串。这个 [[Class]] 属性是引擎内部用来标识对象类型的，它不会受到跨上下文环境的影响。所以，Object.prototype.toString.call() 在判断数组时，和 Array.isArray() 一样，都是跨上下文安全的。

异同点：

• 可靠性： 两者都非常可靠，都能正确判断数组，并且都能处理跨上下文的数组实例问题。
• 简洁性： Array.isArray() 显然更简洁、更直观。它就是为判断数组而生的，语义非常明确。而 Object.prototype.toString.call() 稍微有点冗长，需要额外的字符串比较。
• 通用性： Object.prototype.toString.call() 更通用。你可以用它来判断几乎所有内置对象的类型（比如 Date、RegExp、Function 等），而 Array.isArray() 只能判断数组。
• 性能： 在现代浏览器中，Array.isArray() 通常会比 Object.prototype.toString.call() 稍微快一点，因为它是一个原生方法，并且是专门优化的。不过，这种性能差异通常微乎其微，在大多数应用中可以忽略不计。

所以，我的建议是，如果你只是想判断一个变量是不是数组，那就无脑用 Array.isArray()。它简洁、高效、语义明确。如果你需要一个更通用的类型判断工具，比如要区分 Date 对象、RegExp 对象等等，那么 Object.prototype.toString.call() 就会派上用场。但对于数组这一个特定场景，Array.isArray() 已经是最佳实践了。

以上就是《JS判断数组的5种方法》的详细内容，更多关于的资料请关注golang学习网公众号！