什么是类数组

对象是类数组常见情况

• 对象是类数组的情况

  • 函数参数对象 arguments
  • 用 getElementsByTagName/Classname/Name 获得的 HTMLCollection
  • 用 querySelector 获得的 NodeList

• 函数参数对象 arguments 特点

  • Object.prototype.toString.call 返回 [object arguments]，代表不是数组
  • 具有 length 属性
  • callee 属性：获取当前的函数

• 用 getElementsByTagName/Classname/Name 获得的 HTMLCollection

  • Object.prototype.toString.call 返回 [object HTMLFormElement]，代表不是数组
  • HTML DOM 对象的一个接口，包含获取到的 DOM 元素集合类
  • DOM 更新时会实时更新

• 用 querySelector 获得的 NodeList

  • Object.prototype.toString.call 返回 [object NodeList]，代表不是数组
  • 实时更新

类数组应用场景

• 遍历函数参数
• 定义链接字符串函数

function myConcat(separa) {
  let args = Array.prototype.slice.call(arguments, 1)
  return args.join(separa)
}
console.log(myConcat(', ', 'red', 'orange', 'blue'))

• 函数间传递参数

function foo(a, b, c) {
  console.log(a, b, c)
}
// 通过 apply 方法传递函数参数
function bar() {
  foo.apply(this, arguments)
}
bar(1, 2, 3) // 1 2 3

类数组转化为数组的方式

• 借用数组方法转化为数组

let arrayLike = {
  0: 'java',
  1: 'script',
  length: 2,
}

// 借用 push 方法
Array.prototype.push.call(arrayLike, 'wujie')
console.log(arrayLike) // { '0': 'java', '1': 'script', '2': 'wujie', length: 3 }

• 借用 ES6 展开运算符或 Array.from 转化为数组

function sum(a, b) {
  // 通过展开运算符将类数组转化为数组，从而可以使用数组方法，Array.from 有类似效果
  const args = [...arguments]
  return args.reduce((sum, cur) => sum + cur)
}

console.log(sum(1, 2)) // 3