JavaScript _ JS Array数组 - 肉渣教程

首页 / HTML教程 / CSS教程 / JS教程 / jQuery教程 / Python教程 / Bootstrap教程

学习 JavaScript
点击这里返回首页

JavaScript 教程

JS 数据类型

JS String字符串

JS Number数字

JS Boolean布尔型

JS 类型转换

JS 自定义对象

JS 正则表达式

JS 条件语句

JS Switch语句

JS HTML DOM

JS 浏览器BOM

JS 代码风格

JS Array数组

上一节下一节

概览 - Array数组

先概览一下Array数组类型：

验证变量是否为数组类型（Array）
获取数组的长度
改变数组中的元素
push()方法 - 添加新的元素到数组结尾
pop()方法 - 从数组结尾移除1个元素
shift()方法 - 从数组开头移除1个元素
unshift()方法 - 在数组开头位置添加新的元素
delete运算符 - 将指定索引位置的元素删除成undefined
使用splice()方法 - 移除数组中的元素
使用splice()方法 - 在指定位置添加若干元素
concat()方法 - 连接数组
slice()方法 - 剪切数组
toString()方法 - 转为字符串类型（默认自动调用）
join()方法 - 用指定连接符将数组元素连接起来
for - 通过循环遍历数组
forEach() - 通过迭代器遍历数组
sort()方法 - 数组排序

什么是数组？

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

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

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_ele1、new_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数组

上一节下一节

Copyright © 肉渣教程 rouzha.cn