乐趣区

关于javascript:在-JS-中检查变量是否为数组的多种方式并说说-ES6-引入检查数组的缘起

jiezi

作者：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。

退出移动版