JavaScript对象编程之二维数组

最新推荐文章于 2024-08-30 12:08:57 发布

Dev.youn

最新推荐文章于 2024-08-30 12:08:57 发布

阅读量2.2k

点赞数 1

分类专栏：学习文章标签： javascript js html

本文链接：https://blog.csdn.net/MrRun2019/article/details/115189174

版权

学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript对象编程（三）

一、二维数组
- 1.二维数组的创建与访问
- 2.小试牛刀
二、数组的方法
三、本节案例

一、二维数组

1.二维数组的创建与访问

二维数组创建
二维数组是在一维数组的基础上进行创建的，即外层数组的元素也是一个数组类型，例如创建一个水果的数组，包含水果的编号和名称

var fruits = [["1", "Banana"], ["2", "Orange"]];
var element = ["3", "Apple"];
fruits[2] = element;//指定数组下标赋值

访问二维数组
二维数组的访问可以通过索引值，这里区别与一维数组的是需要写两个索引值，才能访问到最里层的元素。

fruits[0] // ["1", "Banana"]
fruits[0][1] // "Banana"

遍历二维数组
输出上面定义的数组fruits中所有的水果

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.小试牛刀

题目：读取用户输入，使用二维数组进行储存并输出
在这里插入图片描述

参考代码如下：

var arr = []  //定义一个二维数组（js是弱类型语言，没有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] + '&nbsp; '
		}
		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()：

sort()对字符串排序，从左至右逐字比较（ASCII码顺序）
(1) [“a”, “A”, “1”], 按ASCII码顺序排列后为[“1”, “A”, “a”]。（数字>大写字母>小写字母）
(2) [“ab”, “ac”, “abc”], 排序后为[“ab”, “abc”, “ac”]。
（第一位相同比较第二位，b>c，因此ab和abc在ac之前；再比较ab与abc, ab没有第三位，因此排在abc之前）
(3) 对字符串形式的数字，排序规则不变，如[“10”, “5”, “18” , “50”], 排序后为[“10”, “18”, “5”, “50”]

说明：

如需要对字符串形式的数字进行排序，采用以下两种方式
(1) 统一格式，补足位数，如[“10”, “5”, “18” , “50”]中, 将“5”写为“05”
(2)转换为数字，使用特殊方法对数字排序

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.多维数组排序

现有一个数组arr如下：
var arr = [[“Alice”, “95”], [“Bob”, “80”], [“Cart”, “100”]];
需要对多维数组中的值进行排序时，可借助比较函数

function sortby(a,b) {
	return a[1] - b[1]
}
arr. sort( sortby )

三、本节案例

题目：
修改上节案例中的待办事项，添加“优先级”下拉框，可选择1、2、3
将任务名与优先级存入二维数组
按优先级降序排序
输出二维数组

运行效果:
在这里插入图片描述
参考代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>请输入待办事项：</span>
		<input type="text" name="input1" id="input1" value="" />
        <span>优先级：</span>
        <select id="level">
            <option value="3">3</option>
            <option value="2">2</option>
            <option value="1">1</option>
        </select>
		<input type="button" name="add" id="add" value="添加" onclick="add_things()"/>
        <table border="1" id="show"></table>
		<script type="text/javascript">
			var arr = [];
			function add_things(){//定义添加事件的函数
				arr.push([document.getElementById("input1").value,document.getElementById("level").value]);//向数组中添加任务和优先级
				arr.sort(function(a,b){//定义排序规则
                    return b[1]-a[1]
                })
                var txt = "";
                for(var i in arr){//循环输出数组中的事件和优先级，并用字符串拼接方式连接起来
                    txt+="<tr>";
                    txt+="<td>"+arr[i][0]+"</td>"+"<td>"+arr[i][1]+"</td>";
                    txt+="</tr>";
                }
                document.getElementById("show").innerHTML=txt;
			}
		</script>
</body>
</html>