JS数组判断的5种实用技巧

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《JS判断数组的5种实用方法》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

判断JavaScript变量是否为数组的最推荐方法是使用Array.isArray()。1. Array.isArray()：最推荐的方法，简单直接，跨frames/windows安全，兼容现代浏览器（不支持旧版IE）；2. instanceof：存在多frames/windows下不可靠、原型链可能被修改的问题；3. Object.prototype.toString.call()：通用可靠，适用于所有类型，但代码稍长；4. constructor：易受constructor属性被修改的影响；5. 鸭子类型：灵活但不够严谨，可能误判非数组对象。

判断JavaScript变量是否为数组，核心在于区分数组和其他对象类型。有多种方法可以实现这一点，但每种方法都有其适用场景和局限性。选择哪种方法取决于你的具体需求和兼容性考虑。

1. Array.isArray()：这是最推荐的方法，简单直接且兼容性良好（除了较旧的IE版本）。

   

2. instanceof：虽然常用，但存在一些问题，特别是在有多个frames或windows的情况下。

3. Object.prototype.toString.call()：通用且可靠，但稍微冗长。

   

4. constructor：在某些特殊情况下可能不准确。

5. 鸭子类型（Duck Typing）：通过检查变量是否具有数组的特定属性和方法来判断，但不够严谨。

Array.isArray() 的优势与局限

Array.isArray() 方法是ES5引入的，用于确定传递的值是否是一个 Array。它解决了 instanceof 在多 frames 或 windows 环境下的问题，因为每个 frame 都有自己的执行上下文和不同的 Array 构造函数。

优势：

• 简单易用：Array.isArray(myVar)。
• 跨 frames/windows 安全：能够正确识别来自不同 frames 或 windows 的数组。
• 广泛支持：现代浏览器都支持，对于不支持的旧版本浏览器，可以使用 polyfill。

局限性：

• 旧版 IE 不支持：需要使用 polyfill 来兼容。

示例：

Array.isArray([1, 2, 3]);  // true
Array.isArray({length: 3}); // false
Array.isArray(document.getElementsByTagName('div')); // false (虽然类似数组，但不是真正的数组)

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

instanceof 操作符的潜在陷阱

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。对于数组来说，它检查变量的原型链上是否存在 Array.prototype。

优势：

• 简单直观。

局限性：

• 在多 frames 或 windows 环境下不可靠：如果页面包含多个 frames，每个 frame 都有自己的全局执行上下文，以及不同的 Array 构造函数。这意味着一个 frame 中的数组，在另一个 frame 中使用 instanceof 检测时，可能会返回 false。
• 原型链可能被修改：如果 Array.prototype 被修改，instanceof 的结果可能会不准确。

示例：

let arr = [1, 2, 3];
arr instanceof Array; // true

let iframe = document.createElement('iframe');
document.body.appendChild(iframe);
let iArray = iframe.contentWindow.Array;
let arr2 = new iArray(1, 2, 3);
arr2 instanceof Array; // 在某些情况下可能为 false，取决于浏览器和环境

Object.prototype.toString.call() 的可靠性

Object.prototype.toString 方法返回一个表示该对象的字符串。当使用 call() 方法调用时，可以指定 this 的值，从而获取任何变量的类型信息。对于数组，它会返回 "[object Array]"。

优势：

• 通用且可靠：适用于所有类型的变量，包括 null 和 undefined。
• 跨 frames/windows 安全：不受 frames 和 windows 的影响。

局限性：

• 稍微冗长：相对于 Array.isArray()，代码稍长。

示例：

Object.prototype.toString.call([1, 2, 3]);   // "[object Array]"
Object.prototype.toString.call(new Date());  // "[object Date]"
Object.prototype.toString.call(null);       // "[object Null]"
Object.prototype.toString.call(undefined);  // "[object Undefined]"

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

constructor 属性的注意事项

每个 JavaScript 对象都有一个 constructor 属性，指向创建该对象的构造函数。对于数组来说，它通常指向 Array 构造函数。

优势：

• 简单易懂。

局限性：

• constructor 属性可能被修改：如果对象的 constructor 属性被修改，那么使用这种方法判断数组类型可能会出错。
• 在某些特殊情况下可能不准确：例如，当使用 Object.create(null) 创建对象时，该对象没有 constructor 属性。

示例：

let arr = [1, 2, 3];
arr.constructor === Array; // true

let obj = Object.create(null);
// obj.constructor === undefined

function MyArray() {}
MyArray.prototype = [];
let myArray = new MyArray();
myArray.constructor === MyArray; // false, 因为原型被重写

鸭子类型（Duck Typing）的适用场景

鸭子类型是一种动态类型判断的方法，它不关心对象的实际类型，只关心对象是否具有特定的属性和方法。对于数组来说，可以检查变量是否具有 length 属性，以及是否可以通过索引访问元素。

优势：

• 灵活：可以判断类似数组的对象，例如 arguments 对象和 DOM 集合。

局限性：

• 不够严谨：可能会误判不是数组的对象。例如，一个具有 length 属性和数字索引属性的对象，会被误判为数组。

示例：

function isArrayLike(obj) {
  return typeof obj === 'object' &&
         typeof obj.length === 'number' &&
         obj.length >= 0 &&
         !isNaN(obj.length) &&
         (obj.length === 0 || (typeof obj[obj.length - 1] !== 'undefined'));
}

isArrayLike([1, 2, 3]);            // true
isArrayLike({length: 3, 0: 'a', 1: 'b', 2: 'c'}); // true
isArrayLike(document.getElementsByTagName('div'));   // true (HTMLCollection)
isArrayLike('hello');               // false

终于介绍完啦！小伙伴们，这篇关于《JS数组判断的5种实用技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！