Tony学前端:数组,东西太多,需要一个集装箱!

本文共有3700字,预计阅读时间:20分钟

本系列累计71500字

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

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

循环结构:

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

计数器:

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

字符掩码实战:

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

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

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

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

这时便意味着即使在满足条件的情况(再来一包)下,我们也要退出循环,这称为提前跳出循环,而要提前跳出循环需要使用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学前端”

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180603G1B51L00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券