数组和类数组

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

数组和类数组，你知道多少呢。 今天一起来学习学习吧。

创建数组的几种方式

我们先说说有几种方式创建数组：

1. 数组对象字面量
2. new Array()
   只有一个参数的时候，其作为数组的长度。 这个是个坑点。
3. Array.from
4. Array.prototype.slice

// 字面量
var arr = [...[1,2,3]]; // 1,2,3
// new Array
var arr2 = new Array(1,2,3); // 1,2,3,4
// new Array
var arr3 = new Array(1) // [empty];
// Array.from
var arr4 = Array.from([1,2,3]); // [1,2,3]
// Array.from
var arr4 = Array.from({length:3}, function(value,index){
    return index + 1
}); // [1,2,3]

// Array.prototype.slice
Array.prototype.slice.call(document.querySelectorAll("div")) // [div, div, div....]

类数组

特性：

1. 具有length属性
2. 可以下标访问
3. 不具备数据的方法
   当然很多自己实现了forEach等个别方法。

常见的类数组：

1. arguments对象 函数的参数， 在剩余参数出现前，这个是动态参数的主力。

2. DOM方法的返回结果 比如 document.getElementsByTagName, document.querySelectorAll, document.body.childNodes等等

3. 自定义
   一般，先设置一个length属性，下标赋值几个。

var arrayLikeObj = {
    length: 3,
    0: 1,
    1: 2,
    2: 3
}

和数组的区别

本质上类数组是对象，所以下面的区别也是显然：

// 类数组
var arrayLikeObj = {
    length: 2,
    0: 1,
    1: 2
};

// 数组
var array = Array.from(arrayLikeObj);

• instanceof 类数组的是Object的实例， 数组是 Array的实例

arrayLikeObj instanceof Object; // true
array instanceof Array; // true  

• constructor 类数组的是Object的实例， 数组是 Array的实例
• toString 类数组的是[object Object]的实例， 数组是 [object Array]的实例
• Array.isArray 类数组是false， 数组是true

Array.isArray(arrayLikeObj); // false
Array.isArray(array); // true  

类数组如何转为数组

1. Array.prototype.slice

// 类数组
var arrayLikeObj = {
    length: 2,
    0: 1,
    1: 2
};
Array.prototype.slice.call(arrayLikeObj)  // [1,2]

2. Array.from

// 类数组
var arrayLikeObj = {
    length: 2,
    0: 1,
    1: 2
};
Array.from(arrayLikeObj)  // [1,2]

3. 如果是实现了 Symbol.iterator, 拓展运算符

// body.childNodes
[...document.body.childNodes]  // [div#juejin-web-editor, script, script]

// arguments
function argumentsTest(){
    console.log([...arguments], arguments)
}
argumentsTest(1,2,3)

// 借用其他数组的Symbol.iterator
var  arrayLikeObj = {
   length: 2,
   0: 1,
   1: 2,
   [Symbol.iterator]: [][Symbol.iterator]
};
[...arrayLikeObj] // [1,2]

// 自己实现一个 Symbol.iterator

var arrayLikeObj = {
    length: 2,
    0: 1,
    1: 2,
    [Symbol.iterator]() {
        const self = this;
        let index = 0;
        return {
          next() {
            if (index < self.length) {
              return {
                value: self[index++],
                done: false
              };
            }
            return { value: undefined, done: true };
          }
        };
      }
};

[...arrayLikeObj]  // [1, 2]

4. 遍历复制

var arr = [];
var arrayLikeObj = {
    length: 2,
    0: 1,
    1: 2
};

for(let i=0; i< arrayLikeObj.length; i++){
    arr[i] = arrayLikeObj[i];
}

console.log(arr); //  [1, 2]

小结

今天你收获了吗？