实现类数组转化为数组

1.概述

1.1 类数组是什么？

类数组是一个对象;属性名称使用数字;具有length属性;

1.2 类数组特点

可以转化为真正的数组;没有数组方法,即不能调用数组的原型方法(如push,concat等);可以像数组那样循环;

1.3 常用的类数组

arguments(同时它也是可迭代数组)、HTMLCollection、Nodelist(同时它也是可迭代数组)…

2.具体实现

2.1 Array.prototype.slice.call()

slice的大致原理如下:

Array.prototype.mySlice=function (start,end){
    start=start || 0;
    end=end || this.length;
    let result=new Array();
    for (let i=start;i<end;i++){
      result.push(this[i])
    }
    return result;
}
console.log([1,2,3,4].mySlice(1,3))//[2, 3]

所以可以用slice实现:

function toArray(arrayLike) {  
    return Array.prototype.slice.call(arrayLike);  
}  
  
let arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};  
let realArray = toArray(arrayLike);  
console.log(realArray); // 输出 ['a', 'b', 'c']

2.2 使用扩展运算符

扩展运算符是一种更简洁且现代的方法,但请注意,它可能在一些老旧的浏览器版本中不被支持。

function toArray(arrayLike) {  
    return [...arrayLike];  
}  
  
var arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};  
var realArray = toArray(arrayLike);  
console.log(realArray); // 输出 ['a', 'b', 'c']

2.3 Array.from()

扩展运算符并不能把所有的类对象转为数组!!!(这个需要该对象实现Iterator接口即可迭代对象，所以这个方法一定要注意!!!不是万能的)

function toArray(arrayLike) {  
    return Array.from(arrayLike);  
}  
  
var arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};  
var realArray = toArray(arrayLike);  
console.log(realArray); // 输出 ['a', 'b', 'c']

Array.from() 方法是一个静态方法，用于从一个类似数组或可迭代的对象创建一个新的数组实例。这种方法在ES6中引入，因此同样可能在一些老旧的浏览器版本中不被支持。