JS-02对象的基本使用-CSDN博客

本文链接：https://blog.csdn.net/m0_68467925/article/details/139140928

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.say

2种方式的差异

+ .语法更方便，但是坑比较多(有局限性)，比如：
- .后面不能使用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>