网页前端开发之Javascript入门篇(8/9)：数组

Javascript数组

什么是数组?
答：其概念跟 Python教程的列表一样，只是叫法不同和语法上有所变化而已。

下面是数组的语法：

var aaa = "张三";
var bbb = [aaa, "李四", "王五"]; // 成员值可以是来自变量，也可以是直接的值
console.log(bbb);

其中
一对中括号 是创建数组的特定语法，在里面填入成员值，多个成员值之间用逗号隔开，最后赋值给一个变量保存即可。

在Javascript中，一个数组变量其实是其内置类Array的一个实例（Javascript会自动转换）。
因此它拥有一些类属性和类方法，你可以按照实例的语法去读取或调用它们。

下面是常见的数组用法：

读取

使用索引值来访问数组中指定位置的成员（术语称为：索引）。
其语法是：数组名带上一对中括号，里面填入索引值即可。

📘 示例

var aaa = ["张三","李四","王五"];
var xxx = aaa[0];
console.log(xxx);  // 输出：张三

长度

使用数组的类属性length来获取数组的长度（成员数量）。

📘 示例

var aaa = ["张三","李四","王五"];
var n = aaa.length;
console.log(n)  // 输出：3

在头或尾部添加成员

使用数组的类方法push或unshift来添加成员。

📘 示例

var aaa = ["张三","李四","王五"];
console.log(aaa);
aaa.push("赵六");     // 追加一个成员到尾部
console.log(aaa);
// 输出：['张三', '李四', '孙七', '王五', '赵六']
aaa.unshift("孙七");  // 追加一个成员到头部 
console.log(aaa);
// 输出：['孙七', '张三', '李四', '孙七', '王五', '赵六']

从头或尾部删除成员

使用数组的类方法pop或shift来删除成员。

📘 示例

var aaa = ["张三","李四","王五"];
console.log(aaa);
var xxx = aaa.pop();    // 删除尾部的成员
console.log(aaa, xxx);
// 输出：['张三', '李四'] 王五
var yyy = aaa.shift();  // 删除头部的成员
console.log(aaa, yyy)
// 输出：['李四'] 张三

在指定位置同时添加或删除成员

使用数组的类方法splice来同时添加或删除成员。

📘 示例

var aaa = ["张三","李四","王五",'赵六'];
console.log(aaa);
//
// splice 函数的参数说明
// 
// 参数1：指定位置的索引，表示从数组的哪个位置开始操作。
// 参数2：从指定索引起要删除的成员数量，若不需要删除任何成员，请填0。
// 参数3：从指定索引起要添加的成员值，若不需要添加任何成员，请不填。
aaa.splice(2, 1, '孙七'); 
console.log(aaa);
// 输出：['张三', '李四', '孙七', '赵六']

修改成员值/替换成员值

将新值直接赋值给目标成员即可。
即：数组名[目标成员的索引值] = 新值

📘 示例

var aaa = ["张三","李四","王五"];
aaa[0] = '赵六';
console.log(aaa);  // 输出：['赵六', '李四', '王五']

空数组

📘 示例

var aaa = [];       // 什么值都不填，则为一个空的数组
console.log(aaa);  // 输出：[]

遍历

📘 示例

var aaa = ["张三","李四","王五"];
var i = 0;
var n = aaa.length;
while(i < n)
{var xxx = aaa[i];console.log(i, xxx);i = i + 1;
}
// 输出多行：
// 0 张三
// 1 李四
// 2 王五