[JavaScript知识库]vue js判断一个变量是数组还是对象

vue js判断一个变量是数组还是对象

<script>
var arr = []
var obj = {}

//方法一
Array.isArray(arr)

//方法二
arr instanceof Array

//方法三
arr.constructor === Array

//方法四(用原型链顶端的toString方法)
Object.prototype.toString.call(arr) === '[object Array]' //判断数组
Object.prototype.toString.call(obj) === '[object Object]' //判断对象
//方法四的错误写法
obj.toString() === '[object Object]'

</script>

注意：为什么方法四是用原型链顶端的toString方法而不是直接 obj.toString() === ‘[object Object]’

原因：因为在数组或者对象内可以改写toString()
例子：

<script>

//当 obj 对象内存在改写的 toString() 时，obj.toString() === '[object Object]' 返回 false

var obj = {
	toString:function(){
		return 'obj'
	}
}
// 当这时候这样写是判断不了变量是否是对象属性
obj.toString() === '[object Object]' // false
</script>

instanceof 和 constructor 的弊端：

他们判定的数组 必须定义在同一个页面 ，否则将会判定为false。
例如：在iframe中的数组判定，就会出错。

<script>
var iframe = document.createElement('iframe')
document.body.append(iframe)
var arr = window.frames[window.frames.length - 1].Array
var arr1 = new arr(1,2,3)

console.log(arr1 instanceof Array)  //false
console.log(arr1.constructor === Array) // false
</script>

好记性不如烂笔头，且学切记！