数组是前端开发者最常用的数据结构了，我们在项目中无时不刻在操作着数组，例如将列表组件的数据储存在数组里、将需要渲染成条形图的数据同样储存在一个数组里，虽然我们经常使用数组，然则许多人并不领会JavaScript数组的本质。

本节我们将从JavaScript数组的使用、内存模子两大部门举行解说，希望通过这个小节，让人人对JavaScript的数组有更深的熟悉。

在正是最先这节之前，请人人思索一个问题，JavaScript的数组有什么特殊之处？

数组的使用

数组是我们最常用的数据结构，许多基于数组的操作人人也足够熟悉了，我们不会在这里枚举数组的API，由于MDN数组这一部门足够权威也足够周全，我们会简朴先容下重点的数组方式，为接下来的内容做铺垫。

数组的建立与初始化

若是你之前学过其它语言类似于c++/java等，你可能会用一下方式建立并初始化一个数组:

const appleMac = new Array('Mac Book Air', 'iMac', 'Mac Book Pro', 'Mac pro')

固然这在JavaScript中是可以的，但并不主流方式，通常人们建立并初始化数组用的是字面量的方式:

const appleMac = ['Mac Book Air', 'iMac', 'Mac Book Pro', 'Mac pro']

在es6中引入了两个新方式，同样可以建立数组：

• Array.of() 返回由所有参数组成的数组，不思量参数的数目或类型，若是没有参数就返回一个空数组

• Array.from()从一个类数组或可迭代工具中建立一个新的数组

这两个方式划分解决了两个问题， Array.of() 解决了组织函数方式建立数组时单个数字引起了怪异行为。

const a = new Array(3);   // (3) [empty × 3] 组织函数方式单个数组会被用于数组长度
const b = Array.of(3);    // [3]

Array.from() 解决了『类数组』的转化问题，之前我们将类数组转化为数组的方式普遍用的是 Array.prototype.slice.call(arguments) 这种偏Hack的方式， Array.from() 的泛起将其规范化，在以后的转化中我们最好根据尺度的 Array.from() 方式举行转化。

数组的操作

数组的操作有数十种之多，我们不可能逐一讲到，详细使用也可以看MDN，我们只讲两个对本节对照主要的api。

向头部插入米素

unshift操作是最常见的向数组头部添加米素的操作

const arr = [1, 2, 3]

arr.unshift(0) // arr = [0, 1, 2, 3,]

向尾部插入米素

push操作是最常见的向数组尾部添加米素的操作

const arr = [1, 2, 3]

arr.push(4) // arr = [1, 2, 3, 4]

内存模子

编程语言的内存通常要履历三个阶段

1. 分配内存

2. 对内存举行读、写

3. 释放内存（垃圾接纳）

数组的建立对应着第一阶段，数组的操作对应着第二阶段。

因此，现在有一个问题，我们划分用push和unshift往数组的尾部和头部添加米素，谁的速率更快？

延续内存

若是你对照领会相关数据结构内存的话应该会知道，数组是会被分配一段延续的内存，如图:

内存漫衍

那么当我们向这个数组最后 push 米素6的时刻，只需要将后面的一块内存分配给6即可。

而unshift则差别，由于是向数组头部添加米素，数组为了保证延续性，头部之后的米素需要依次向后移动。

unshift的本质类似于下面的代码:

for (var i=numbers.length; i>=0; i--){
      numbers[i] = numbers[i-1];
    }
    numbers[0] = -1;

内存漫衍

由于unshift出发了所有米素内存后移，导致性能远比push要差。

我在node10.x版本下作了一个实验:

function unshiftFn() {
    const a = []

    console.time('unshift')
    for (var i=0;i<100000;i++) {
        a.unshift(1);
    }

    console.timeEnd('unshift')
}

function pushFn() {
    const a = []

    console.time('push')
    for (var i=0;i<100000;i++) {
        a.push(1);
    }

    console.timeEnd('push')
}

unshiftFn() // unshift: 2297.383ms
pushFn() // push: 3.760ms

我们瞥见两者的速率差了异常多，而且若是你不停调整for循环的次数，会发现当次数越多的时刻，unshift操作就越慢，由于需要往后移的米素也就越多。

而造成这个差异的正是由于数组是被储存为一块延续内存导致的，这就造成了数组的『插入』『删除』的性能都很差，由于我们一旦删除或者插入米素，其他米素为了保持一块延续的内存都不得不发生大量米素位移，这是性能的杀手。

非延续内存

我们开头就有一个问题：JavaScript的数组有什么特殊之处？

固然我们会说许多JavaScript的特殊之处，什么支持字面量声明建立，支持储存差别类型数据、动态性等等。

而本质上JavaScript数组的特殊之处在于JavaScript的数组纷歧定是延续内存。

而维基百科关于数组的界说：

在盘算机科学中，数组数据结构（英语：array data structure），简称数组（英语：Array），是由相同类型的米素（element）的聚集所组成的数据结构，分配一块延续的内存来存储。

若是是这样的话，JavaScript的数组似乎并不是严酷意义上的数组，那么为什么上一小节说数组是分配了延续内存呢？这不是自相矛盾了吗？

JavaScript的数组是否分配延续内存取决于数组成员的类型，若是统一是单一类型的数组那么会分配延续内存，若是数组内包罗了林林总总的差别类型，那么则是非延续内存。

非延续内存的数组用的是类似哈希映射的方式存在，好比声明晰一个数组，他被分配给了1001、2011、1088、1077四个非延续的内存地址，通过指针连接起来形成一个线性结构，那么当我们查询某米素的时刻其实是需要遍历这个线性链表结构的，这十分消耗性能。

数组地址

而线性储存的数组只需要遵照这个寻址公式,举行数学上的盘算就可以找到对应米素的内存地址。

a[k]_address = base_address + k * type_size

我们做一个简朴的实验,我们不停向数组插入米素，但对比的双方是非线性储存的数组和线性储存的同构数组：

const total = 1000000

function unshiftContinuity() {
    const arr = new Array(total)
    arr.push({name: 'xiaomuzhu'});
    console.time('unshiftContinuity')
    for(let i=0;i<total; i++){
        arr[i]=i
    }
    console.timeEnd('unshiftContinuity')
}

function unshiftUncontinuity() {
    const arr = new Array(total)
    console.time('unshiftUncontinuity')
    for (let i=0;i<total;i++) {
        arr[i]=i
    }

    console.timeEnd('unshiftUncontinuity')
}

unshiftContinuity() // unshiftContinuity: 71.050ms
unshiftUncontinuity() // unshiftUncontinuity: 1.691ms

我们看到，非线性储存的数组其速率比线性储存的数组要慢得多。

由于作者并没有阅读过JavaScript引擎的源码，以是这并不是一手资料，若是有错误异常迎接指出来，我会实时更正。

参考:How are JavaScript arrays represented in physical memory?
转载自民众号 :程序员面试官, 作者 蓝哥 

链接: http://www.fly63.com/article/detial/4155