讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
数组概述
数组是存储一系列值的变量集合，它是由一个或多个数组元素组成的，各元素之间使用逗号分隔。每个数组元素由“下标”和“值”构成。其中，“下标”也称为"索引"， 默认情况下索引从0开始依次递增；“值”为元素的内容，它可以是任意类型的数据，如数值型、字符型、数组、对象等。
创建数组
数组在JavaScript中有两种创建方式，一种是实例化Array对象的方式；另一种是直接使用中括号[ ]的方式创建数组。在JavaScript中数组中所存数据类型可以一致，也可以不同。下面将分别对以上两种实现方式进行详细介绍。
使用Array创建数组
示例如下：
var stringArray=new Array("hello","world","JavaScript");
var numberArray=new Array(9,5,2,7);
var mixArray=new Array("zxx",95,true,null);
使用[ ]创建数组
示例如下：
var stringArray=["hello","world","JavaScript"];
var numberArray=[9,5,2,7];
var mixArray=["zxx",95,true,null];
数组基本操作
在此介绍数组常用的基本操作。
获取数组长度
语法如下：
数组名.length;
示例如下：
<script type="text/javascript">
var stringArray=["hello","world","JavaScript"];
document.write(stringArray.length);
document.write("<br />")
var numberArray=[9,5,2,7];
document.write(numberArray.length);
document.write("<br />")
var mixArray=["zxx",95,true,null];
document.write(mixArray.length);
document.write("<br />")
</script>
结果如下：
3
4
4
在JavaScript中数组名.length不但可以获取数据长度还可以修改数组长度，示例如下：
var stringArray=["hello","world","JavaScript"];
stringArray.length=8;
访问数组元素
语法如下：
数组名[元素下标];
遍历数组元素
遍历数组元素方式1
<script type="text/javascript">
var stringArray=["hello","world","JavaScript"];
var arrayLength=stringArray.length;
for(var i=0;i<arrayLength;i++){
document.write(stringArray[i]);
document.write("<br />");
}
</script>
遍历数组元素方式2
<script type="text/javascript">
var stringArray=["hello","world","JavaScript"];
for(k in stringArray){
document.write(stringArray[k]);
document.write("<br />");
}
</script>
添加数组元素
语法如下：
数组名[索引]=值;
示例如下：
<script type="text/javascript">
var stringArray=[];
stringArray[0]=96;
stringArray[1]=97;
stringArray[2]=98;
</script>
修改数组元素
修改元素与添加元素的使用方式相同，不同的是修改元素是为已含有值的元素重新赋值。
语法如下：
数组名[索引]=值;
示例如下：
<script type="text/javascript">
var stringArray=["hello","world","JavaScript"];
stringArray[0]=96;
stringArray[1]=97;
stringArray[2]=98;
</script>
删除数组元素
语法如下：
delete 数组名[索引];
示例如下：
<script type="text/javascript">
var stringArray = ["hello", "world", "JavaScript"];
var arrayLength = stringArray.length;
for (var i = 0; i < arrayLength; i++) {
document.write(stringArray[i]);
document.write("<br />");
}
document.write("<br />");
delete stringArray[1];
arrayLength = stringArray.length;
for (var i = 0; i < arrayLength; i++) {
document.write(stringArray[i]);
document.write("<br />");
}
</script>
结果如下：
由此可见：delete可删除数组中指定下标的元素值，但是删除后该该元素依然会占 用存储位置其值为undefined。
数组常见操作
数组是JavaScript中最常用的数据类型之一，为此在JavaScript中为Array对象中提供了许多内置方法，如栈方法、检索方法、数组转字符串的方法等。在此，对数组的常用方法进行详细讲解。
栈方法
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>栈方法</title>
</head>
<body>
<script type="text/javascript">
var arr = ["hello", "world"];
console.log('原数组：' + arr);
var last = arr.pop();
console.log('在末尾移出元素：' + last + ' - 移出后数组：' + arr);
var len = arr.push('Tulip', 'Jasmine');
console.log('在末尾添加元素后长度变为：' + len + ' - 添加后数组：' + arr);
var first = arr.shift();
console.log('在开头移出元素：' + first + ' - 移出后数组：' + arr);
len = arr.unshift('Balsam', 'Xixi');
console.log('在开头添加元素后长度变为：' + len + ' - 添加后数组：' + arr);
</script>
</body>
</html>
结果如下：
检索方法
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>检索方法</title>
</head>
<body>
<script type="text/javascript">
var arr = ['potato', 'tomato', 'chillies', 'greenpepper'];
var search = 'cucumber';
if (arr.indexOf(search) === -1) {
arr.push(search);
console.log('更新后的数组为: ' + arr);
} else if (arr.indexOf(search) > -1) {
console.log(search + '元素已在arr数组中');
}
</script>
</body>
</html>
结果如下：
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>检索方法</title>
</head>
<body>
<script type="text/javascript">
var res = [];
var arr = ['a', 'b', 'a', 'c', 'a', 'd'];
var search = 'a';
var i = arr.lastIndexOf(search);
while (i !== -1) {
res.push(i);
i = (i > 0 ? arr.lastIndexOf(search, i - 1) : -1);
}
console.log('元素 ' + search + ' 在数组中的所有位置为：' + res);
</script>
</body>
</html>
结果如下：
数组转字符串
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组转字符串</title>
</head>
<body>
<script type="text/javascript">
var stringArray = new Array("hello", "world", "JavaScript");
var numberArray = new Array(9, 5, 2, 7);
document.write(stringArray.join());
document.write("<br />");
document.write([stringArray,numberArray].join("-"));
document.write("<br />");
document.write(stringArray.toString());
document.write("<br />");
document.write([stringArray,numberArray].toString());
document.write("<br />");
</script>
</body>
</html>
结果如下：
数组排序
方法如下：
sort( );
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组排序</title>
</head>
<body>
<script type="text/javascript">
var stringArray = new Array("hello", "world", "JavaScript");
var numberArray = new Array(9, 5, 2, 7);
document.write(stringArray.toString());
document.write("<br />");
stringArray.sort();
document.write(stringArray.toString());
document.write("<br />");
document.write(numberArray.toString());
document.write("<br />");
numberArray.sort();
document.write(numberArray.toString());
document.write("<br />");
</script>
</body>
</html>
结果如下：
综合练习
练习1:查找数组中的最大值与最小值
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>查找数组中的最大值与最小值</title>
</head>
<body>
<script type="text/javascript">
var numberArray = new Array(9, 5, 2, 7, 33);
var max = numberArray[0];
var min = numberArray[0];
for (var i = 0; i < numberArray.length; i++) {
if (numberArray[i] > max) {
max = numberArray[i];
}
if (numberArray[i] < min) {
min = numberArray[i];
}
}
document.write("数组:" + numberArray.toString());
document.write("<br />");
document.write("数组中最大值为:" + max);
document.write("<br />");
document.write("数组中最小值为:" + min);
document.write("<br />");
</script>
</body>
</html>
结果如下：
练习2:冒泡排序
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>冒泡排序</title>
</head>
<body>
<script type="text/javascript">
var arr = [1, 22, 5, 23, 56, 33];
document.write('待排序数组：' + arr);
document.write("<br />")
for (var i = 1; i < arr.length; i++) {
for (var j = 0; j < arr.length - i; j++) {
if (arr[j] > arr[j + 1]) {
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
}
}
}
document.write('排序后数组：' + arr);
</script>
</body>
</html>
结果如下：
练习3:插入排序
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插入排序</title>
</head>
<body>
<script type="text/javascript">
var arr = [1, 22, 5, 23, 56, 33];
document.write('待排序数组：' + arr);
document.write("<br />")
for (var i = 1; i < arr.length; i++) {
for (var j = i; j > 0; j--) {
if (arr[j - 1] > arr[j]) {
[arr[j - 1], arr[j]] = [arr[j], arr[j - 1]];
}
}
}
document.write('排序后数组：' + arr);
</script>
</body>
</html>
结果如下：
练习4:省市区三级联动
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
</head>
<body>
<form>
<select id="province">
<option value="-1">请选择</option>
</select>
<select id="city"></select>
<select id="area"></select>
</form>
<script>
// 省份数组
var provinceArr = ['上海', '江苏', '河北'];
// 城市数组
var cityArr = [
['上海市'],
['苏州市', '南京市', '扬州市'],
['石家庄', '秦皇岛', '张家口']
];
// 区域数组
var areaArr = [
[
['黄浦区', '静安区', '长宁区', '浦东区']
],
[
['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
['邗江区', '广陵区', '江都区']
],
[
['长安区', '桥西区', '新华区', '井陉矿区'],
['海港区', '山海关区', '北戴河区', '抚宁区'],
['桥东区', '桥西区', '宣化区', '下花园区']
]
];
function createOption(obj, data) {
for (var i in data) {
var op = new Option(data[i], i);
obj.options.add(op);
}
}
var province = document.getElementById('province');
createOption(province, provinceArr);
var city = document.getElementById('city');
province.onchange = function() {
city.options.length = 0;
createOption(city, cityArr[province.value]);
if (province.value >= 0) {
city.onchange();
} else {
area.options.length = 0;
}
};
var area = document.getElementById('area');
city.onchange = function() {
area.options.length = 0;
createOption(area, areaArr[province.value][city.value]);
};
</script>
</body>
</html>
结果如下：
610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
