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

做者：Samantha Ming
译者：前端小智
来源：medium

点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

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

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

// 主流浏览器
Array.isArray(variable);

// 老式浏览器
Object.prototype.toString.call(variable) === '[object Array]';

检查数组的现代方法

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

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

浏览器支持

浏览器对 Array.isArray()的支持很是好 👍

适用于旧版浏览器的 Polyfill

若是须要让较早的浏览器支持，则可使用此MDN polyfill。

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

其它方式：使用 Lodash 或 Underscore

若是你使用的是外部库，它们也有一些内置方法👏

Lodash

检查值是否为数组对象。

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

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

Underscore

若是对象是数组，返回 true。

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

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

为何咱们不能使用typeof？

一般，咱们要检查值的类型，咱们只需使用 typeof

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

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 的问题

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 <-- 😱

instanceof 的问题

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

array instanceof Array; // true

这种方法在 ES5 很常见， 在许多状况下，这种能够很好的工做。 可是，这有一个陷阱！ 它不适用于多个上下文（例如 框架 或windows）。 由于每一个框架在其本身的执行环境中都有不一样的做用域。 所以，它具备不一样的全局对象和不一样的构造函数。 所以，若是尝试针对该框架的上下文测试数组，则该数组不会返回true，而会错误地返回false。

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

const frameNode = document.createElement('iframe'); // 建立一个iframe元素节点
document.body.appendChild(frameNode);
// 从咱们当前的窗口访问框架
const frameBrowser = window.frames[window.frames.length - 1];
// 访问咱们建立的框架的“数组”对象
frameArray = frameBrowser.Array; 

// 在咱们的框架环境中建立一个新的数组
const newFrameArray = new frameArray('🍝', '🍜', '🍲');

newFrameArray instanceof Array; // ❌ false

Array.isArray(newFrameArray); // ✅ true

构造函数的问题

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

array.constructor === Array; // true

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

// ...

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

Array.isArray(newFrameArray); // ✅ true

---

原文：https://www.samanthaming.com/...

编辑中可能存在的bug无法实时知道，过后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

交流

文章每周持续更新，能够微信搜索 【大迁世界 】 第一时间阅读，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，欢迎Star。