网页前端开发之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 王五
使用while
和length
组合能依次读取到数组的成员
请在 MinWegPage 上直接在线编写和运行本篇代码,无需安装任何环境。
本篇的练习题如下:
第1题
创建一个列表digits,包含你喜欢的数字(至少两个)。
然后打印列表的长度。
第2题
创建一个列表names,包含你三个朋友的名字。
打印最后一个朋友的名字。
第3题
创建一个列表misc,包含你三个朋友的名字。
再添加两个你最喜欢的数字,
最后打印此列表。
请认真完成所有练习题,勤加练习有助于快速提升你的编程能力。
更多练习题在 https://www.min2k.com/course/docs/web-client/array