js 伪数组(类数组对象) javascript

伪数组

【js 伪数组(类数组对象)】一种类似数组的对象，它们不具有数组的标准方法，但是作为可迭代对象可以对它们像数组一样进行迭代，常见的伪数组对象：

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.isConcatSpreadablearrayLike[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]