解开那一层面纱，js类数组的小秘密（下篇）

前言：

在 解开那一层面纱，js类数组的小秘密（上篇）里面，已经提到类数组的定义，以及常见的类数组类型，类数组的转化，接下来我们来探讨如何定义一个类数组对象？类数组是否可以借用数组上面的方法？jQuery类数组对象的表现？

1.如何定义一个类数组对象？

根据上面文章的定义：

• 拥有length属性，其它属性（索引）为非负整数
• 不具有数组所具有的方法（非必须）
  如果想自己创一个类数组对象是很容易的：

let arrLike = {
    0: "a",
    1: "b",
    2: "c",
    length: 3
};

然后我们使用鲁大师（lodash.js v4.17.5）来判断下，我们创建的是不是满足条件：

import { isArrayLike, isArrayLikeObject } from "lodash/index";
isArrayLike(arrLike ); // true
isArrayLikeObject(arrLike ); // true

亲测是满足条件的，那接下来我们就去操作类数组。

2.“借用”数组方法来操作类数组对象

之前已经实现类数组转成数组，是借用数组上面的slice和splice方法，那么在不把类数组转成数组的情况下，我们也是可以像操作数组一样操作类数组对象：

let arrLike = {0: "a", 1: "b", 2: "c", length: 3};

Array.prototype.push.call(arrLike, "d"); // 4, arrLike = {0: "a", 1: "b", 2: "c", 3: "d", length: 4}
Array.prototype.pop.call(arrLike); // 3, arrLike = {0: "a", 1: "b", 2: "c", length: 3}
Array.prototype.slice.call(arrLike, 1); // ["b", "c"], arrLike = {0: "a", 1: "b", 2: "c", length: 3}
Array.prototype.splice.call(arrLike, 1, 1); // ["b"], arrLike = {0: "a", 1: "c", length: 2}
....... // other methods eg. map, forEach, filter...

上面测试了“一些方法”(并不是全部)，都是可以实现我们想要的效果。既然并不是全部方法都能借用以后得到期望的效果，那么是谁这么特殊呢？

3. 特殊的Array.prototype.concat

上面演示了类数组对象借用数组的方法，来实现一些操作，但是是不是数组的所有方法，被借用以后都能达到和操作数组一样的效果呢？
我们来看一段代码：

let arrLike = {0: "a", 1: "b", 2: "c", length: 3};
let arr = ["a", "b", "c"];

arr.concat("d", "e", "f"); // ["a", "b", "c", "d", "e", "f"]

我们期待[].concat.call(arrLike, "d", "e", "f");运行的结果是{ 0: "a", 1: "b", 2: "c", 3: "d", 4: "e", 5: "f", length: 6 }然而结果却是：

[].concat.call

image.png

原因是concat内部会新创建一个数组，来接收传入的每一项，如果传入的是数组，会先对数组进行一次展平，然后把所有项都放入这个新数组，结果就是我们看到的结果了，并没根据length进行操作，所以没有看到我们期望的效果。
还好我们可以使用push来实现我们想要的效果

let arrLike = {0: "a", 1: "b", 2: "c", length: 3};
Array.prototype.push.call(arrLike, "d", "e", "f"); // 6, arrLike = {0: "a", 1: "b", 2: "c", 3: "d", 4: "e", 5: "f", length: 6}

4.jQuery类数组对象的表现

既然上面我们已经对类数组对象有了一些认识，那jQuery获取到的结果也是类数组对象，看下图：

jQuery类数组对象

普通的类数组对象

jQuery原型方法部分截图

jQuery.fn.sort === [].sort; // true
jQuery.fn.splice === [].splice; // true
jQuery.fn.slice === [].slice; // false
jQuery.fn.push === [].push; // true

其中有部分方法确实是来自数组，但其实这几个方法里面哪一个才是让jQuery类数组对象和我们自己创建的类数组对象变相不一样的原因呢？
进过测试：

let arrLike = {0: "a", 1: "b", 2: "c", length: 3, splice: [].splice};
arrLike; // Object(3) ["a", "b", "c", splice: ƒ]

let arrLike01 = {0: "a", 1: "b", 2: "c", length: 3, sort: [].sort};
arrLike01; // {0: "a", 1: "b", 2: "c", length: 3, sort: ƒ}

原来是splice方法，那么是不是必须是Array.prototype.splice呢？带着这个疑问再次验证:

let arrLike = {0: "a", 1: "b", 2: "c", length: 3, splice: () => {} };
arrLike; // Object(3) ["a", "b", "c", splice: ƒ]

let arrLike = { 0: "a", 1: "b", 2: "c", length: 3, splice: [].sort };
arrLike; // Object(3) ["a", "b", "c", splice: ƒ]

let arrLike = { length: 0, splice: () => {} };
arrLike; // Object [splice: ƒ]

let arrLike = { length: 0, splice: 1 };
arrLike; // {length: 0, splice: 1}

let arrLike = { splice: () => {} };
arrLike; // {splice: ƒ}

从上面的结果可以明显低看出，要想实现像jQuery一样的类数组对象结构，只需要两个条件：

• 对象有一个length属性，值为正整数
• 含有一个splice方法
  其实jQuery内部也是这样做的，同样含有splice方法，只是jQuery原型上面的splcie方法，是数组上面的同名方法。

jQuery.prototype.splice === Array.prototype.splice; // true

到这里关于“js类数组(对象)”的介绍就结束了，不得不感叹js是一门神奇的语言，各种神秘的东西，继续挖掘...