深入理解javascript类数组对象

77 阅读 0 评论 51 点赞

我是靠谱客的博主细腻大象，这篇文章主要介绍深入理解javascript类数组对象，现在分享给大家，希望可以做个参考。

一、什么是类数组
类数组的定义只存在一条，就是存在length属性。
1、类数组形式

复制代码

1
2
3
4
5
6
7
8
<script>
    let divs = document.querySelectorAll("div")
    console.log(divs.length)   //9
    console.log(divs[0])       //<div>1</div>
    console.log(divs)          //NodeList(9) [div, div, div, div, div, div, div, div, div]
    console.log(Array.isArray(divs))  //false
  </script>

如图所示就是类数组，存在length属性，也可以通过下标来对元素进行访问，但是当使用Array.isArray()来访问的时候，显示为false。如果在此时我们通过push方法，则也会报错。此时我们可以借用数组的方法来解决。

复制代码

1
2
3
4
let divs = document.querySelector("div")
let newArr = Array.prototype.slice(divs, 0)
console.log(Array.isArray(newArr))   //true

2、类数组对象

复制代码

1
2
3
4
5
6
7
8
9
10
  <script>
    let obj = {
      length:2,
      0:"我是谁",
      1:"i am jack"
    }
    console.log(obj.length)             //2
    console.log(Array.isArray(obj))     //false
  </script>

这里我们设置一个对象，并且给其增添length属性，此时我们使用Array.isArray来判断是否是数组。我们也可以进行一些转化，使用数组的一些转换，将其转化成数组。

复制代码

1
2
3
4
5
6
7
8
9
10
11
  <script>
    let obj = {
      0:"我是谁",
      1:"i am jack",
      length:2
    }
    let newArr = Array.prototype.slice.call(obj,0)
    console.log(newArr)         // ['我是谁', 'i am jack']
    console.log(Array.isArray(newArr))  //true
  </script>

3、类数组函数

复制代码

1
2
3
4
5
6
7
8
let func1 = function() {}
console.log(func1.length)    //0
let func2 = function(a, b) {}
console.log(func2.length)   //2
//此时如果打印出
console.log(Array.prototype.slice.call(func1, 0))  //[]
console.log(Array.prototype.slice.call(func2, 0))  //[空属性 × 2]