JS数组类型检测

2023-09-09  本文已影响0人  Ving

假定一个数组:

const arr = [1, 2, 3]

方式一

通过 Object.prototype.toString

function isArray(arr) {
  Object.prototype.toString.call(arr) === '[object Array]'
}

console.log(isArray(arr)) // true

缺点:利用 toStringTag 更改字符值,可造成误判

const obj = {
  [Symbol.toStringTag]: 'Array'
}

console.log(isArray(obj)) // true

console.log(Object.prototype.toString.call(obj)) // [object Array]

方式二

通过 instanceof

function isArray(arr) {
  return arr instanceof Array
}

console.log(isArray(arr)) // true

缺点:
1、通过** setPrototypeOf**更改原型,可造成误判

const obj = {}

Object.setPrototypeOf(obj, Array.prototype)

console.log(isArray(obj)) // true

2、在iframe环境构造,会存在误判

/** 获取页面上的iframe */
const iframe = document.querySelect('iframe')

/** 获取iframe环境下的构造函数 */
const Array2 = iframe.content Window.Array

/** 创建数组 */
const arr2 = new Array2()

console.log(isArray(arr2)) // false

方式三(推荐)

通过 Array.isArray()

console.log(Array.isArray(arr)) // true

// 检测方式二中的obj
console.log(isArray(obj)) // false

// 检测方式三中的arr2
console.log(isArray(arr2)) // true

原理:通过检测是否经过Array的构造函数 f Array() { native code}

上一篇 下一篇

猜你喜欢

热点阅读