类数组转换

类数组转换

类数组对象，就是指可以通过索引属性访问元素并且拥有 length 属性的对象

类数组对象与数组的区别是类数组对象不能直接使用数组的方法

let likeArr = {
    0: 'jsx',
    1: 'ljj',
    2: 'ddc',
    3: 'zdj'，
    length: 4
}

1. [ ].slice.call()

[].slice.call() 或 Array.prototype.slice.call()

通过 call 借用数组原型对象中的 slice 方法

let likeArr = {
	0: 'jsx',
	1: 'ljj',
	2: 'ddc',
	3: 'zdj',
	length: 4
}
let arr = Array.prototype.slice.call(likeArr)
console.log(arr); // ['jsx', 'ljj', 'ddc', 'zdj']
console.log(arr instanceof Array); // true

2. [ ].splice.call()

[].splice.call() 或 Array.prototype.splice.call()

通过 call 借用数组原型对象中的 splice 方法

let likeArr = {
	0: 'jsx',
	1: 'ljj',
	2: 'ddc',
	3: 'zdj',
	length: 4
}
let arr = Array.prototype.splice.call(likeArr, 0)
console.log(arr); // ['jsx', 'ljj', 'ddc', 'zdj']
console.log(arr instanceof Array); // true

3. [ ].concat.apply()

[].concat.apply() 或 Array.prototype.concat.apply()

通过 apply 借用数组原型对象中的 concat 方法

let likeArr = {
	0: 'jsx',
	1: 'ljj',
	2: 'ddc',
	3: 'zdj',
	length: 4
}
let arr = Array.prototype.concat.apply([], likeArr)
console.log(arr); // ['jsx', 'ljj', 'ddc', 'zdj']
console.log(arr instanceof Array); // true

4. Array.from

Array.from() 可通过伪数组/类数组、可迭代对象方式创建数组，返回创建的新的数组

let likeArr = {
	0: 'jsx',
	1: 'ljj',
	2: 'ddc',
	3: 'zdj',
	length: 4
}
let arr = Array.from(likeArr)
console.log(arr); // ['jsx', 'ljj', 'ddc', 'zdj']
console.log(arr instanceof Array); // true

console.log(Array.from('jsx')); // ['j', 's', 'x']

5. … 扩展运算符

... 扩展运算符可以将类数组转换为真数组，类数组对象必须是可迭代对象

... 扩展运算符只能作用于 iterable 可迭代对象，即拥有 Symbol(Symbol.iterator) 属性值的对象

function user(...arg) {
	console.log(arg); // ['jsx', 'ljj', 'ddc', 'zdj']
	console.log(arg instanceof Array); // true
	// 通过Symbol.iterator判断是否有迭代属性
	console.log(typeof arg[Symbol.iterator] === 'function') // true
}
user('jsx', 'ljj', 'ddc', 'zdj')

6. 遍历添加

通过循环遍历类数组，依次将元素放入一个空数组，类数组对象必须是可迭代对象

let list = document.querySelectorAll('li');
console.log(list)
console.log(list instanceof Array) // false
console.log(typeof list[Symbol.iterator] === 'function'); // true

let arr = [];
for (let item of list) {
	arr.push(item)
}
console.log(arr)
// 可以使用数组方法
arr.map(item => item.innerHTML = '遍历添加')