【JavaScript数据结构系列】01-数组Array
码路工人 CoderMonkey
转载请注明作者与出处
# 【JavaScript数据结构系列】 # 01-数组Array
数组：
是有序的元素序列
元素通常是同一数据类型
下标索引通常从 0 开始
数组是JavaScript中最常用的数据结构，
在ES6之前也JS中也只有数组这一种数据结构，
ES6之后加入了Set和Map。
（包括WeakSet和WeakMap）
JS中的数组Array，
基于数组数据结构做的封装，
JS封装的数组使用起来更方便。
其它的数据结构也会基于数组进行封装实现。
我们分以下及部分来讲：
- 原本的数组
- JS中的数组
- ES5之前的数组
- ES6之后的数组
Original Array
原始数组具有以下特点：
- 属于线性结构
- 固定的长度/容量
- 具有下标/索引
因此，数组具有以下优点：
- 通过下标索引访问查找元素非常方便高效
- 通过下标索引方便遍历元素
- 可以在任意位置插入删除元素
同样，数组也有相应的劣势：
- 固定长度，不便于处理非定长数据
而数据一般都是动态的，需要手动扩容/缩容 - 需要进行遍历才能通过元素进行查找
时间复杂度高 - 插入删除元素时需要移动其它元素位置
增加删除元素效率低 - 通常只能存储一种数据类型
另外，数组可以是一维数组，也可以有二维数组，
也就是说，数组嵌套，元素也是数组。
JS中的数组
JavaScript中提供了数组这种数据类型，
不再需要我们自己封装。
JS中的Array不同于原始数组，
不再是固定长度，你可以几乎无限的push进元素，
因为它在底层实现上自动扩容的，让你感觉不到固定长度的限制。
另外，也可以存放不同类型的数据。
数组有length属性，提供了一系列操作数组数据的方法。
还有它的近亲，类数组（就是类似于数组的意思），
同样具有length属性，但不具有Array.prototype上的方法，
我们通常是通过改变this指向来借用数组的方法。
例如：
function test() {
var args = [].slice.call(arguments,0, arguments.length)
console.log(args)
}
test(1,2,3,4)
// (4) [1, 2, 3, 4]
// 0: 1
// 1: 2
// 2: 3
// 3: 4
// length: 4
// __proto__: Array(0)
※新语法里可以将可迭代对象转为数组，获取数组更简便
你能不眨眼一口气说出 JavaScript 中数组的所有方法吗？
因ES6版本发生重大变化，所以分ES5之前跟ES6之后来说。
ES5之前常用的数组方法有：
静态方法
| 方法 | 描述 |
|---|---|
| Array.isArray() | 判断对象是否为数组。 |
实例方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 |
| every() | 检测数值元素的每个元素是否都符合条件。 |
| filter() | 检测数值元素，并返回符合条件所有元素的数组。 |
| forEach() | 数组每个元素都执行一次回调函数。 |
| indexOf() | 搜索数组中的元素，并返回它所在的位置。 |
| join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
| lastIndexOf() | 搜索数组中的元素，并返回它最后出现的位置。 |
| map() | 通过指定函数处理数组的每个元素，并返回处理后的数组。 |
| pop() | 删除并返回数组的最后一个元素 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reduce() | 将数组元素计算为一个值（从左到右）。 |
| reduceRight() | 将数组元素计算为一个值（从右到左）。 |
| reverse() | 颠倒数组中元素的顺序。 |
| shift() | 删除并返回数组的第一个元素 |
| slice() | 从某个已有的数组返回选定的元素 |
| some() | 检测数组元素中是否有元素符合指定条件。 |
| sort() | 对数组的元素进行排序 |
| splice() | 删除元素，并向数组添加新元素。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| toLocaleString() | 把数组转换为本地数组，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| valueOf() | 返回数组对象的原始值 |
*以上参考自：
[W3School](https://www.w3school.com.cn/jsref/jsref_obj_array.asp)
[菜鸟教程]https://www.runoob.com/jsref/jsref-obj-array.html)
ES6之后新增的数组方法有：
静态方法
| 方法 | 描述 |
|---|---|
| Array.from | 可以将类数组对象(array-like object)或可迭代对象(iterable object)转为数组。 |
| Array.of | 将一组值转换为数组 |
实例方法
| 方法 | 描述 |
|---|---|
| copyWithin() | 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。 |
| find() | 找出第一个符合条件的数组成员。 |
| findIndex() | 返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。 |
| fill() | 初始化一个用指定元素填充的新数组。 |
| entries() | 用于数组遍历，返回键值对的遍历器对象。 |
| keys() | 用于数组遍历，返回键的遍历器对象。 |
| values() | 用于数组遍历，返回值的遍历器对象。 |
| includes() | 判断数组是否包含指定的值，返回布尔值结果。 |
| flat() | 将二维数组变为一维数组（即嵌套多层时只能减少一层）。 |
| flatMap() | 相当于flat方法加map方法。 |
*ES6内容建议参考阮老师的电子书（直接点上面的方法也可跳转）
http://es6.ruanyifeng.com/
以上方法的使用具体参照链接就可以了，不再赘述。
我们的主要精力将放在数据结构本身上。
- 数组作为JavaScript中的重要类型，数组操作是需要掌握好的必备技能
- 单就数组就可以开一个专题，内容庞杂。
- 有时候一个关于高阶函数方法就可以单独开篇长文（码路工人这里有很多优秀的文章---想给推荐给大家---，那些作者才是真大佬、前端大侠，还有全栈牛人，读大佬们的文章也是码路工人自我提升中不断汲取营养的来源之一）
做了一份 npm 工具包 data-struct-js ，
基于 ES6 实现的 JavaScript 数据结构，
也许这个小轮子很少会被使用，
也许对于初学者学习 JavaScript 会有点帮助。
只要简单 install 一下即可，感兴趣的话还可以去
GitHub / Gitee 看源码。（Star 表支持～）
npm install data-struct-js --save-dev
最后，感谢您的阅读和支持~