JavaScript对象编程（三）
补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。
一、二维数组
1.创建与访问
- 创建二维数组
在上一章分享的数组中再加一层数组即可；
比如一个水果摊，需要一个 二维数组 存放 水果的价格 和 水果
下面代码中展示的 fruits 就是一个水果摊：
var fruits = [["1", "Banana"], ["2", "Orange"]];
var element = ["3", "Apple"];
fruits[2] = element;
- 访问二维数组
二维数组的访问可以通过索引值，这里区别与一维数组的是需要写两个索引值，才能访问到最里层的元素。
fruits[0] // ["1", "Banana"]
fruits[0][1] // "Banana"
- 遍历二维数组
一个循环得到水果摊所有的水果
for(var i in fruits){
for(var j in fruits){
console.log(fruits[i][j]) //控制台输出所有的水果价格和水果
}
}
- 二维数组添加元素
这里也是使用push()方法来添加元素
水果摊新进购了一批苹果，然后把苹果加入水果摊中
var arr = [["1"，"Banana" ]，[ "2"，"Orange" ]]
var element = [ "3"，"Apple" ] //把苹果打包在 element 中
arr.push(element)
2.小练习
读取用户输入，使用二维数组进行储存并输出
参考js代码如下所示：
var arr = [] //定义一个数组（因为是弱类型语言，所以只要是数组就行，没有[][]这种方式）
function add() {
var element = []
var name = document.getElementById( ' name ' ).value
var age = document.getElementById( ' age ' ).value
var gender = document.getElementById( ' gender' ).value
element.push( name,age，gender)
arr.push(element)
var str = ''
for ( var i in arr) {
for ( var j in arr[i]) {
str += arr[i][j] + ' '
}
str += '<br/>'
}
document.getElementById( 'list" ).innerHTML = str
}
二、数组的方法
1.位移元素
- shift()
删除首个数组元素并返回被删除的元素，同时把所有其他元素“位移”到更低的索引。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.shift();//fruits的值是[“Orange”, “Apple” , “Mango”]; x的值是"Banana"
- unshift()
向数组的开头添加一个或更多元素并返回新的长度，同时把所有其他元素“位移”到更高的索引。
var fruits = ["Orange", "Apple", "Mango"];
var x = fruits.unshift("Banana");//fruits的值是[“Banana”, “Orange”, “Apple” , “Mango”]; x的值是4
2.数组排序
- reverse()
颠倒数组中元素的顺序，并返回数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.reverse();//x和fruits的值均为[“Mango”, “Apple”, “Orange”, “Banana”]
- sort()
数组的元素进行排序，并返回数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.sort();//x和fruits的值均为[“Apple”, “Banana”, “Mango” , “Orange”]
注意：
sort()对字符串排序，从左至右逐字比较（ASCII码顺序）
① [“a”, “A”, “1”], 按ASCII码顺序排列后为[“1”, “A”, “a”]。（数字>大写字母>小写字母）
② [“ab”, “ac”, “abc”], 排序后为[“ab”, “abc”, “ac”]。
（第一位相同比较第二位，b>c，因此ab和abc在ac之前；再比较ab与abc, ab没有第三位，因此排在abc之前）
③ 对字符串形式的数字，排序规则不变，如[“10”, “5”, “18” , “50”], 排序后为[“10”, “18”, “5”, “50”]
补充：
如需要对字符串形式的数字进行排序，采用以下两种方式
① 统一格式，补足位数，如[“10”, “5”, “18” , “50”]中, 将“5”写为“05”
② 转换为数字，使用特殊方法对数字排序
3.数字排序
可以将数字进行升序或者降序排列
- 数字升序
function 函数名(a, b) {
return a - b //升序
}
var arr = [10,5,8,50];
arr.sort(sortby) //[5,8,10,50]
- 数字降序
function 函数名(a, b) {
return b - a //降序
}
var arr = [10,5,8,50];
arr.sort(sortby) //[50,10,8,5]
可以直接写在sort()内写匿名函数作为参数
arr.sort(function (a, b) {
return a - b
})
4.多维数组排序
举一个小栗子来试一试
var arr = [[“Alice”, “95”], [“Bob”, “80”], [“Cart”, “100”]];
需要对多维数组中的值进行排序时，可借助上述的函数
根据比较函数的返回值为正或为负决定排列顺序
function sortby(a,b) {
return a[1] - b[1]
}
arr. sort( sortby )
三、网页小案例
1.题目要求
修改任务6-2待办事项，添加“优先级”下拉框，可选择1、2、3，增加背景色下拉框，可选择多种颜色。
将任务名与优先级存入二维数组
按优先级降序排序
输出二维数组
2.原码奉上
建议先尝试着写一下，自己完成更有成就感喔！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#box {
font-size: 50px;
margin: 0;
}
input[type=text] {
width: 150px;
}
td{
width: 80px;
text-align: center;
border: 1px solid gray;
}
</style>
</head>
<body>
<p>请输入待办事项</p>
<input type="text" name="item" id="item" value="" />
优先级：<select name="rank" id="rank">
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
背景色：<select name="color" id="color">
<option value="hotpink">粉色</option>
<option value="rgb(168, 56, 233)">紫色</option>
<option value="rgb(83, 235, 78)">绿色</option>
<option value="rgb(108, 217, 236)">蓝色</option>
</select>
<input type="button" name="add" id="add" value="添加" onclick="add()" />
<h1>项目优先级</h1>
<table border="1" id="tableBox">
</table>
<script>
var toDoList = []; //定义任务数组
// add()用于新增任务
function add(){
var item = document.getElementById("item").value;
var rank = document.getElementById("rank").value;
var color = document.getElementById("color").value;
var newItem = [item,rank,color]; // 把新任务的元素存进数组
toDoList.push(newItem); //将新任务添加到总任务中
toDoList.sort(function(a,b){ //多维数组排序，根据优先级
return b[1]-a[1];
})
show(toDoList);
}
// show()用于循环显示内容
function show(toDoList){
var txt ="<tr><td>任务</td><td>优先级</td></tr>";
for (var i in toDoList){
txt+="<tr>"
for (var j=0;j<toDoList[i].length-1;j++){
txt+="<td style='background-color:"+toDoList[i][2]+"';>"+toDoList[i][j]+"</td>";
}
txt+="</tr>";
}
document.getElementById("tableBox").innerHTML=txt;
document.getElementById("item").value="";
}
</script>
</body>
</html>
您如果对文章有其他的见解，欢迎指正~