js 伪数组(类数组对象)

  1. 伪数组

一种类似数组的对象,它们不具有数组的标准方法,但是作为可迭代对象可以对它们像数组一样进行迭代,常见的伪数组对象:

  • 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]"
  1. 手动创建伪数组对象
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]
  1. 伪数组对象和数组的转换
  • 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]

你可能感兴趣的:(javascript)