JS(第十课)JS中的对象

Com.Java.Basis第九课《类与对象》_星辰镜的博客-CSDN博客

有兴趣的可以去看一下

本文内容核心:对象

在百度翻译中对象称为object

安装插件

第一部分去找找在JS中对象的语法是什么如何去创建对象的，调用对象！

var name="李四";

var people={};

var obj=[]

var dog={

// sex

}

var animal={

age:23

}

// 对象

var teacher={

name:"张珊"

}

console.log(teacher)console.log(people)console.log(obj)console.log(dog)console.log(animal.sex)console.log(animal.age)

通过上面的小Demo 我们发现了只有下面的自己声明的对象打印了

var animal={
age:23
}

// 对象
var teacher={
name:"张珊"
}

console.log(teacher) //在这里控制台打印了我的内容

console.log(animal.age) 在这里控制台打印了我们的语法

接下来我们吧上面的类型打印一下

总结一:

创建对象的语法是 var 对象名={属性1:属性值1,属性2:属性值2,属性3:属性值3,属4:属性值4,属性5:属性值5,属性6:属性值6,...}
var obj2 = { "name": '张三',"age": '23',"sex": '男'}

对象的调用对象名称.属性

console.log(obj2.name)

第二部分对象除了有属性应该还有行为在js中称之为方法,那对象的方法改如何调用:在下面的案例中去找找对象的方法时如何调用的呢！

var name = "shriop"
var age = 19
var height = 1.80
console.log("名字是" + name + "年龄" + age + "身高" + height);

// ! 对象的类型
var obj1 = new Object();
console.log(obj1);

// ! 对象的创建
var obj2 = {
"name": '张三',
"age": '23',
"sex": '男',
run: function () {
console.log("我是对象创建的方法")
},
hand: {
"count": ''
},
eat:function(){
console.log("我的函数内容在吃什么呢")
}
}

console.log(obj2.name)
console.log(obj2.hand)
console.log(obj2.run())
console.log(obj2.eat())

经过上面的代码演示是否理解呢！

总结二:

创建对象的方法的语法规则:

行为名称：function () { }

动作名称：function () { }

run: function () {
console.log("我是对象创建的方法")
}

第三部分如何对对象的属性进行增加修改删除呢！

// 修改
obj2["name"] = "李四"
// 修改
obj2.name = "赵武"
//增加
obj2["hand"] = "234"
// 删除
delete obj2.hand

总结三:对于对象的修改删除增加的语法

// 修改方案一对象名[属性名]=修改后的属性名
obj2["name"] = "李四"
// 修改方案二对象名.属性名=修改后的属性名
obj2.name = "赵武"

//增加对象名[对象的属性]=属性值
obj2["hand"] = "234"
// 删除 dellete 对象名.属性名
delete obj2.hand

第四部分对象的遍历看下面的图

总结四:对象遍历的语法规范

方式一

var 数组名称=Object.keys(对象名)

var arr = Object.keys(home)
for (var i = 0; i < arr.length; i++) {
console.log("第二中方式" + home[arr[i]])
}

方式二

for (var j in home) {
console.log("for in ___" + home[j])
}

// ! 对象你声明 
// ! 对象属性的调用
// ! 对象的遍历// ! 对象的类型
var name = "shriop"
var age = 19
var height = 1.80
console.log("名字是" + name + "年龄" + age + "身高" + height);// ! 对象的类型
var obj1 = new Object();
console.log(obj1);// ! 对象的创建
var obj2 = {"name": '张三',"age": '23',"sex": '男',run: function () {console.log("我是对象创建的方法")},hand: {"count": ''}
}
// 修改
obj2["name"] = "李四"
// 修改
obj2.name = "赵武"
//增加
obj2["hand"] = "234"
// 删除
delete obj2.handconsole.log(obj2.name)
console.log(obj2.hand)
console.log(obj2.run())// ! 创建对象的购物的信息 
var shooping = {price: '123',name: '<智慧与人生>',address: "江西省"
}
// 增加
shooping.weight = 1.9
// 修改的方式
shooping["color"] = "yellow"
shooping.price = "4678"
// 删除
delete shooping.address
// 查询信息
console.log("购物信息商品的信息:_" + "价格" + shooping.price + "名称" + shooping.name + "地址" + shooping.address)// !创建手机对象的信息var phone = {color: "red",price: "456$",clq: ""
}
// 增加
phone.hz = 123
// 修改
phone.color = "black"
// 删除
console.log("手机购买用户的信息:")// ! 创建用户的内容
var home = {account: '143',password: "12345678",nickname: "用户",phone: "19867894567",
}// var arr=Object.values(home)
var arr = Object.keys(home)
for (var i = 0; i < arr.length; i++) {console.log("第二中方式" + home[arr[i]])
}//!  for each
for (var j in home) {// console.log("for in ___"+j)console.log("for in ___" + home[j])
}console.log(home)// ! 案例三var m = "hellow"
var obj = {"good friend": "shiplo",[m]: "你好数据"
}
// console.log(obj "good friend");
console.log(obj.m)
console.log(obj["good friend"]);
console.log(obj["hellow"]);
console.log(obj[m]);
console.log(obj.m);// 
var people={"ban an a":'yellow',weight:'300'
}console.log(people["ban an a"])

创建对象的第二种方式自定义构造函数创建对象先进行对代码的解析在js中严格区分大小写语法页在下面文件中

// ! 创建自定义的构造函数的对象

