五分钟快速了解arrayLike(类数组)

类数组（Array-like）是指具有类似数组结构的对象，但并非真正的数组。

• 类数组定义：类数组对象具有以下特征：

  键名是从零开始且自然递增的整数（如0, 1, 2...）。

  定义了length属性表示元素个数。

  例如：

  var arrayLike = { 0: 'zhangsan', 1: 'lisi', 2: 'zhaoliu', length: 3};

• 类数组与数组的相似性：

  数据读取和设置：类数组和数组都可以通过索引访问和修改元素。

  var array = ['zhangsan', 'lisi', 'zhaoliu'];var arrayLike = {0: 'zhangsan', 1: 'lisi', 2: 'zhaoliu', length: 3};console.log(array[0]); // 'zhangsan'console.log(arrayLike[0]); // 'zhangsan'array[0] = 'new name';arrayLike[0] = 'new name';

  长度获取和遍历：两者都可以通过length属性获取长度，并使用类似的循环结构进行遍历。

  console.log(array.length); // 3console.log(arrayLike.length); // 3for (var i = 0; i < array.length; i++) { // 遍历数组}for (var i = 0; i < arrayLike.length; i++) { // 遍历类数组}

• 类数组与数组的区别：

  方法调用：数组具有丰富的内置方法（如push, pop, map等），而类数组没有这些方法。

  array.push('tianqi'); // 成功arrayLike.push('tianqi'); // 报错：arrayLike.push is not a function

  性能差异：在遍历操作中，数组的效率通常高于类数组。因此，在需要频繁遍历时，建议将类数组转换为数组以提高性能。

• 类数组使用数组方法：

  通过call或apply方法，可以改变this指向，使类数组能够使用数组的方法。

  var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3};// 使用数组的join方法Array.prototype.join.call(arrayLike, ':'); // 'name:age:sex'// 使用数组的map方法Array.prototype.map.call(arrayLike, function(item) { return `${item}-map`;}); // ['name-map', 'age-map', 'sex-map']

• 类数组转换为数组：

  使用slice方法：

  Array.prototype.slice.call(arrayLike); // ['name', 'age', 'sex']

  使用splice方法：

  Array.prototype.splice.call(arrayLike, 0); // ['name', 'age', 'sex']

  使用ES6的Array.from方法：

  Array.from(arrayLike); // ['name', 'age', 'sex']

  使用concat方法：

  Array.prototype.concat.apply([], arrayLike); // ['name', 'age', 'sex']

  使用ES6的扩展运算符：

  function translateArray(...args) { return args;}translateArray(...arrayLike); // ['name', 'age', 'sex']

• 总结：

  类数组在数据读取、长度获取和遍历方面与数组相似。

  类数组缺少数组的内置方法，但可以通过call或apply间接使用这些方法。

  将类数组转换为数组可以提高遍历操作的性能。

  提供了多种将类数组转换为数组的方法，包括slice、splice、Array.from、concat和扩展运算符等。