我是靠谱客的博主 谨慎雪糕,最近开发中收集的这篇文章主要介绍第七讲 JavaScript对象编程(三)系列课程目录前言一、二维数组二、数组的方法三、课堂作业总结,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

系列课程目录

第七讲 JavaScript对象编程(三)


目录

  • 系列课程目录
  • 前言
  • 一、二维数组
    • 1.创建与访问
    • 2.二维数组添加元素
  • 二、数组的方法
    • 1.位移元素
    • 2. 数组排序
    • 3.数字排序
    • 4.多维数组排序
  • 三、课堂作业
    • 1.按照要求完成任务
    • 2.解析代码
  • 总结


前言

JavaScript的二维数组与数组的方法

提示:以下是本篇文章正文内容,下面案例可供参考

一、二维数组

1.创建与访问

创建

var fruits = [["1", "Banana"], ["2", "Orange"]];
var element = ["3", "Apple"];
fruits[2] = element;

访问

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

遍历
在这里插入图片描述

2.二维数组添加元素

在这里插入图片描述

读取用户输入,使用二维数组进行储存并输出

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

二、数组的方法

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”]
  • short()

数组的元素进行排序,并返回数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];  
var x = fruits.sort();//x和fruits的值均为[“Apple”, “Banana”, “Mango” , “Orange”]

对字符串排序,从左至右逐字比较(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 sortby(a, b) {  
    return a - b //升序
}  
var arr = [10,5,8,50];
arr.sort(sortby)  //[5,8,10,50]

function sortby(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"]];

需要对多维数组中的值进行排序时,可借助比较函数sortby

在这里插入图片描述

根据比较函数的返回值为正或为负决定排列顺序

三、课堂作业

1.按照要求完成任务

如下(示例):

在这里插入图片描述

2.解析代码

  • 任务7-1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr = [];
			var a=[];
			var text = "";
			function sortby(a,b){
				return b[1]-a[1]
			}
			function tj() {
				text="<th colspan='2'><h1>项目优先级</h1></th>";
				var a = [document.getElementById("vl").value, document.getElementById("yxj").value];
				arr.push(a)
				arr.sort(sortby)
				console.log(arr);
				for(var i=0;i<arr.length;i++){
					text += "<tr>"
					text += "<th><h1>" + arr[i][0] + "</h1></th>" + "<th><h1>" + arr[i][1] + "</h1></th>"
					text += "</tr>"
				}
				
				document.getElementById("zhi").innerHTML = text
			}
		</script>
		请输入待办事项<br>
		<input type="text" name="" id="vl" value="" />
		优先级:
		<select id="yxj">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<input type="button" name="" id="tj" value="添加" onclick="tj()" />
		<br>
		<br>
		<table border="1" id="zhi">
		</table>
	</body>
</html>

总结

在这里插入图片描述

最后

以上就是谨慎雪糕为你收集整理的第七讲 JavaScript对象编程(三)系列课程目录前言一、二维数组二、数组的方法三、课堂作业总结的全部内容,希望文章能够帮你解决第七讲 JavaScript对象编程(三)系列课程目录前言一、二维数组二、数组的方法三、课堂作业总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(49)

评论列表共有 0 条评论

立即
投稿
返回
顶部