// !定义构造的函数
// !定义构造函数的属性
function Student(name, sex, age, height) {
// !初始化对象的name,sex,age,height
this.name = name;
this.sex = sex;
this.age = age;
this.height = height;
// !定义构造函数的方法如何去调用
// !方案一定义了第一个方法
this.eat = function () {
console.log("今天用户定义了一个方法名字叫吃的方法")
}
}
// !方案二定义了第二个方法
function sleep() {
console.log("用户在方案二中定义了一个方法叫sleep")
}

//用户创建对象的实例
var student1 = new Student("我是构造函数的方式创建的对象1", "男", 34, 156);
var student2 = new Student("我是构造函数的方式创建的对象2", "男", 34, 156);
var student3 = new Student("我是构造函数的方式创建的对象3", "男", 34, 156);
var student4 = new Student("我是构造函数的方式创建的对象4", "男", 34, 156);

// 打印输出
// console.log(student1);
console.log(student1.name + "_" + student1.age + "_" + student1.sex + "_" + student1.heig
console.log(student2.name + "_" + student2.age + "_" + student2.sex + "_" + student2.heig
console.log(student1.name + "_" + student2.age + "_" + student3.sex + "_" + student4.heig
// !方法的调用

student1.eat();
sleep();

[Running] node "d:\Com.Src\JavaScript\Day10-20-1\js\自定义构造函数创建对象.js"
我是构造函数的方式创建的对象1_34_男_156
我是构造函数的方式创建的对象2_34_男_156
我是构造函数的方式创建的对象1_34_男_156
今天用户定义了一个方法名字叫吃的方法
用户在方案二中定义了一个方法叫sleep
1000678
用户打印的属性为1000678
用户打印的属性为我是构造函数的方式创建的对象1
用户打印的属性为男
用户打印的属性为34
用户打印的属性为156
用户打印的属性为234
用户打印的属性为function () {console.log("@MyCreteObjectStructure 用户自己创建的第一个函数名称为MyCreteObjectStructure")}
@MyCreteObjectStructure 用户自己创建的第一个函数名称为MyCreteObjectStructure[Done] exited with code=0 in 0.596 seconds

下面有一个案例可以尝试去写写:

// !自己定义一个对象为Pig  使用自己定义的构造函数 如何执行?
/*** @MyCreteObjectStructure 用户自己创建的第一个函数名称为MyCreteObjectStructure* () 函数中的参数个数*/
function MyCreteObjectStructure(id, name, sex, age, height, weight) {// !初始化对象的属性this.id=id;this.name = name;this.sex = sex;this.age = age;this.height = height;this.weight=weight;// 自己定义的一个函数方法为 CreteObjectStructurethis.CreteObjectStructure = function () {console.log("@MyCreteObjectStructure 用户自己创建的第一个函数名称为MyCreteObjectStructure")}}//!用户创建对象的实例var obj = new MyCreteObjectStructure(1000678,"我是构造函数的方式创建的对象1", "男", 34, 156,234);
// !方案一打印输出的内容
// 打印输出id
console.log(obj.id);
// * 方案二 对象名的函数遍历
for (var j in obj) {// console.log("for in ___"+j)console.log("用户打印的属性为" + obj[j])
}// ! 函数方法的调用
// 对象名.方法名
obj.CreteObjectStructure ()

创建对象的第三种方式 Object自定义对象

语法格式:

var 对象名=new object（）

var people = new Object()

var people = new Object()
people.name = "我叫张胜男";
people.age = 123;
people.weight = 67;
people.height = 189;
people.eat = function () {console.log(people.name + " " + people.weight + " " + people.age)
}
console.log(people.name);
people.eat()

[Running] node "d:\Com.Src\JavaScript\Day10-20-1\js\Object自定义对象.js"
我叫张胜男
我叫张胜男 67 123
10099987001
在 sleep 方法中调用小环_______10099987001undefined_______189__89
在 sleep 方法中调用undefined_______189__89
在run方法中调用小环_______10099987001[Done] exited with code=0 in 0.616 seconds

同样下面有一个案例可以尝试去写写:


var people = new Object()
people.name = "我叫张胜男";
people.age = 123;
people.weight = 67;
people.height = 189;
people.eat = function () {console.log(people.name + " " + people.weight + " " + people.age)
}
console.log(people.name);
people.eat()// ! 抽象函数的理解
// ! 创建对象的信息
// ! 自定义一个对象为Dog对象的内容
var Dog = new Object()
// 狗的编号
Dog.id = 10099987001;
// 狗的姓名
Dog.name = "小环"
// 狗的毛色
Dog.corlor = "balck"
// 狗的身高
Dog.height = "189"
// 狗的体重
Dog.weight = 89
// 狗的行为
Dog.run = function () {// 在run方法中调用console.log("在run方法中调用"+Dog.name + "_______" + Dog.id)
}
// 在 sleep 方法中调用
Dog.sleep = function () {console.log("在 sleep 方法中调用"+Dog.color + "_______" + Dog.height + "__" + Dog.weight)Dog.run()
}
// 睡觉
Dog.food = function () {// ! 执行方法名称为food()console.log("在 sleep 方法中调用"+Dog.name + "_______" + Dog.id + Dog.color + "_______" + Dog.height + "__" + Dog.weight)Dog.sleep()}
// 吃食物console.log(Dog.id)
// 调用方法
Dog.food()

控制台：

[Running] node "d:\Com.Src\JavaScript\Day10-20-1\js\Object自定义对象.js"
我叫张胜男
我叫张胜男 67 123
10099987001
在 sleep 方法中调用小环_______10099987001undefined_______189__89
在 sleep 方法中调用undefined_______189__89
在run方法中调用小环_______10099987001[Done] exited with code=0 in 0.616 seconds