肉渣教程

JS Array数组

上一节 下一节

概览 - Array数组

先概览一下Array数组类型:

什么是数组?

什么是数组?对于老手来说,不用解释自然明白。对于完全不懂编程的初学者怎么解释呢?举一个例子吧!

比如朕有很多爱妃,朕要用变量来依次存储这些爱妃的名字,则如下:

var wife1 = "西施";
var wife2 = "貂蝉";
var wife3 = "昭君";
var wife4 = "玉环";
...
var wife3000 = "小乔";


可是朕的爱妃太多了啊,朕不是花心,而是每个都爱。朕要想循环遍历所有的爱妃,若按上述那种变量存储的方式,那太不方便了。于是这时最好的解决办法就是创建一个数组(Array)类型的变量来存储朕的三千后宫。

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", ..., "小乔" ];

三千爱妃演示起来太多了,朕就免为其难,之后的案例就只请出七位爱妃以作演示。


创建一个数组

如下所示,创建一个数组,存储七位爱妃的名字:

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];

运行一下


数组对空格和断行并不敏感,如下所示,效果相同:

var array_wife = [ 
    "西施", 
    "貂蝉", 
    "昭君", 
    "玉环", 
    "虞姬", 
    "大乔", 
    "小乔" 
];

运行一下


通过new Array()的方法也能创建数组:

var array_wife = new Array("西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔");

运行一下


new Array()的方法虽然同等效果,但是极其不建议使用这种方法,没必要去用这种方法。没有直接用中括号来创建来得快捷方便且占用更少的系统资源。总之,别去使用new Array()的方式创建数组,没必要!


数组类型(Array)广义上属于Object类型

在数据类型那一节说过,数组类型(Array)的本质是属于Object对象类型,因此使用typeof运算符时,返回的结果肯定是object,而不是array。

Object类型对象是根据把属性名字符串作为索引,而数组类型对象则是用数字作为索引。因为数组类型也属于Object类型,因此也可以对数组类型对象进行自定义属性设置。


数组内的元素可以是任何类型的JS对象,字符串、数字、数组、时间对象等,都可以的。比如[ "123", 123, [12, 23], new Date(), { "foo": "bar", "key": "value" }, 99.33 ]


验证变量是否为数组类型(Array)

因为typeof数组变量时返回的是object,所以通过typeof运算符则无法判断变量是否属于数组类型(Array)。不用着急?解决的方法很多,请阅读《验证JavaScript变量是否为Array数组类型》。


获取数组的长度

通过数组对象的length属性即可获得数组的长度。

array_wife.length;  // 获取数组长度

运行一下

获取数组中指定位置的元素

通过索引数字可获得指定索引位置的元素。要注意!数组的索引数字是从0开始的,数组的第1个元素的索引数字就是0,而不是1;比如朕要从数组中获取西施,则如下:

var wife = array_wife[0];

运行一下

改变数组中的元素

踢球都可以换替补队员,最近甄宓总是与朕闹腾,想要朕把她换到西施的位置上去;西施正好也愿意,于是,朕就把索引数字0位置的西施,换成了甄宓。具体操作如下所示:

array_wife[0] = "甄宓";

运行一下

push()方法 - 添加新的元素到数组结尾

西施去东施家玩了一圈又要回来,可是甄宓又不愿意让位,此时只好使用push方法来把新来的西施添加到数组结尾。

