类数组对象

一、有哪些特征？

类数组对象有两个特征：

1. 存在数值键名；
2. 具有length属性；

二、js中内置的类数组对象

js中内置的类数组对象都是可迭代对象，可以使用for-of语句进行迭代操作。

1. 字符串

const str = 'world'

for (let item in str) {
  console.log(item) // '0', '1', '2', '3', '4'
}

for (let item of str) {
  console.log(item) // 'w', 'o', 'r', 'l', 'd'
}

console.log(str.length) // 5

2. DOM NodeList对象

<p>张三</p>
<p>李四</p>
<p>王五</p>

<script>
  const nodes = document.querySelectorAll('p')
  
  console.log(nodes)

  for (let p of nodes) {
    p.classList.add('red')
  }
</script>

<style>
  .red {
    color: red;
  }
</style>

3. 函数的arguments对象

function printArgs() {
  console.log(arguments)

  for (let x of arguments) {
    console.log(x)
  }
}

printArgs('a', 'b') // 'a', 'b'

三、创建自定义的类数组对象

let arrayLike = {
  0: 'a',
  1: 'b',
  length: 2,
}

1. 不是真正的数组

类数组对象并不是数组，因此不能使用数组的push()、pop()等方法。

let arrayLike = {
  0: 'a',
  1: 'b',
  length: 2,
}

// 错误
arrayLike.push('c')

2. 默认不是可迭代对象

let arrayLike = {
  0: 'a',
  1: 'b',
  length: 2,
}

// 错误
for (let item of arrayLike) {
  console.log(item)
}

3. 转换为可迭代对象

a. 添加[Symbol.iterator]计算属性

let arrayLike = {
  0: 'a',
  1: 'b',
  length: 2,
  [Symbol.iterator]: Array.prototype[Symbol.iterator],
}

// 正确
for (let item of arrayLike) {
  console.log(item) // 'a', 'b'
}

b. 使用Array.from()方法转换

推荐使用这种方式，因为简便。

let arrayLike = {
  0: 'a',
  1: 'b',
  length: 2,
}

// 正确
for (let item of Array.from(arrayLike)) {
  console.log(item) // 'a', 'b'
}

--完--