javascript全端开发之数组与函数
1.数组
一种最常用的数据类型之一，属于对象函数类型中的内置对象。是储存一系列值的变量集合，由一个或多个数组元素组成。数组元素由下标和值构成。下标为索引，以数字表示，从0开始。值为元素中的内容，可以为任意类型的数据。
划分为一维数组，二维数组，三维数组等多维数组。
2.创建数组的两种方式
一个是使用Array（）对象创建数组。通过关键字new来实现。
var 变量=new Array（）；
另一个是通过中括号“[]”来创建数组
var 变量=[元素，]；
在创建数组时，最后一个元素的逗号可以省略，第二种可以创建含有空储存位置的数组。
3.数组的操作（基本）
length 属性可以获取数组的长度或者修改数组长度，其值为数组元素最大下标加1.
length的值大于数组原来的元素个数，没有值会占用空储存的位置，小于，多余的数组元素会舍弃。
4.数组的访问与遍历
访问通过数组名[下标]来获取指定下标的值。
遍历数组的元素：for或者for、、、in或者for、、、of
5.。数组元素的添加与修改
添加元素：数组名[下标]=值
修改方式相同，就是为已有的值重新赋值
元素的删除：delete关键字删除该数组的值，元素会占用一个空储存的位置。
6.二维数组是最常见的多维数组。
7.数组排序
冒泡排序：排序算法，按照从小到大或从大到小的顺序排列。
插入排序：冒泡排序的优化，通过构建有序数组元素的存储，为未排序的数组元素，在已排序的数组总进行遍历，并找位置插入。
8.常用的数组方法
push（）将一个元素或者多个添加到数组的末尾，并返回数组的新长度
unshift()将一个元素或者多个添加到数组的开头，并返回数组的新长度
pop（）从数组的末尾移出并返回一个元素，为空数组返回undefined
shift（）从数组的开头移出并返回一个元素，为空数组返回undefined
9.数组的检索方法
includes()，用于确认数组中是否含有某个元素，含有返回true，否则为false
Array.isArray()用于确认是否传递的值是否是一个Array，是返回true，否则为false
indexOf（）返回在数组中可以找到给定值的第一个索引，不存在返回-1
lastIndexOf（）返回指定元素在数组中的最后一个的索引，不存在返回-1
一个动态实践
关于城市的三级联动
<!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="country"></select>
</form>
<script>
// 省份数组
var provinceArr = ['上海', '江苏', '河北'];
// 城市数组
var cityArr = [
['上海市'],
['苏州市', '南京市', '扬州市'],
['石家庄', '秦皇岛', '张家口']
];
// 区域数组
var countryArr = [
[
['黄浦区', '静安区', '长宁区', '浦东区']
], [
['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
['邗江区', '广陵区', '江都区']
], [
['长安区', '桥西区', '新华区', '井陉矿区'],
['海港区', '山海关区', '北戴河区', '抚宁区'],
['桥东区', '桥西区', '宣化区', '下花园区']
]
];
// 第1步
function createOption(obj, data) {
for (var i in data) {
var op = new Option(data[i], i); // 创建下拉列表中的option选项
obj.options.add(op); // 将选项添加到下拉列表中
}
}
var province = document.getElementById('province');
createOption(province, provinceArr);
// 第2步
var city = document.getElementById('city');
province.onchange = function() {
city.options.length = 0; // 清空city下的原有
createOption(city, cityArr[province.value]);
if (province.value >= 0) {
city.onchange(); // 自动添加 城市对应区域 下拉列表
} else {
country.options.length = 0; // 清空country下的原有
}
};
// 第3步
var country = document.getElementById('country');
city.onchange = function() {
country.options.length = 0; // 清空country下的所有原有
createOption(country, countryArr[province.value][city.value]);
};
</script>
</body>
</html>
还有一个猴子选大王的javascript代码
<script>
var total = prompt('请输入猴子的总数');
var kick = prompt('踢出第几只猴子');
var monkey = [];
for (var i = 1; i <= total; ++i) { // 创建猴子数组
monkey.push(i);
}
i = 0; // 记录每次参与游戏（报数）的猴子位置
while (monkey.length > 1) { // 在猴子数量大于1时进行循环
++i; // 猴子报数
head = monkey.shift(); // 从monkey数组的开头，取出猴子
if (i % kick != 0) { // 判断是否踢出猴子，不踢则把该猴子添加到monkey数组的尾部
monkey.push(head); // 继续参加游戏的猴子
}
}
console.log('猴王编号：' + monkey[0]);
</script>
坚持努力。