如

如何在 JavaScript 中检查变量是否为数组

2025-06-10

如何在 JavaScript 中检查变量是否为数组

替代文本

以下是一个代码示例，用于检查变量或值是否为数组。您可以使用 Array.isArray() 方法。对于较旧的浏览器，您可以使用 polyfill 👍

const variable = ['🍝', '🍜', '🍲'];

// ✅ NEWER BROWSER
Array.isArray(variable);

// 🕰 OLDER BROWSER
Object.prototype.toString.call(variable) === '[object Array]';

检查数组的现代方法

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

Array.isArray([]); // true
Array.isArray(['🍝']); // true
Array.isArray(new Array('🍝')); // true

浏览器支持

对的支持Array.isArray()实际上非常好👍

浏览器
铬合金 ✅
火狐 ✅
Safari ✅
边缘 ✅
Internet Explorer 9 ✅

适用于旧版浏览器的 Polyfill

如果您需要旧版浏览器支持，那么您可以使用这个MDN polyfill。

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

使用 Lodash 或 Underscore 的其他方法

如果您使用外部库，它们也有一些内置方法👏

Lodash

检查值是否被归类为数组对象。

const array = ['🍝', '🍜', '🍲'];
const notArray = 'not array';

_.isArray(array); // true
_.isArray(notArray); // false

下划线

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

const array = ['🍝', '🍜', '🍲'];
const notArray = 'not array';

_.isArray(array); // true
_.isArray(notArray); // false

是的，语法与 Lodash 相同🤓

为什么我们不能使用typeof？

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

typeof 'string'; // 'string'
typeof 100; // 'number'
typeof true; // 'boolean'
typeof false; // 'boolean'
typeof function() {}; // 'function'
typeof {}; // 'object'

typeof []; // 'object' <-- 😱

问题在于，Array 实际上属于Object数据类型。所以typeof它确实返回了真实的值。不幸的是，这对于我们这些只想检查值是否为数组的人来说没什么用 🙊

typeof桌子

类型 例子 返回
细绳 typeof "hello" “细绳”
布尔值 typeof true
typeof false		 “布尔值”
数字 typeof 100 “数字”
不明确的 “不明确的”
功能 typeof function() {} “功能”
无效的 typeof null “目的”
非原始 typeof {}
typeof []		 “目的”

原语

MDN：原始数据类型是指既不是对象，也没有方法的数据类型。所有原始数据类型都是不可变的（即无法更改）。它们以值的形式存储。

在 JavaScript 中，有 6 种原始数据类型。

  1. 细绳
  2. 数字
  3. 大整数
  4. 布尔值
  5. 不明确的
  6. 象征

非原始类型（对象）

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

虽然我称之为“非原始”，但它们被称为“对象”。（我个人更喜欢前者，因为当我谈到对象时，我的大脑通常会响起{}😳）

  1. 目的
  2. 大批
  3. 功能

尽管当我们使用typeof函数时它返回的实际上"function"是一个对象。

MDN：它是作为函数的一种特殊简写，尽管每个函数构造函数都是从对象构造函数派生出来的。

那么为什么简写没有扩展到数组呢，我不知道🤷‍♀️但至少他们正在尝试用内置方法来挽回自己Array.isArray()😅

代码破坏者👩‍🔬

我收到了很多不同的解决方案，大家建议我们用它们来检查数组。乍一看，它们似乎很棒。但不幸的是，它们存在一些问题或极端情况，使得它们并不理想。所以，让我们来做一些代码破解吧💉

问题Array.length

const array = ['🍝', '🍜', '🍲'];

array.length; // 3

😷 所以如果一个数组有长度，我们就可以假设它是一个数组？

👩‍⚕️ 遗憾的是，此解决方案的问题在于，其他数据类型也具有长度，例如字符串。因此，这可能会导致误报。

const string = 'not array';

string.length; // 9

length如果我们设置一个对象，它也可以具有属性😱

const object = { length: 2 };
const array = ['🍝', '🍜', '🍲'];

typeof array === 'object' && Boolean(array.length); // true
typeof object === 'object' && Boolean(object.length); // true <-- 😱

⚠ 当然，这还有很多问题——这在检查空数组时不起作用，因为0会被判定为 false。总之，长话短说；直接用Array.isArray()👍 医生的嘱咐 👩‍⚕️

问题instanceof

const array = ['🍝', '🍜', '🍲'];

array instanceof Array; // true

👩‍⚕️这是我看到人们经常提到的一个解决方案。说实话，这确实是一个好主意。在很多情况下，它都能按预期工作。但是，这里存在一个问题！它不适用于多个上下文（例如框架或窗口）。因为每个框架都有不同的作用域和各自的执行环境。因此，它有不同的全局对象和不同的构造函数。所以，如果你尝试根据该框架的上下文测试一个数组，它不会返回true，而是会错误地返回false。

const frameNode = document.createElement('iframe'); // Create an iframe Element Node
document.body.appendChild(frameNode); // Append our frame element
const frameBrowser = window.frames[window.frames.length - 1]; // Access the frame from our current window
frameArray = frameBrowser.Array; // Access the "Array" object of the frame we created

// Create a new Array in our frame environment
const newFrameArray = new frameArray('🍝', '🍜', '🍲');

newFrameArray instanceof Array; // ❌ false

Array.isArray(newFrameArray); // ✅ true

问题constructor

const array = ['🍝', '🍜', '🍲'];

array.constructor === Array; // true

👩‍⚕️ 这又是一个很棒的解决方案。可惜的是，它和 有同样的问题instanceof。它也不适用于多个上下文。

// ...

newFrameArray.constructor === Array; // ❌ false

Array.isArray(newFrameArray); // ✅ true

社区意见

  • [ @fabiokounang ]（https://www.instagram.com/p/B-pfVTALEf/）：其中一个例子可能是您正在制作一个动态表，因此如果它是一个数组，您想要循环该数组并将其输出到表中，但如果它只是一个对象，您可以先使用 Object.keys 循环它的键，然后循环所有的键和值。

  • 这非常适合与条件语句一起使用。如果是数组，则执行某些操作；如果不是数组，则执行其他操作。

参考

感谢阅读❤
欲了解更多代码花絮，请访问samanthaming.com

🎨 Instagram 🌟推特 👩🏻‍💻SamanthaMing.com​
鏂囩珷鏉ユ簮锛�https://dev.to/samanthaming/how-to-check-if-variable-is-an-array-in-javascript-3kbg
Devto 翻译
PREV
如何获取对象的长度
NEXT
如何在 JavaScript 中检查数组是否包含值？