front-end-interview-questions icon indicating copy to clipboard operation
front-end-interview-questions copied to clipboard

【JavaScript】判断数组的方法?如何检测数组 判断一个变量是不是数组

Open yayxs opened this issue 3 years ago • 0 comments

也就是说怎么判断一个JavaScript 元素是个数组,这也是面试常问的问题。

但是数组是基于对象的,不构成单独的语言类型

instanceof操作符

if (value instanceof Array) {
  // 操作数组
}

缺点 使用 instanceof 的问题是假定只有一个全局执行上下文。如果网页里有多个框架,则可能涉及两个不同的全局执行上下文,因此就会有两个不同版本的 Array 构造函数。如果要把数组从一个框架传给另一个框架,则这个数组的构造函数将有别于在第二个框架内本地创建的数组。

Array.isArray

console.log(typeof []) // object
console.log(typeof {}) // object
if (Array.isArray(value)) {
 	// 说明value是一个数组
}

ECMAScript 提供了 Array.isArray()方法。这个方法的目的就是确定一个值是否为数组,而不用管它是在哪个全局执行上下文中创建的。

缺点 :浏览器的支持不一

Object.prototype.toString

let obj ={}

console.log(obj.__proto__.toString()==='[object Object]') //true

这样我们可以

// 方便起见,将 toString 方法复制到一个变量中
let objectToString = Object.prototype.toString;

// 它是什么类型的?
let arr = [];

console.log(objectToString.call(arr))

至于为什么我们需要使用call 来绑定this,是因为 toString 的算法会检查 this,并返回相应的结果

相关代码

// 判断是否是数组
const arr = ["hello", "yayxs"];
// console.log(arr.toString()) hello,yayxs
// 常用于判断浏览器内置对象
let res1 = Object.prototype.toString.call(arr);
console.log(res1); // [object Array]

/**
 * String
 * Number
 * Symbol
 * Null
 * Undefi
 * Func
 * Obj
 */
// 定义一个函数用来判断数据类型

function isWhatType(target) {
  return Object.prototype.toString.call(target);
}

let targets = [
  "yayxs",
  18,
  Symbol(18),
  null,
  undefined,
  function() {},
  {
    name: "yayxs",
  },
];

console.log(targets);

const res = targets.map((target) => {
  return isWhatType(target);
});

console.log(res);
/**
 * [
 *'[object String]',
 *'[object Number]',
 *'[object Symbol]',
 *'[object Null]',
 *'[object Undefined]',
 *'[object Function]',
 *'[object Object]'
 *]
 */
// 第二种方式通过判断对象的原型链中能不能找到
let res3 = [] instanceof Array;
console.log(res3); // true

所以,如果我们想要获取内建对象的类型,并希望把该信息以字符串的形式返回,而不只是检查类型的话,我们可以用 {}.toString.call 替代 instanceof

yayxs avatar Dec 26 '20 08:12 yayxs