Tony学前端：数组，东西太多，需要一个集装箱！

本文共有3700字，预计阅读时间：20分钟

本系列累计71500字

在文章末尾可以观看本课的视频

我们先来复习一下上次学习了哪些知识：

循环结构：

while语句、do…while语句、for语句。

计数器：

新的运算符，i++与++i的区别。

字符掩码实战：

如何逻辑思考一个问题、代码优化。

上一节我们学习了循环结构，但是最后还遗漏了一点，如果我们想提前退出循环或者跳过某一次循环那应该怎么办？今天我们先来讲一下break和continue语句。

回想上一节我们买干脆面的示例，每一次抽中“再来一包”的小卡片后，都要拿一包面，但是过了一段时间以后，由于兑换的人实在太多，老板濒临破产了！

此时老板更改规则了，一天最多只能兑换三包面，多下来的“再来一包”得明天再来换，那么吃面的流程就要改变了（左侧为新流程，注意红色部分）：

这时便意味着即使在满足条件的情况（再来一包）下，我们也要退出循环，这称为提前跳出循环，而要提前跳出循环需要使用break语句，我们来改一下之前的代码，注意红色部分：

来到小卖部；

买面；

do{

拿到面；

吃面；

if（已经三包了） {

break；

}

查看小卡片；

是否包含再来一包？

}while（再来一包）

离开小卖部；

要注意的是，如果有多重循环嵌套的话，break只是退出当前循环。

for（；；）{

for（；；）{

break；

}

//break退出到这个地方

}

在循环的处理中，还有另一种我们经常会遇到的情况：在某些特定的条件下不执行循环体内的语句，那么这种情况下就需要continue语句了。

譬如我们上一节的字符掩码实战中，再增加一个奇怪的需求：如果碰到数字8，则不进行处理，也就是说既不保留原字符，也不将其变成星号，实际效果是字符的长度变短了，那么流程就会变成（注意红色部分）：

我们来看一下修改后的代码：

if（str[i]=='8'）{

continue; //直接进入下一次循环

}

else if(i==0 || i==1 || i==str.length-1){

newstr+=str[i];

}

else{

newstr+='*';

}

}

alert（newstr）；

break和continue是循环里的两个配角语句，但是千万别小瞧它们，很多时候我们都需要在关键的地方来使用它们！

接下来我们学习一个重要的数据类型：数组。

我们之前学习了数据类型，当我们要保存一个值时，可以声明一个变量来存储，譬如要保存一个姓名，那么可以这样写，随后就可以使用name这个变量了。

var name=‘小明’；

假设现在有两个姓名要保存的话，那可以声明两个变量：

var name1=‘小明’；

var name2=‘小红’；

那如果要保存班级里40个小朋友的姓名的话，那怎么办？难道声明40个变量？这个想想都要崩溃了！

那么我们应该怎么来处理这个问题呢？我们来回想一下之前学过的字符串结构：

我们发现字符串里的每一个“单元”都保存着一个字符，假设每一个“单元”里能保存一个姓名，那管理起来便省心省力了，也不用再来想那么多的变量名了。

实际上，我们要学习的数组类型正是这种数据存储结构。数组的定义是包含数据的有序列表，这里面有三个主要的概念：

包含数据：数组可以包含一组数据，我们把数组保存的数据称之为元素。像上面的示例中，包含的数据有“小明”、“小红”等，

有序：保存的这一组数据是有顺序的，元素有前后之分。我们看“小明”就在“小红”之前、“马小燕”在“小雅”之后。

列表：数组是一个列表形式，因此可以采用下标的形式来访问所包含的数据，就像字符串那样用中括号包括下标。

数组就像一个集装箱，把各式各样的数据统统打包在一起。

接下来我们学习如何创建数组以及如何操作元素。

数组属于复杂数据类型，因此数组的创建要比基本数据类型（例如字符串）要复杂一些，我们使用new关键字来创建一个保存姓名的数组：

var names=new Array（）；

请注意new Array（）这种创建方式，这种方式我们称之为构造函数，因此严格意义上来说我们是通过数组的构造函数来创建一个数组。目前只要知道这种方式就可以了，具体对于关键字new以及构造函数的概念我们将在后面的函数及对象章节中深入学习。

创建了一个数组后，目前数组的长度还是为零，就像我们有了一个集装箱，但是里面还是空空如也，我们通过下标的方式往数组中添加数据：

var names=new Array（）；

name[0]=‘小明’；

name[1]=‘小红’；

name[2]=‘小雅’；

这时集装箱里就有东西了。

我们也可以在创建数组的时候就指定数组长度：

var names=new Array（40）；

这样就创建了一个长度为40的数组，不过此时这个数组里还未保存元素。就像一个有40个座位的影院，只是现在电影还未开映，位子都是空的。

在创建数组的代码中，我们可以把关键字new省略掉，因此就可以这样来写：

var names=Array（）；

或

var names=Array（40）；

如果在创建数组的时候就知道其包含的元素是哪些的话，便可以在创建的时候直接为其赋值，譬如：

var names=Array（‘小明’，‘小红’，‘小雅’，‘马小燕’）；

我们还有另外一种写法，叫做字面量表示法，也就是用方括号来包裹数组的元素，比如：

var names=[‘小明’，‘小红’，‘小雅’，‘马小燕’]；

var i=[1,2,3,4,5,6]；

由于该方法可以少写几个字母，因此备受懒惰的程序猿们的推崇！

数组除了包含字符串外，也可以包含其他任何的数据类型，比如数字：

var i=[1,2,3,4,5,6]；

