本文我们接着上一篇文章对数组的这三个方法进行深入的使用
1.伪数组 转为 数组
html:
<div>
<div clsss="son"></div>
<div clsss="son"></div>
<div clsss="son"></div>
</div>
js:
let div = document.getElementsByTagName("div")
console.log(div) // 输出 HTMLcollection 四个div 很明显,这个东西是伪数组,非正宗的Array
那么如何将伪数组转化为数组呢
let arr = Array.prototype.slice.apply(div)
//实际相当于 [].slice.apply(div) 把slice的方法指针指向div
//并且apply自动调用slice方法,并且slice为传入begin和end的参数,意味着整个div位数组全部传进去返回一个新的数组。
console.log(arr) // 输出 [div,div,div]
//还有第二种情形 arguments
function test(){
console.log(arguments)
return arguments
}
test(1,2,3,4,5) // 输出 Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
//这个情况产生的arguments也是伪数组
let arr1 = Array.prototype.slice.apply(test(1,2,3,4,5)) //相当于 test(1,2,3,4,5).prototype.slice()
console.log(arr1) //输出 [1,2,3,4,5]
//还有第三种情况
let obj = {
0:1,
1:2,
2:"小周",
length:3
}
let arr2 = Array.prototype.slice.apply(obj)
console.log(arr2) // 输出 [1, 2, "小周"]
这个例子需要牵扯到数组在js中的本质了. 数组的本质也是个引用对象object,key对应的是数组的index,value对应的是数组的元素。
注意:如果想这样将一个obj转化为数组,那么obj的最后一定需要加上length这个属性,与数组是一致的。
2.数组的拼接
//先创建两个数组
let arr1 = [1,2,3]
let arr2 = [4,5,6]
//最简单的方法
let arr3 = arr1.concat(arr2)
console.log(arr3) //输出 [1, 2, 3, 4, 5, 6]
console.log(arr1,arr2) // 输出 [1, 2, 3],[4, 5, 6]
以上例子可以看出,尽管arr1和arr2之间使用了concat数组拼接,但是结果arr1或者arr2都还是原数组没有任何改变。
//利用Array的原生push方法呢
Array.prototype.push.apply(arr1,arr2)
console.log(arr1) // 输出 [1, 2, 3, 4, 5, 6]
再来看看经过arr1.push(arr2)后的arr1,就完成了拼接的改变。
3.判断数据类型
//接下来我们讲一下判断数据类型的这个方式
let array = [1,2,3,4,5]
const res = function(arr){
return Object.prototype.toString.apply(arr) === '[object Array]' //相当于arr.prototype.toString()
return Object.prototype.toString.apply(arr) === '[object String]'
return Object.prototype.toString.apply(arr) === '[object Object]'
return Object.prototype.toString.apply(arr) === '[object Null]'
}
console.log(res(array))