【JavaScript】 call,apply和bind方法的实际应用与详细解析(2)(面试常问*)

49 阅读2分钟

本文我们接着上一篇文章对数组的这三个方法进行深入的使用

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为传入beginend的参数,意味着整个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))