怒肝 JavaScript 数据结构 — 数组篇 (一)

大家好，我是杨成功。

今天是我参与 4 月份日更的第二天。既然是日更，那么就不能写长文，因为一些经验总结和梳理类的长文非常耗时间，日更不现实。

那写什么呢？我想来想去，日更还是适合记录一些学习笔记。每天学一部分记一部分，笔记跟着学习进度走，也不用写很长，将自己学习的关键部分整理罗列出来即可。

对我来说，数据结构和算法是比较薄弱的一块，一直没有系统的学习一下。那就借着掘金 4 月份日更的活动，坚持每日打卡，一个月摸清数据结构与算法。

废话不多说，直接开始。

数据结构中的数组

几乎所有编程语言都支持数组，数组也是 JavaScript 中最常用的数据类型之一。但也许你不知道，数组也是一种数据结构，而且是最简单的 内存数据结构。

在 JavaScript 中，数组可以包含不同类型的数据。但是从数据结构的角度看，数组中只能包含一组相同类型的数据。

比如在 JavaScript 中数组可以是这样：

// 数组项可以是任意类型var arr = [12, 'hello', true, null];

但是数据结构中的数组，几乎都是这样：

// 数组项是数值var arr = [12, 15, 18, 20];// 数组项是字符串var arr = ['北京', '上海', '杭州', '深圳'];

初始化数组

“初始化”就是创建嘛，JavaScript 中创建数组有两种方式。

// 方式一var arr = new Array()// 方式二var arr = []

第一种方式叫构造函数创建，第二种方式叫字面量创建。我们开发中最常用的还是第二种方式，因为简洁高效。当然了第一种方式也有用武之地。

比如我要创建一个 1～100 的数组，用字面量很难办，构造函数则可以轻松实现：

var arr = new Array(100).fill(0).map((r,i)=> i+1)// arr 的值 = [1,2,3,...,99,100]

上面代码是因为 new Array() 接受一个参数，表示数组的长度，然后用 fill 方法填充每个数组项，最后再 map 方法将每项加一，得出最终值。

当然了，数组也可以初始化默认值，比如：

// 方式一var arr = new Array('北京', '上海', '杭州')// 方式二var arr = ['北京', '上海', '杭州']

获取数组长度统一使用 arr.length 这个属性。

数组操作

数组操作就指数组的创建，修改，查找，移除等，借用服务端的概念总结，那就是“增删改查”。这一块是 Js 的基础知识，下面我们总结梳理一下。

增字诀

增加是指在一个已有的数组中插入一个新值，我们可以控制插入的位置，比如开头，末尾，中间。

假设现有一个数组 nums 如下：

var arr = [5, 6, 7, 8]

如果我要在末尾添加一个 9，用 push 方法即可：

arr.push(9)// arr 的值 = [5, 6, 7, 8, 9]

如果在开头添加一个 4，用 unshift 方法：

arr.unshift(4)// arr 的值 = [4, 5, 6, 7, 8, 9]

如果要在 6 和 7 之间插一个 6.5，这就可以用强大的 splice 方法了。

// 1. 找到 7 在数组中的索引var index = arr.indexOf(7)// 2. 在 7 的位置添加 6.5arr.splice(index, 0, 6.5)// arr 的值 = [4, 5, 6, 6.5, 7, 8, 9]

这里介绍一下 splice 方法：

Array.splice(start, deleteCount, ...item) 方法的作用是操作数组，包括添加和删除。参数 start 表示开始操作的位置，deleteCount 表示要删除的数量，这两个参数必填。后面的参数都表示要添加的数组项，选填。

删字诀

删除是指在一个数组中删除已有的数组项，我们可以决定删除的位置，比如第一个，最后一个，或者指定下标的某几个。

假设现有一个数组 nums 如下：

var arr = [4, 5, 6, 7, 8, 9]

如果我要删除最后一个，用 pop 方法：

arr.pop()// arr 的值 = [4, 5, 6, 7, 8]

如果我要删除第一个，用 shift 方法：

arr.shift()// arr 的值 = [5, 6, 7, 8]

如果我要从第二个元素开始，连续删除两个，又会用到 splice 方法：

arr.splice(1, 2)// arr 的值 = [5, 8]

改字诀

修改就是指修改某个数组项的值，直接用索引修改即可。

假设现有一个数组 cities 如下：

var cities = ['北京', '上海', '杭州', '深圳']

现在我要把杭州改成广州，分两步走：

// 1. 获取杭州的索引var index = cities.indexOf('杭州')// 2. 通过索引直接修改数据cities[index] = '广州'

splice 方法本质上也有修改的功能，我们前面单独介绍了添加和删除，如果同时使用添加和删除的参数，就可以实现修改。

比如我要把上海和杭州替换为南京和武汉：

cities.splice(1, 2, '南京', '武汉')// arr 的值 = ['北京', '南京', '武汉', '深圳']

这就好了，splice 方法堪称数组操作最强大的方法。

注意：上面讲的增，改，删三种方式，都会直接改变原数组

查字诀

查询是数组的高级操作，JavaScript 提供了非常强大的查询函数。我将数据的查询方法进行了分类，整理如下：

1. 查索引

• indexOf()：查询基本类型

• findIndex()：查询引用类型

2. 查某个数组项

• [index]：索引直接查找

• find()：根据条件查找

3.过滤数组

• filter()：筛选出符合条件的子数组

• concat()：将多个数组合并为一个数组

4.遍历数组

• forEach()：纯粹的遍历数组

• map()：有返回值，可返回一个新数组

5.检测数组

• some()：检测数组中是否有一项满足条件

• every()：检测数组的每一项是否都满足条件

这些数组绝大部分都属于迭代器函数，下一篇我会详细介绍这些函数的用法。

今天学习就到这里，我们明天见。

加入学习群

本文来源公众号：程序员成功。这是学习 JavaScript 数据结构与算法的第 1 篇，本系列会连续更新一个月，欢迎关注公众号，点击“加群”一起加入我们的学习队伍吧～