在JS中检查变量是否为数组的多种方式,并说说ES6引入检查数组的缘起!

下面的代码片段用于检查变量或值是否为数组。在主流的浏览器可以使用Array.isArray方法。对于较旧的浏览器,可以使用polyfill

创新互联公司主营额济纳网站建设的网络公司,主营网站建设方案,app软件开发,额济纳h5小程序开发搭建,额济纳网站营销推广欢迎额济纳等地区企业咨询

 
 
 
 
  1. const variable = ['', '', ''];
  2. // 主流浏览器
  3. Array.isArray(variable);
  4. // 老式浏览器
  5. Object.prototype.toString.call(variable) === '[object Array]';

检查数组的现代方法

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

 
 
 
 
  1. Array.isArray([]); // true
  2. Array.isArray(['']); // true
  3. Array.isArray(new Array('')); // true

浏览器支持

浏览器对 Array.isArray()的支持非常好

适用于旧版浏览器的 Polyfill

如果需要让较早的浏览器支持,则可以使用此MDN polyfill。

 
 
 
 
  1. if (!Array.isArray) {
  2.   Array.isArray = function(org) {
  3.     return Object.prototype.toString.call(org) === '[object Array]'
  4.   }
  5. }

其它方式:使用 Lodash 或 Underscore

如果你使用的是外部库,它们也有一些内置方法??

Lodash

检查值是否为数组对象。

 
 
 
 
  1. const array = ['', '', ''];
  2. const notArray = 'not array';
  3. _.isArray(array); // true
  4. _.isArray(notArray); // false

Underscore

如果对象是数组,返回 true。

 
 
 
 
  1. const array = ['', '', ''];
  2. const notArray = 'not array';
  3. _.isArray(array); // true
  4. _.isArray(notArray); // false

为什么我们不能使用typeof?

通常,我们要检查值的类型,我们只需使用 typeof

 
 
 
 
  1. typeof 'string'; // 'string'
  2. typeof 100; // 'number'
  3. typeof true; // 'boolean'
  4. typeof false; // 'boolean'
  5. typeof function() {}; // 'function'
  6. typeof {}; // 'object'
  7. typeof []; // 'object' <-- 

问题是数组实际上处于 Object 数据类型的保护伞之下。所以typeof 返回值是没问题。不幸的是,这对我们并没有什么帮助,因为我们只想检查值是不是数组。

typeof

Type 例子 返回值
String typeof "hello" "string"
Boolean typeof true
 typeof false
"boolean"
Number typeof 100 "number"
Undefined typeof undefined "undefined"
Function typeof function() {} "function"
Null typeof null "object"
非基本类型 typeof {}
typeof []
"object"

基本类型

在 JS 中有 6 种基本数据类型

  1. string
  2. number
  3. bigint
  4. boolean
  5. undefined
  6. symbol

非基本类型 (对象)

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

我比较喜欢称它为“非基本类型 ”,但它们被称为Object。

  1. object
  2. array
  3. function

尽管当我们在函数上使用typeof来检查函数的类型,它返回“ function”,但实际上它是一个对象。

》 MDN:尽管每个 Function 构造函数都是从 Object 构造函数派生的,但它是Function的特殊简写形式。

代码诊断

我收到了很多开发都提供用来检查Array的不同解决方案。乍一看,它们似乎是不错的解决方案。有点遗憾的是,有些问题或极端情况使它们不理想。

Array.length 的问题

 
 
 
 
  1. const array = ['', '', ''];
  2. array.length; // 3

如果数组有长度,我们可以假设它是数组?

遗憾的是,此解决方案的问题在于还有其他具有长度即即的数据类型,如:字符串。因此,这可能导致误报。

 
 
 
 
  1. const string = 'not array';
  2. string.length; // 9

即使一个对象也可以有length属性:

 
 
 
 
  1. const object = { length: 2 };
  2. const array = ['', '', ''];
  3. typeof array === 'object' && Boolean(array.length); // true
  4. typeof object === 'object' && Boolean(object.length); // true <-- 

instanceof 的问题

 
 
 
 
  1. const array = ['', '', ''];
  2. array instanceof Array; // true

这种方法在 ES5 很常见, 在许多情况下,这种可以很好的工作。但是,这有一个陷阱!它不适用于多个上下文(例如 框架 或windows)。因为每个框架在其自己的执行环境中都有不同的作用域。因此,它具有不同的全局对象和不同的构造函数。因此,如果尝试针对该框架的上下文测试数组,则该数组不会返回true,而会错误地返回false。

window.frames: frames[] 是窗口中所有命名的框架组成的数组。这个数组的每个元素都是一个Window对象,对应于窗口中的一个框架。

 
 
 
 
  1. const frameNode = document.createElement('iframe'); // 创建一个iframe元素节点
  2. document.body.appendChild(frameNode);
  3. // 从我们当前的窗口访问框架
  4. const frameBrowser = window.frames[window.frames.length - 1];
  5. // 访问我们创建的框架的“数组”对象
  6. frameArray = frameBrowser.Array; 
  7. // 在我们的框架环境中创建一个新的数组
  8. const newFrameArray = new frameArray('', '', '');
  9. newFrameArray instanceof Array; //  false
  10. Array.isArray(newFrameArray); //  true

构造函数的问题

 
 
 
 
  1. const array = ['', '', ''];
  2. array.constructor === Array; // true

这是另一个很好的解决方案。不幸的是,这和instanceof有同样的问题。它也不能在多个上下文中工作。

 
 
 
 
  1. // ...
  2. newFrameArray.constructor === Array; //  false
  3. Array.isArray(newFrameArray); //  true

作者:Samantha Ming 译者:前端小智 来源:medium

原文:https://www.samanthaming.com/tidbits/89-how-to-check-if-variable-is-array/

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

分享名称:在JS中检查变量是否为数组的多种方式,并说说ES6引入检查数组的缘起!
网页网址:http://www.shufengxianlan.com/qtweb/news28/289628.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联