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

技术背景

在JavaScript开发中，我们经常需要判断一个变量是否为数组，这在处理不同类型数据时非常重要。不同的判断方法有不同的性能和兼容性表现，因此了解多种判断方法很有必要。

实现步骤

1. 使用constructor属性

variable.constructor === Array;

这是在Chrome等浏览器中较快的方法。因为所有数组都是对象，检查constructor属性对于JavaScript引擎来说是一个快速的过程。如果要检查对象的属性是否为数组，需要先检查该属性是否存在：

variable.prop && variable.prop.constructor === Array;

2. 使用Array.isArray()方法

Array.isArray(variable);

这是ES5引入的标准方法，但在旧浏览器（如IE8）中可能需要使用polyfill。可以使用es5-shim库来实现polyfill，或者手动添加以下代码：

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

3. 使用instanceof操作符

variable instanceof Array;

此方法性能稍逊于前两种，但代码看起来更简洁。不过要注意，使用variable instanceof Number总是返回false。

4. 使用Object.prototype.toString.call()方法

Object.prototype.toString.call(variable) === '[object Array]';

这是最通用的方法，但性能相对较慢。

核心代码

以下是几种常见方法的示例代码：

// 使用constructor属性
function checkByConstructor(variable) {
    return variable.constructor === Array;
}

// 使用Array.isArray()方法
function checkByIsArray(variable) {
    return Array.isArray(variable);
}

// 使用instanceof操作符
function checkByInstanceof(variable) {
    return variable instanceof Array;
}

// 使用Object.prototype.toString.call()方法
function checkByToString(variable) {
    return Object.prototype.toString.call(variable) === '[object Array]';
}

// 测试代码
const arr = [1, 2, 3];
const obj = { a: 1 };

console.log(checkByConstructor(arr)); // true
console.log(checkByConstructor(obj)); // false

console.log(checkByIsArray(arr)); // true
console.log(checkByIsArray(obj)); // false

console.log(checkByInstanceof(arr)); // true
console.log(checkByInstanceof(obj)); // false

console.log(checkByToString(arr)); // true
console.log(checkByToString(obj)); // false

最佳实践

• 现代浏览器：优先使用Array.isArray()方法，因为它简洁且性能较好。
• 需要兼容旧浏览器：可以使用Object.prototype.toString.call()方法，或者手动实现Array.isArray()的polyfill。
• 性能敏感场景：可以使用constructor属性进行判断，但要注意先检查属性是否存在。

常见问题

1. arguments对象不是数组

arguments关键字用于访问函数的参数，但它不是数组，即使它通常表现得像数组。可以使用Array.isArray(arguments)来验证，结果为false。

var func = function() {
    console.log(arguments);        // [1, 2, 3]
    console.log(arguments.length); // 3
    console.log(Array.isArray(arguments)); // false
    console.log(arguments.slice);  // undefined (Array.prototype methods not available)
    console.log([3, 4, 5].slice);  // function slice() { [native code] } 
};
func(1, 2, 3);

2. instanceof在跨窗口或跨框架时可能失效

由于不同窗口或框架有自己的全局对象，使用instanceof判断数组可能会得到错误的结果。此时建议使用Array.isArray()或Object.prototype.toString.call()方法。