javascript判断一个对象是否为数组

BearyChat 发布于2019-08-21 16:24 / 3034人阅读

摘要：多个窗口意味着多个全局环境，不同的全局环境拥有不同的全局对象，从而拥有不同的内置类型构造函数。这可能会引发一些问题。上面我们提到使用原生的方法来判断值是否为数组的实例。这也意味着不是一个十分可靠的识别对象类型的方式。

在JavaScript中，可以通过typeof操作符来判断基本数据类型(Undefined、Null、Boolean、Number和String)，同时相信大家也熟知typeof对于对象的判断是不准确的，因为特殊值Null被认为是一个空的对象的引用。

对于数组的创建，可以使用构造函数，通过传递数量

var colors = new Array(3);

也可以在构造函数中传递值来创建数组

var colors = new Array("red", "blue", "green");

创建数组的第二种基本方法是使用数组字面量

var colors = ["red", "blue", "green"];

判断一个对象是否为数组，最先想到的就是instanceof操作符，通过判断对象是否为Array的实例来达到目的

var array = [];
console.log(array instanceof Array); // true

使用instanceof操作符的问题在于它假定只有一个全局执行环境。

然而这在某些特殊环境下并不安全，下面引用自MDN：

在浏览器中，我们的脚本可能需要在多个窗口之间进行交互。多个窗口意味着多个全局环境，不同的全局环境拥有不同的全局对象，从而拥有不同的内置类型构造函数。这可能会引发一些问题。比如，表达式 [] instanceof window.frames[0].Array 会返回false，因为Array.prototype !== window.frames[0].Array.prototype。

因此，需要另寻别的方法来判断。

大家知道在任何值上调用Object原生的toString()方法，都会返回一个[object NativeConstructorName]格式的字符串。

var colors = [];
console.log(Object.prototype.toString.call(colors)); // "[object Array]"

利用这一点我们可以进一步将其封装成一个通用函数

function isArray(value) {
  return Object.prototype.toString.call(value).slice(8, -1) === "Array";
}

在ES5中，为了解决这个问题，提供了Array.isArray()方法来确定某个值到底是不是数组，而不管它是在哪个全局作用域中创建的。

var colors = [];
console.log(Array.isArray(colors)); // true

行文到此应该结束了，因为判断数组的方法其实没有什么好说的。但是在ES6中，由于增加了一种新数据类型Symbol，并通过Symbol暴露了一些内部操作，导致了在判断的结果上会出现一些不确定情况。

和本文相关的一个是Symbol.hasInstance方法，它是执行操作符instanceof时内部调用的方法，用于检测对象的继承信息。当我们调用colors instanceof Array时，实际上调用的是Array[Symbol.hasInstance](colors)。

如果没有了解过Symbol的童鞋还不清楚这意味着什么，且看下面的例子：

var sameArray = {
  [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

console.log([] instanceof sameArray); // true

这里我们定义了sameArray的instance行为，内部调用了Array.isArray()方法来判断传入的参数是否为一个数组。同样我们可以改变一个class的instanceof行为，这里需要注意一点的是在class中是作为类的静态方法。

class Person {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

最重要的是我们可以直接改变内置Array的instanceof行为，导致其完全不可靠。

var colors = [];
Object.defineProperty(Array, Symbol.hasInstance, {
  value(v) {
    return false;
  }
})
console.log(colors instanceof Array); // false
console.log(Array.isArray(colors)); // true

上面我们提到使用Object原生的toString()方法来判断值是否为数组的实例。这在ES5中是一个很有效的方式，但在ES6中我们同样可以通过Symbol.toStringTag来改变Object.prototype.toString()的默认值。

Array.prototype[Symbol.toStringTag] = "Magic";
var colors = [];
console.log(Object.prototype.toString.call(colors)); // "[object Magic]"

这也意味着Object.prototype.toString()不是一个十分可靠的识别对象类型的方式。

注意：虽然语言本身不会阻止你使用Symbol.toStringTag属性来改变对象内建的toString()方法的默认值，但还是不建议这样做。

最后：不论是在ES5还是ES6中，最可靠和最安全的数组判断方法是使用原生的Array.isArray()方法，而在ES3中我们可以直接使用Object.prototype.toString()来达到数组识别的目的。

GPU云服务器云服务器 js判断对象是否为空判断是否为json 是否为数组 js判断是否为证书

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88496.html

在JavaScript中，如何判断数组是数组？

摘要：比如我们今天要讨论的，在当中如何判断一个数组是数组。在数组的原型链上也能找到构造函数由上面的几行代码可以看出，使用运算符可以分辨数组和对象，可以判断数组是数组。用判断实例化的数组拥有一个属性，这个属性指向生成这个数组的方法。如果你没有注意过这个问题，那么这个标题应该会让你感到困惑，判断数据类型这么基础的问题能有什么坑呢？少年，你不能太天真了，我们朝夕面对的这门语言，可是JavaSc...

kohoh_ 2019-08-22 10:34 评论0 收藏0
task0002（一）- JavaScript数据类型及语言基础

摘要：不过让流行起来的原因应该是是目前所有主流浏览器上唯一支持的脚本语言。经过测试，数字字符串布尔日期可以直接赋值，修改不会产生影响。再考虑对象类型为或者的情况。对于结果声明其类型。判断对象的类型是还是，结果类型更改。转载自我的个人博客欢迎大家批评指正 1. 第一个页面交互这里最需要学习的老师的代码中，每一部分功能都由函数控制，没有创建一个全部变量。且最后有一个函数来控制执行代码...

elarity 2019-08-22 10:59 评论0 收藏0
xe-utils 函数库，javascript 工具类

摘要：最新版本见，点击查看历史版本提供一套实用的基础函数任意格式的日期转换函数，浏览器相关操作函数等全局参数设置默认全局参数基础函数判断是否非数值判断是否为有限数值判断判断是否数组判断是否小数判断是否整数判断是否对象判断是否对象判断是否对象判断是最新版本见 Github，点击查看历史版本 XEUtils 提供一套实用的基础函数、任意格式的日期转换函数，浏览器相关操作函数等... API ...

DrizzleX 2019-08-22 15:06 评论0 收藏0
JavaScript专题之类型判断(下)

摘要：专题系列预计写二十篇左右，主要研究日常开发中一些功能点的实现，比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等，特点是研究和的实现方式。 JavaScript专题系列第五篇，讲解更加复杂的类型判断，比如 plainObject、空对象、类数组对象、Window对象、DOM 元素等前言在上篇《JavaScript专题之类型判断(上)》中，我们抄袭 jQuery 写了一个 typ...

QLQ 2019-08-20 17:45 评论0 收藏0
JavaScript数据类型及语言基础--ife

摘要：判断是否为一个函数，返回一个值。使用递归来实现一个深度克隆，可以复制一个目标对象，返回一个完整拷贝被复制的对象类型会被限制为数字字符串布尔日期数组对象。经过测试，数字字符串布尔日期可以直接赋值，修改不会产生影响。再考虑对象类型为或者的情况。 //判断arr是否为一个数组，返回一个bool值首先javascript有5大基本数据类型：Undefined，Null，Boolean，Num...

RayKr 2019-08-20 14:28 评论0 收藏0