伪数组转成真数组的5种方法

伪数组转成真数组的5种方法

1.for循环

第一种就是使用最基础的for循环，这个应该有一点基础的都看得懂。

	const divs = document.querySelectorAll('div');
	let arr = [];
	console.log(divs instanceof Array);
	for (let i = 0; i < divs.length;i++) {
        arr.push(divs[i]);
    } 
    console.log(arr instanceof Array);
    // false
    // true

2.[].slice.call()

第二种就是通过调用Array的slice的截取方法。

	const divs = document.querySelectorAll('div');
	console.log(divs instanceof Array);
	const arr = [].slice.call(divs);
	console.log(arr instanceof Array);
	// false
	// true

想知道怎么通过slice方法实现转换就需要知道数组的slice方法内部实现原理。下面我简单的模拟一下slice方法。

	function slice(start,end){
  		const startIndex = start || 0;
  		const endIndex = end || this.length;
  		let tempArr = [];
  		for(let i = startIndex;i < endIndex;i++){
          tempArr.push(this[i]);
  		}
  		return tempArr;
	}

里面的this就是能实现伪数组转换成真数组的关键，通过call()方法将里面的this绑定到伪数组对象上，再通过循环将伪数组的每一项push进一个真数组再返回这个真数组。

3.Array.prototype.slice.call()

第三种也是通过调用Array的slice的截取方法，后面有第二种和第三种的区别分析。

	const divs = document.querySelectorAll('div');
	console.log(divs instanceof Array);
	const arr = Array.prototype.slice.call(divs);
	console.log(arr instanceof Array);
	// false
	// true

4.ES6 Array.form()

第四种实现的方法就比较简单了，但有兼容性问题。

	const divs = document.querySelectorAll('div');
	console.log(divs instanceof Array);
	const arr = Array.from(divs);
	console.log(arr instanceof Array);
	// false
	// true

5.ES6 扩展运算符

这种方法也有兼容性问题。

	const divs = document.querySelectorAll('div');
	console.log(divs instanceof Array);
	const arr = [...divs];
	console.log(arr instanceof Array);
	// false
	// true

需要注意的是，当我们自己手动去创建一个伪数组对象时，会出现一个问题，TypeError: object is not iterable,以下为大家演示一下

// 这是一个具有length的自定义伪数组
let obj = {
    '0': 'zero',
    '1': 'one',
    '2': 'two',
    '3': 'three',
    'length': 4,
};
// 当我们对它解构赋值时
const arr = [...obj];// TypeError: object is not iterable

报出这个错误的原因是什么呢？
我们需要确认将要解构赋值的这个数据结构是“可遍历的（iterable）”，或者说这个数据结构需要部署有Iterator接口。关于iterator（遍历器）的具体内容，可以去阮一峰ECMAScript 6 入门中看详细讲解。
怎么解决这个问题呢？
我们需要手动的添加一个iterator接口

let obj = {
    '0': 'zero',
    '1': 'one',
    '2': 'two',
    '3': 'three',
    'length': 4,
    [Symbol.iterator]: Array.prototype[Symbol.iterator]
};	
const arr = [...obj];// [ 'zero', 'one', 'two', 'three' ]

总结

• [].slice.call()与Array.prototype.slice.call()的区别就在于通过Array.prototype找效率更高。
• 通过[]去调用slice方法需要通过原型链去找slice方法。
• 解构赋值手动创建的伪数组对象时， 需要添加iterator接口。