Description
关于数组的一些事
目录
- 数组与类数组
- 空位
- Vue 是如何监听数组变化的
- 为什么es5不能完美继承数组
- 数组的方法们
- 进化与性能
数组与类数组
- 数组
数组对象用来在单独的变量名中存储一系列的值。 - 数组的判断
console.log(a instanceof Array); //true （缺陷）
console.log(a.constructor); // function Array() {[native code]}
Object.prototype.toString.call(a); //"[object Array]"
Array.isArray(a); // true - 类数组
典型的类数组例子：
（1）document.getElementByClassName() 返回的结果
（2）特殊变量 arguments - 类数组转化为数组
Array.prototype.slice.call(arrlike)
Array.from(arrlike)
[...arrlike] - 为什么类数组可以使用数组的一些方法（可能是因为数组的某些方法只需要用到length这个属性）
空位
数组的空位指 数组的某一个位置没有任何值，如Array构造函数返回的数组都是空位。
Array(3) // [ , , ]
- 空位不是undefined，undefined依然是有值的。
0 in [undefined, undefined, undefined] //true
0 in [ , ,] // false
更多关于空位，可以看看阮大神的说法
数组方法对空位的处理很不一致，所以要避免产生空位
Vue 是如何监听数组变化的
大家是否注意到，在vue里面直接给 obj.XX = 'test' 这样的写法一般是watch不到的（除非deep: true 直接添加的属性watch不到）, 那vue又是怎么能够检测到arr.push arr.pop 之类操作而产生的变化的？其实是重新写了这些方法
- vue 2.+
- src/core/observer/array
在监听value的时候 如果value是数组，则把数组的能够改变数组的方法全部重新写一遍。这样就可以监听到数组的操作带来的变化了。
大家可以看到这里做了一个判断 如果数组有构造该对象的构造函数的原型，则改造原型，如果没有就直接遍历。 为什么这么操作呢？这又牵扯到下一个问题。
为什么es5不能完美继承数组
这是一个著名的讨论题 为什么 es5 不能完美继承数组
- 因为Array构造函数执行是不会对传进去的this做任何处理。不止Array，String，Number, Regexp, Object 等等 JS的内置类都不行。
数组的方法们
盗图，忘记出处了 不好意思 T T
进化与性能
依然盗图 T T
上图展示了数组在内存中存储方式。这个数组保存了 4 个元素，每个元素 4 字节。加起来总共占用了 16 字节的内存区。
假设我们声明了 tinyInt arr[4];，分配到的内存区的地址从 1201 开始。一旦需要读取 arr[2]，只需要通过数学计算拿到 arr[2] 的地址即可。计算 1201 + (2 X 4)，直接从 1209 开始读取即可
如果是上面这样的不连续存储，读起来就相对耗时。
实际上，现代 JavaScript 引擎是会给数组分配连续内存的
—— 如果数组是同质的（所有元素类型相同）。
读取速度貌似没有很大差别， 可能是做了优化。
现代JavaScript引擎 默认分配的是连续内存的。
大家经常用到数组的各种遍历方法，有没有试过各种方法的性能如何？
JavaScript 数组遍历方法的对比
当我思考到这个问题是，也是一阵严肃思考。然后跟着一些各种写测试例子，然后我就蒙了，在控制台，node环境下，或者不同浏览器之间的结果也不太一样。 然后我看到了底下的评论，终于恍然大悟。
数组的方法比较性其实很低。因为我们可以看到用for 循环是最快的，那既然如此为什么我们要有这些方法呢？ 我们使用这些数组的方法其实 最应该考虑的是使用场景，什么样的场景需要什么样的方法，这个才是高级语法的意义。至于优化这些方法的速度，那就交给浏览器吧。
过早优化是万恶之源
使用高阶函数替代原始的 for 循环，这样会让代码的可维护性更高，逻辑清晰，语义明确，更加优雅