学习了如何创建数组，接下来看看如何获取和修改数组内的元素。

在之前字符串的部分我们就已经学习了下标的概念，在数组中也是通过下标来获取和设置指定位置的元素：

var names=[‘小明’，‘小红’，‘小雅’，‘马小燕’]；

var name=names[1]；

获取元素，变量name的值为“小红”。

var names=[‘小明’，‘小红’，‘小雅’，‘马小燕’]；

names[1]=‘小张’；

修改元素，数组names的第二个元素的值变更为“小张”。

数组元素的设置看上去中规中矩，但是由于js是风格比较飘逸的一门语言，因此接下来我们写一下比较调皮的代码，大家可以感受：

var names=['小明'，‘小红’]；

names[4]=‘小雅’；

我们创建了长度为2的数组，接下里要为下标为4的元素赋值，此时数组长度不够，于是会自动增加数组长度到5，以便在该位置容纳“小雅”，而下标为2和3的元素则为空。这就像大家约定好了吃饭，突然又临时来了几个人，只能加座了。

数组也有length属性，就像字符串一样，记录了数组的长度，也就是元素的个数。

var names=[‘小明’，‘小红’]；

var l=names.length； //长度为2

数组的length属性不单是只读，还能通过设置length来改变数组的长度，达到快速删除或添加数组元素的作用（主要还是快速删除）。

var names=[‘小明’，‘小红’，‘小雅’，‘马小燕’]；

names.length=1；

我们创建了一个包含4个元素的数组，随后将其的长度设置为1，那么此时该数组的后3个元素就被删除了，只保留1个元素，用该方式来快速删除数组元素非常方便，这简直比灭霸大人打个响指还要方便！

接下来看看如何增加元素：

var names=['小明']；

names.length=5;

数组创建时只有一个元素，我们将其长度设置为5，那么数组变增加4个空元素，以便其长度为5。

另外我们可以通过以下语句确保在数组的尾部添加一个元素，大家应该能理解其中的原理：

var names=['小明'，‘小红’]；

names[names.length]=‘小雅’；

names[names.length]=‘马小燕’；

接下来我们学习数组的遍历与转换。

既然数据存储在数组里，那我们总要一个一个的取出来，就像集装箱里的物品总要拿出来，结合我们之前学习的循环语句就能实现对数组元素的遍历：

var names=[‘小明’，‘小红’，‘小雅’，‘马小燕’]；

for（var i=0;i

alert（names[i]）； //依次显示数组的元素

}

此处一定要注意循环的条件是i，这个就像翻到墙外面去了。

为了防止数组越界，我们可以用更简洁的for...in语句来实现数组遍历：

var names=[‘小明’，‘小红’，‘小雅’，‘马小燕’]；

for（var iinnames）{

alert（names[i]）;

}

如果我们想一次性的显示数组里的全部元素的话，可以使用toString（）方法：

var names=[‘小明’，‘小红’，‘小雅’]；

alert（names.toString（））；

此时将显示“小明，小红，小雅”，用toString（）方法展现的数据默认是用逗号（,）隔开的，如果想用其他符号来分隔，则需要用到join（）方法，该方法会将分隔符作为参数接收：

var names=[‘小明’，‘小红’，‘小雅’]；

alert（names.join（‘-’））；

我们把中划线（-）作为分隔符，那么此时将显示“小明-小红-小雅”。

我们继续数组的学习：

在字符串的部分，我们学习了用indexOf（）和lastIndexOf（）方法来查找指定字符在字符串中的下标，对于数组，我们一样可以使用这两个方法来查找指定值在数组中的下标。

var names=[‘小明’，‘小红’，‘小雅’]；

var i=names.indexOf（‘小红’）； //返回1

var numbers=[1,2,3,1,2,3,1,2,3]；

var j=numbers.lastIndexOf（2）； //返回7

有时候，我们需要对数组的元素进行排序，譬如将班级全体学生姓名排序，或者按照考试分数来排序，那么便要使用数组的sort（）方法：

var letters=['b'，'a'，'c']；

letters.sort（）；

此时数组letters内的元素顺序就变为'a'，'b'，'c'了。

其实，sort（）方法并不像你想象的这么简单，假设我们要对一个数值型数组进行排序的话：

var numbers=[3,6,10,5,7]；

numbers.sort（）；

排序完毕后其顺序并不是我们预期的3,5,6,7,10，而是10,3,5,6,7。为什么10会排到最前面？因为sort（）方法会默认先将数组里的所有元素转换成字符串后再进行排序，而字符串“10”是排在“3“之前的，所以便出现了这种情况。

如何解决这个问题呢？目前我们学到的知识还无能为力，等到后面学习了函数以后，我们再来解决这个问题！

今天最后我们来学习一下数组反转，数组反转比较简单，就是讲数组里的元素的排列顺序颠倒，最后的排在最前面，这个是通过reverse（）方法来实现：

var names=[‘小明’，‘小红’，‘小雅’]；

names.reverse（）；

此时names里的元素排列就是：‘小雅’，‘小红’，‘小明’。

后面暂时没有了，我们来总结一下，今天主要学习了：

循环结构的补充：

break语句、continue语句。

数组：

什么是数组、数组的创建。

数组的操作：

获取、修改、遍历、转换、查找、排序、反转。

我们今天主要学习了数组，数组是非常重要且应用相当广泛的数据类型，其涉及到的操作很多，我们今天实际上只学习了一部分对数组的操作，下一节将接着学习数组的操作。娃娃们加油，我们的目标是星辰大海！

点击观看本课视频，也可以在腾讯视频上搜索“Tony学前端”：