JS自定义对象以及相关成绩系统完整案例演示
【自定义对象】
1.基本概念
①对象是拥有一系列无无序属性和方法的集合
②键值对：对象中的数据，用以键值对的形式存在，对象的每个属性和方法，都对应一个键值，以键取值
③属性：描述对象特征的一系列变量称为属性【对象中的变量】
④方法：描述对象行为的一系列函数称为方法【对象中的函数】
2.对象的声明：
①使用字面量声明：var obj = {
key1:"value1",
key2:"value2",
func1:func(){}
}
对象的数据是以键值对形式存储，键与值之间用":"分隔,多个键值对之间用","分隔。
对象中的键可以是出了数组对象以外的任何数据类型但是一般我们只用普通变量名为键。
对象中的值可以是任何数据类型，包括数组和对象。
②使用new关键字声明
var obj = new Object()
obj.key1 = value1
obj.key2 = value2
obj.func = function(){}
3.对象中属性和方法的读写
①.运算符：对象名.属性 对象名.方法();
②通过[“key]调用，对象名.["属性名"] 对象名.["方法名"]();
如果键中包含其他字符，则只能用第②种方式。
对象中直接写变量名默认为调用全局变量，如果需要调用对象自身的属性或者方法，需要使用对象名.属性。或者this.属性
person.age this.age都可以，但推荐使用this关键字。
③删除对象属性的方法delete 对象名.属性名/方法名
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
*/
var classes = {
//先声明一个classes类
className : "HTML5-1705",
studentCount : 27,
students : [
{name:"张三",sex:"女",chinese:20,maths:30,english:80,sum:90},
{name:"李四",sex:"女",chinese:80,maths:65,english:85,sum:75},
{name:"王五",sex:"男",chinese:68,maths:48,english:75,sum:94}
],
addStudent : function(){
//添加学生信息的行为
var name = prompt("请输入学员姓名：");
var sex = prompt("请输入学员性别：");
var chinese = parseFloat(prompt("请输入学员语文成绩："));
var maths = parseFloat(prompt("请输入学员数学成绩："));
var english = parseFloat(prompt("请输入学员英语成绩："));
var sum = chinese + maths + english;
var student = {
name : name,
sex : sex,
chinese : chinese,
maths : maths,
english : english,
sum : sum
}
this.students.push(student);
this.students.sort(function(a,b){
return b.sum - a.sum;
});
},
showStudent : function(){
//显示学生信息的行为
var arr = this.students;
console.log("\tHTML5-1705班成绩展示");
console.log("序号\t姓名\t性别\t语文\t数学\t英语\t总分");
arr.sort(function(a,b){
return b.sum - a.sum;
});
arr.forEach(function(item,index){
console.log((index+1)+"\t\t"+item.name+"\t"+item.sex+"\t\t"+item.chinese+"\t\t"+item.maths+"\t\t"+item.english+"\t\t"+item.sum);
})
},
delStudent : function(){
//删除学生信息的行为
if(this.students.length<=0) {
alert("没有学员数据，无法删除！");
return;
}
var no = prompt("请输入要删除的学员序号：");
if(no<1 || no> this.students.length){
alert("序号输入有误！请确认学员序号重新输入！");
return;
}
this.students.splice(no-1,1);
},
searchStudent : function(){
//查询学生信息的行为
var no = prompt("请输入要查询的学员序号：");
var arr = this.students;
if(no<1 || no > arr.length){
alert("查无此人！请确认序号！");
}else{
console.log("查询完成！查询到学员信息如下：");
console.log("序号\t姓名\t性别\t语文\t数学\t英语\t总分");
console.log(no+"\t\t"+arr[no-1].name+"\t"+arr[no-1].sex+"\t\t"+arr[no-1].chinese+"\t\t"+arr[no-1].maths+"\t\t"+arr[no-1].english+"\t\t"+arr[no-1].sum);
}
},
updateStudent : function(){
//修改学生信息的行为
if(this.students.length<=0) {
alert("没有学员数据，无法修改！");
return;
}
var no = prompt("请输入要修改的学员序号：");
if(no<1 || no> this.students.length){
alert("序号输入有误！请确认学员序号重新输入！");
return;
}
if(!confirm("您确认修改学员是【"+this.students[no-1].name+"】吗？")){
alert("操作已取消！");
return;
}
var name = prompt("请输入学员姓名：");
var sex = prompt("请输入学员性别：");
var chinese = parseFloat(prompt("请输入学员语文成绩："));
var maths = parseFloat(prompt("请输入学员数学成绩："));
var english = parseFloat(prompt("请输入学员英语成绩："));
var sum = chinese + maths + english;
var student = {
name : name,
sex : sex,
chinese : chinese,
maths : maths,
english : english,
sum : sum
}
this.students[no-1] = student;
}
}
console.log("\t成绩管理系统");
console.log("1、展示学员信息\t2、学员信息录入\n3、删除学员信息\t4、查询学员信息\n5、修改学员信息\t6、退出系统");
while (true){
var num = parseInt(prompt("请输入操作序号"));
var is = false;
switch (num){
case 1:
classes.showStudent();
break;
case 2:
classes.addStudent();
console.log("信息录入成功！");
classes.showStudent();
break;
case 3:
classes.delStudent();
console.log("信息删除成功！");
classes.showStudent();
break;
case 4:
classes.searchStudent();
break;
case 5:
classes.updateStudent();
console.log("信息修改成功！");
classes.showStudent();
break;
case 6:
console.log("系统退出成功！");
is = true;
break;
default:
alert("序号输入有误！");
break;
}
if(is) break;
console.log("是否继续？(输入N退出系统)");
var isGo = prompt("请输入序号：N退出系统，其他字符继续");
if(isGo == "N" || isGo == "n"){
console.log("系统退出成功！");
break;
}
}
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
*/
var classes = {
//先声明一个classes类
className : "HTML5-1705",
studentCount : 27,
students : [
{name:"张三",sex:"女",chinese:20,maths:30,english:80,sum:90},
{name:"李四",sex:"女",chinese:80,maths:65,english:85,sum:75},
{name:"王五",sex:"男",chinese:68,maths:48,english:75,sum:94}
],
addStudent : function(){
//添加学生信息的行为
var name = prompt("请输入学员姓名：");
var sex = prompt("请输入学员性别：");
var chinese = parseFloat(prompt("请输入学员语文成绩："));
var maths = parseFloat(prompt("请输入学员数学成绩："));
var english = parseFloat(prompt("请输入学员英语成绩："));
var sum = chinese + maths + english;
var student = {
name : name,
sex : sex,
chinese : chinese,
maths : maths,
english : english,
sum : sum
}
this.students.push(student);
this.students.sort(function(a,b){
return b.sum - a.sum;
});
},
showStudent : function(){
//显示学生信息的行为
var arr = this.students;
console.log("\tHTML5-1705班成绩展示");
console.log("序号\t姓名\t性别\t语文\t数学\t英语\t总分");
arr.sort(function(a,b){
return b.sum - a.sum;
});
arr.forEach(function(item,index){
console.log((index+1)+"\t\t"+item.name+"\t"+item.sex+"\t\t"+item.chinese+"\t\t"+item.maths+"\t\t"+item.english+"\t\t"+item.sum);
})
},
delStudent : function(){
//删除学生信息的行为
if(this.students.length<=0) {
alert("没有学员数据，无法删除！");
return;
}
var no = prompt("请输入要删除的学员序号：");
if(no<1 || no> this.students.length){
alert("序号输入有误！请确认学员序号重新输入！");
return;
}
this.students.splice(no-1,1);
},
searchStudent : function(){
//查询学生信息的行为
var no = prompt("请输入要查询的学员序号：");
var arr = this.students;
if(no<1 || no > arr.length){
alert("查无此人！请确认序号！");
}else{
console.log("查询完成！查询到学员信息如下：");
console.log("序号\t姓名\t性别\t语文\t数学\t英语\t总分");
console.log(no+"\t\t"+arr[no-1].name+"\t"+arr[no-1].sex+"\t\t"+arr[no-1].chinese+"\t\t"+arr[no-1].maths+"\t\t"+arr[no-1].english+"\t\t"+arr[no-1].sum);
}
},
updateStudent : function(){
//修改学生信息的行为
if(this.students.length<=0) {
alert("没有学员数据，无法修改！");
return;
}
var no = prompt("请输入要修改的学员序号：");
if(no<1 || no> this.students.length){
alert("序号输入有误！请确认学员序号重新输入！");
return;
}
if(!confirm("您确认修改学员是【"+this.students[no-1].name+"】吗？")){
alert("操作已取消！");
return;
}
var name = prompt("请输入学员姓名：");
var sex = prompt("请输入学员性别：");
var chinese = parseFloat(prompt("请输入学员语文成绩："));
var maths = parseFloat(prompt("请输入学员数学成绩："));
var english = parseFloat(prompt("请输入学员英语成绩："));
var sum = chinese + maths + english;
var student = {
name : name,
sex : sex,
chinese : chinese,
maths : maths,
english : english,
sum : sum
}
this.students[no-1] = student;
}
}
console.log("\t成绩管理系统");
console.log("1、展示学员信息\t2、学员信息录入\n3、删除学员信息\t4、查询学员信息\n5、修改学员信息\t6、退出系统");
while (true){
var num = parseInt(prompt("请输入操作序号"));
var is = false;
switch (num){
case 1:
classes.showStudent();
break;
case 2:
classes.addStudent();
console.log("信息录入成功！");
classes.showStudent();
break;
case 3:
classes.delStudent();
console.log("信息删除成功！");
classes.showStudent();
break;
case 4:
classes.searchStudent();
break;
case 5:
classes.updateStudent();
console.log("信息修改成功！");
classes.showStudent();
break;
case 6:
console.log("系统退出成功！");
is = true;
break;
default:
alert("序号输入有误！");
break;
}
if(is) break;
console.log("是否继续？(输入N退出系统)");
var isGo = prompt("请输入序号：N退出系统，其他字符继续");
if(isGo == "N" || isGo == "n"){
console.log("系统退出成功！");
break;
}
}
</script>
</head>
<body>
</body>
</html>
