- 伪数组
一种类似数组的对象,它们不具有数组的标准方法,但是作为可迭代对象可以对它们像数组一样进行迭代,常见的伪数组对象:
- NodeList(dom.querySelectorAll等获取)
- Arguments对象
- FileList对象
- String对象
const foo = (a,b,c) => arguments;
const args = foo(1,2,3,4);
for(let item of args) {
console.log(item);
}
// 1
// 2
// 3
// 4
// 检验arguemnts对象类型
args instanceof Object; // true
Object.prototype.toString.call(args); // "[object Arguments]"
- 手动创建伪数组对象
const arrayLike = {
1: "AAA",
3: "CCC",
5: "BBB",
length: 6
};
// 复用数组方法
[].forEach.call(arrayLike, (item, i) => console.log(item, i));
// AAA 1
// CCC 3
// BBB 5
对于数组和伪数组,在数组的标准方法中,只有concat方法是不通用的
console.log([].concat.call(arrayLike, [7, 8])); // [ { '1': 'AAA', '3': 'CCC', 5: "BBB", length: 6 }, 7, 8 ]
console.log([1, 2].concat([7, 8])); // [ 1, 2, 7, 8 ]
// 解决方案
1. slice
[].concat.call([].slice.call(arrayLike), [7, 8]);
2. Symbol.isConcatSpreadable
arrayLike[Symbol.isConcatSpreadable] = true;
[].concat.call(arrayLike, [7, 8]);
// [empty, "AAA", empty, "CCC", empty, "BBB", 7, 8]
- 伪数组对象和数组的转换
- Array.from
- 扩展运算符
- Object.entries
console.log(Array.from(args)); // [1,2,3,4]
console.log([...args]); // [1,2,3,4]
console.log(Object.entries(args).map(([,val]) => val)); // [1,2,3,4]