类数组与数组

目录

类数组特性

应用场景

类数组->数组

1.通过call调用数组的splice方法

2.通过call调用数组的slice方法

3.通过apply调用数组的concat方法

4.Array.from

5.展开运算符

分析call,apply调用数组方式实现数组转换的原理

遍历类数组

---

类数组特性

• 具有length属性和若干索引属性的对象
• 不具有数组常见的方法属性

应用场景

• arguments：属性是从0递增的数字，具有callee和length属性
• DOM方法的返回结果     
  • getElementAll  
  • getElementsByTagName/Classname/Name
• querySelectorAll

类数组->数组

1.通过call调用数组的splice方法

Array.prototype.splice.call(arrayLike,0)

2.通过call调用数组的slice方法

let arrayLike= {0: 'foo', 1: 'bar', 2: 'baz', 3: 'qux', length: 4}
Array.prototype.slice.call(arrayLike,1,3)
// ['bar', 'baz']

3.通过apply调用数组的concat方法

Array.prototype.concat.apply([],arrayLike)

4.Array.from

Array.from(arrayLike)

5.展开运算符

[...arrayLike] 

分析call,apply调用数组方式实现数组转换的原理

这里以 Array.prototype.slice.call(arrayLike,1,3) 为例

1.通过call将this指向由Array.prototype变为arrayLike,传入的参数为slice，使arrayLike上也具有了slice方法，等同于

Array.prototype.call(ArrayLike,slice)

2.slice只需要有length属性，不需要一定是Array/String（甚至length属性类型不是number都可，如果不能转化为num,则返回0）

// slice源码
function slice(start, end) 
{ 
  var len = ToUint32(this.length), result = []; 
  for(var i = start; i < end; i++)
  { 
      result.push(this[i]); } return result; 
  }

3.通过slice，返回指定的数组

arrayLike.splice(1,3)

遍历类数组

用以上方法将类数组转化成数组，forEach遍历

Array.prototype.forEach.call(arrayLike,a=>{concole.log(a)})