关于javascript:在-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([]); // trueArray.isArray(['????']); // trueArray.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

根本类型

在 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); // truetypeof 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; // ❌ falseArray.isArray(newFrameArray); // ✅ true

构造函数的问题

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

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

// ...newFrameArray.constructor === Array; // ❌ falseArray.isArray(newFrameArray); // ✅ true

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

编辑中可能存在的bug没法实时晓得，预先为了解决这些bug,花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

交换

文章每周继续更新，能够微信搜寻 【大迁世界 】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送Star。