目录
1 创建一个对象
2 对象属性操作
2.1 获取属性
第一种方式:.语法
第二种方式:[]语法
2种方式的差异
2.2 设置属性
2.3 删除属性
3 案例
1 创建一个对象
创建一个对象,包含了两个属性,两个方法:
var student={ name:"李白" , //student有一个name属性,值为"李白"grade:"初一" ,//a、student有一个say属性,值为一个函数//b、student有一个say方法say:function(){console.log("你好");},run:function(speed){console.log("正在以"+speed+"米/秒的速度奔跑");}}
对象是键值对的集合:对象是由属性和方法构成的 (ps:也有说法为:对象里面皆属性,认为方法也是一个属性)
+ name是属性 grade是属性
+ say是方法 run是方法
2 对象属性操作
2.1 获取属性
第一种方式:.语法
+ student.name 获取到name属性的值,为:"李白"
+ student.say 获取到一个函数第二种方式:[]语法
+ student["name"] 等价于student.name
+ student["say"] 等价于student.say2种方式的差异
+ .语法更方便,但是坑比较多(有局限性),比如:
- .后面不能使用js中的关键字、保留字(class、this、function。。。)
- .后面不能使用数字
```js
var obj={};
obj.this=5; //语法错误
obj.0=10; //语法错误
```+ []语法使用更广泛
- o1[变量name]
- ["class"]、["this"]都可以随意使用 `obj["this"]=10`
- [0]、[1]、[2]也可以使用
- `obj[3]=50 = obj["3"]=50`
- 思考:为什么obj[3]=obj["3"] ?
- 甚至还可以这样用:["[object Array]"]
- jquery里面就有这样的实现
- 也可以这样用:["{abc}"]
- 给对象添加了{abc}属性
2.2 设置属性
设置属性
+ `student["gender"]="男"` 等价于: `student.gender="男"`
- 含义:如果student对象中没有gender属性,就添加一个gender属性,值为"男"
- 如果student对象中有gender属性,就修改gender属性的值为"男"
+ 案例1:`student.isFemale=true`
+ 案例2:`student["children"]=[1,2,5]`
+ 案例3:为student添加方法
```js
student.toShanghai=function(){
console.log("正在去往上海的路上")
}
```
2.3 删除属性
删除属性
+ delete student["gender"]
+ delete student.gender
3 案例
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body></body> <script>//1、创建对象var person = {gender: "男",height: 185,toShanghai: function () {console.log('去上海啦');}};//2、获取属性console.log(person.gender); //"男"console.log(person["height"]); //185//3、设置属性person.address = "xx市xx区";person.height = 190;//4、删除属性delete person.gender;delete person.a; //这段代码没有意义,也不会报错//delete关键字只能删除对象中的属性,不能删除变量// var a=100;// delete a;//错误的理解//清空对象person = {}; //person对象不再具有任何属性person = null;//表示将person变量的值赋为null,从此以后person不再是一个对象了 </script></html>