var array_wife = [ "甄宓", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
array_wife.push( "西施" );

运行一下

pop()方法 - 从数组结尾移除1个元素

甄宓见朕宠爱数组结尾的西施,于是开启了宫斗模式,趁朕宠幸虞姬时,调用了一下pop()方法,于是西施就被移出数组了。

var array_wife = [ "甄宓", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔", "西施" ];
array_wife.pop();  // 西施就被移出去了 


创建x变量,存储一下被移出去的西施,顺带禀报一下陛下。

var array_wife = [ "甄宓", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔", "西施" ];
var x = array_wife.pop();  // 西施就被移出去了 

运行一下

shift()方法 - 从数组开头移除1个元素

大胆甄宓,竟敢私自用pop方法把西施从数组中移除,她以为她排在数组第1位朕就治不了她嘛!也就是把她移出去后,让剩下的爱妃的索引数字都变一下呗,容易,shift()方法就是干这事的!如下所示:

var array_wife = [ "甄宓", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
array_wife.shift();  // 把大胆甄宓拖出去,打入冷宫 


创建y变量,存储一下被拖出去的甄宓,让大家都看看,以正后宫纲纪!

var array_wife = [ "甄宓", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var y = array_wife.shift();  // 把大胆甄宓拖出去,打入冷宫 

运行一下

unshift()方法 - 在数组开头位置添加新的元素

甄宓已被正法,是时候迎西施回宫了,这次我得直接将西施迎回数组的首位,那么其他的元素的索引又得都动迁了,还好有unshift()方法来一次性完成这些事情。

var array_wife = [ "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
array_wife.unshift( "西施" );  // 迎西施回数组首位(该方法会返回unshift后新数组的长度,即7)

运行一下

在超出数组长度的索引位置赋值 - 此乃邪道也

被打入冷宫的甄宓,并不甘心,受邪道祖师指点,于是在array_wife数组的索引数字7的位置上赋值自己的名字。正常来说,当前array_wife就7个元素,最后1个元素的索引数字是6;而索引数字7已经超出了范围。而这种方式却是完全可行的。

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
array_wife[7] = "甄宓";

运行一下


可是甄宓是一个粗心的女人,把自己赋值到了索引数字为8的位置上去了,此时索引数字7的位置是空的啊,没事,依然可行,就是索引数字7的位置上了多了一个undefined

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
array_wife[8] = "甄宓";
alert( array_wife[7] );

运行一下

delete运算符 - 将指定索引位置的元素删除成undefined

大胆甄宓,竟敢以此邪道强行进入数组,那朕就用delete运算符,直接将索引位置8位置上的甄宓删除,删除后索引数字8对应的数组元素则为undefined了。

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔", undefined, "甄宓" ];
delete array_wife[8];  // 将索引数字为8的甄宓删除,此位置就变成undefined

运行一下

使用splice()方法 - 移除数组中的元素

甄宓这么一闹,就算把她删了,后面还是多了两个undefined的元素,看上去别扭。于是朕决定用splice()方法把最后两个undefined元素移除掉。

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔", undefined, undefined ];
array_wife.splice(7, 2);  // 从索引位置7开始,向后依次删除2个元素(包括索引位置7)  

运行一下

使用splice()方法 - 在指定位置添加若干元素

最近妲己和褒姒两位爱妃也跟朕闹腾,要入数组,且非得紧邻着排在西施后面。没事slice方法也可以解决这个问题。

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ]
array_wife.splice(1, 0, "妲己", "褒姒");

// 1 代表 拟进行删除或添加动作的索引位置
// 0 代表 代表从该索引位置开始要连续删除元素的个数(为0,即不进行删除操作)
// 接下来的若干参数,都是你添加的元素
// splice方法结束后,数组为[ "西施", "妲己", "褒姒", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ]

运行一下


总结splice()方法的语法

从上述两个例子可以看出,splice()方法可在指定索引位置连续删除或连续添加若干元素。

array_object.splice( start_index, count_for_delete, new_ele1, new_ele2, ... );


语法解析:

  • array_object为目标数组对象;
  • start_index为必选参数,整数,指代拟进行删除或添加动作的索引位置;
  • count_for_delete为非必选参数,整数,指代从指定所以位置开始(包括索引位置元素),连续移除多少个数组元素;(若此参数缺省,则从指定索引位置,持续移除数组元素,直到指定索引位置后不存在任何数组元素;若不想删除任何元素,只想添加若干元素,将此参数设置为0即可)
  • new_ele1new_ele2……等参数指代拟在指定索引位置添加的若干元素。

concat()方法 - 连接数组

朕经常和朕的爱妃们玩游戏,比如把爱妃们放在不同的数组中,再把不同的数组连接起来。深宫之中,就是如此无聊啊。


将两个数组连接起来:

var array1_wife = [ "西施", "貂蝉", "昭君", "玉环" ];
var array2_wife = [ "虞姬", "大乔", "小乔" ];
// 将数组array1_wife和array2_wife连接
var all_wife = array1_wife.concat( array2_wife );

运行一下


将三个数组连接起来:

var array1_wife = [ "西施", "貂蝉", "昭君", "玉环" ];
var array2_wife = [ "虞姬" ];
var array3_wife = [ "大乔", "小乔" ];
// 将数组array1_wife、array2_wife、array3_wife连接
var all_wife = array1_wife.concat( array2_wife, array3_wife );

运行一下


依次类推就好啦,想连接多少个数组就连接多少个,为所欲为!不过要记住,上述被连接的各数组自身都不会因为被连接而发生改变的。

slice()方法 - 剪切数组

slice()可根据索引的起始位置和结束位置来剪切数组。(备注:只是剪切获得新的数组,原数组不会发生改变。)

slice()语法

new_array_object = array_object.slice( start_index, end_index );


语法解析:

  • array_object是原数组,即待剪切的数组(备注:该数组并不会因为应用slice方法而发生改变)
  • new_array_object是用来存储slice()方法的结果
  • start_index参数是必选参数,指代剪切的起始索引位置(该索引位置的数组元素包含在剪切范围内)
  • end_index参数是非必须参数,指代剪切的结束位置(该索引位置的数组元素不包括在剪切范围内)若本参数缺省,则一剪到底,剪切从起始索引位置开始,数组的剩余部分。


案例1

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var new_array_wife = array_wife.slice(1, 3);

运行一下


案例2

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
var new_array_wife = array_wife.slice(1);

运行一下

toString()方法 - 转为字符串类型(默认自动调用)

toString()方法是各数据类型都比较常用的方法,即将对象转换成字符串类型;数组类型对象转换成字符串是将数组内各元素转换成字符串类型后,以英文输入法下的逗号作为连接符,把数组各元素连接起来。

其实即使不用toString()方法,有时也会自动调用此方法返回结果;如下两示例,效果都是一样的。


案例1:手动调用toString()方法

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
document.getElementById("demo").innerHTML = array_wife.toString();

运行一下


案例2:自动调用toString()方法

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
document.getElementById("demo").innerHTML = array_wife;

运行一下

join()方法 - 用指定连接符将数组元素连接起来

上面toString()方法的连接符是英文中的逗号,假如想用自定义的连接符呢?那就要说到传说中的join()方法。如下:

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];
document.getElementById("demo").innerHTML = array_wife.join("*反清复明*");

运行一下

for - 通过循环遍历数组

想要遍历数组,最常用的方式就是用for循环

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];

var txt = "<ul>";

for (var i = 0; i < array_wife.length; i++) {
  txt += "<li>" + array_wife[i] + "</li>";
}

txt += "</ul>";

运行一下

forEach() - 通过迭代器遍历数组

forEach()方法进行遍历数组,就是通过迭代器(Iteration)进行遍历数组。

function generate_li( value ) {
    txt += "<li>" + value + "</li>";
}

var array_wife = [ "西施", "貂蝉", "昭君", "玉环", "虞姬", "大乔", "小乔" ];

var txt = "<ul>";
array_wife.forEach( generate_li );
txt += "</ul>";

运行一下

更多关于数组(Array)迭代器(Iteration)请查看专题:

  • Array.forEach()方法
  • Array.map()方法
  • Array.filter()方法
  • Array.reduce() 和 Array.reduceRight() 方法
  • Array.every()方法
  • Array.some()方法
  • Array.indexOf()方法
  • Array.lastIndexOf()方法
  • Array.find()方法
  • Array.findIndex()方法


请查看JavaScript数组迭代器专题


sort()方法 - 数组排序

如下所示,利用sort()方法可将数组元素以首字母升序的方式进行排序。

var array_wife = [ "xishi 西施", "diaochan 貂蝉", "zhaojun 昭君", "yuhuan 玉环", "yuji 虞姬", "daqiao 大乔", "xiaoqiao 小乔" ];

// 使用sort方法后,array_wife变量的值则变为排列后的新数组
array_wife.sort();

运行一下


上述只介绍了最基础的数组排序,更多如下:

  • sort() 方法 - 根据字母顺序来排列
  • sort()方法 + reverse()方法 - 根据字母反序排列
  • 自定义sort()方法的比较函数 - 根据数字大小进行排序
  • 活学活用比较函数
  • 利用Math.random()进行随机排序
  • 利用Math.max()方法获取数组中最大值
  • 利用Math.min()方法获取数组中最小值
  • JS数组排序 - 按汉语拼音顺序进行排序


请查看JavaScript数组排序专题


JS Array数组

上一节 下一节