【学习笔记18】JavaScript对象的基本认识

一、什么是对象

（一）概念

• 😃 就是一个数据的集合(复杂数据)
• 😁 对象属于复杂数据类型(引用数据类型)

（二）知识点的补充

• JS 的数据类型
  • 1. 基本数据 2. 复杂数据（引用数据类型）
• 引用数据类型
  • object（对象）function（函数） array（数组）

（三）对象的理解

            var obj = {
                name:'张三',
                age:18
            }
            console.log(obj);
1
2
3
4
5

说明：

• 😪 内部存放键值对 (还有人叫key/value; 属性名: 属性值)
• 🥰 逗号间隔
• 😣 冒号左边: 健; 冒号右边: 值;

注意：

• 🥰 { } 对象内部存储的是数据
• 😣 if ( ) { 分支语句的代码 }
• 😁 for ( ) { 循环体 }
• 🥰 function ( ) { 函数体 }
• 😁 { 数据(内部的数据 大部分为基本数据类型) }

二、对象的创建

1、字面量的形式

        var obj = {
            name: '张三',
            age: 18
        }
        console.log(obj)
1
2
3
4
5

2、内置构造函数

        var obj1 = new Object();    // 创建一个空对象
        console.log(obj1);
1
2

三、对象对于key的要求

1. 😍 推荐使用，符合变量命名规范和规则的
2. 😁 可以使用数字作为key
3. 😣 可以使用特殊符号

      var obj = {
            name:'张三',
            age:18,
            123:123,
            '@':'特殊符号1',
            '$':'特殊符号2'
        }
        console.log(obj);
1
2
3
4
5
6
7
8

四、对象的操作(增删改查)

（一）点语法

       var obj = {
            name:'张三',
            age:18,
            123:123,
            '@':'特殊符号1',
            '$':'特殊符号2'
        }
        console.log(obj);
1
2
3
4
5
6
7
8

1、查找：(对象.key)

       var obj = {
            name:'张三',
            age:18,
            123:123,
            '@':'特殊符号1',
            '$':'特殊符号2'
        }
        console.log(obj);
        console.log(obj.name);
1
2
3
4
5
6
7
8
9

2、修改：(对象.key = 新值)

       var obj = {
            name:'张三',
            age:18,
            123:123,
            '@':'特殊符号1',
            '$':'特殊符号2'
        }
        console.log(obj);
        obj.name = '李四';
        console.log(obj);
1
2
3
4
5
6
7
8
9
10

3、新增：(对象.新key = 值)

       var obj = {
            name:'张三',
            age:18,
            123:123,
            '@':'特殊符号1',
            '$':'特殊符号2'
        }
        console.log(obj);
        obj.addr = '贵阳';
        console.log(obj);
1
2
3
4
5
6
7
8
9
10

4、删除(delete obj.key)

       var obj = {
            name:'张三',
            age:18,
            123:123,
            '@':'特殊符号1',
            '$':'特殊符号2'
        }
        console.log(obj);
        delete obj.name;
        console.log('删除之后的对象：',obj);
1
2
3
4
5
6
7
8
9
10

（二）中括号语法(数组语法)

1、查找：(对象[‘key’])

        var obj = {
            name: '张三',
            age: 18,
            123: 123,
            '@': '特殊符号1',
            '$': '特殊符号2'
        }
        console.log(obj);
        console.log(['name']);
1
2
3
4
5
6
7
8
9

2、修改：(对象[‘key’] = 新值)

        var obj = {
            name: '张三',
            age: 18,
            123: 123,
            '@': '特殊符号1',
            '$': '特殊符号2'
        }
        console.log(obj);
        obj['name'] = '李四';
        console.log(obj);
1
2
3
4
5
6
7
8
9
10

3、增加：(对象[‘新key’] = 值)

        var obj = {
            name: '张三',
            age: 18,
            123: 123,
            '@': '特殊符号1',
            '$': '特殊符号2'
        }
        console.log(obj);
        obj['addr'] = '贵阳';
        console.log(obj);
1
2
3
4
5
6
7
8
9
10

4、删除：delete 对象[‘key’]

        var obj = {
            name: '张三',
            age: 18,
            123: 123,
            '@': '特殊符号1',
            '$': '特殊符号2'
        }
        console.log(obj);
        delete obj['name'];
        console.log(obj);
1
2
3
4
5
6
7
8
9
10

（三）两种操作方式的区别

• 🥱对象的key符合命名规范的时候都可以
• 😂出现纯数字为 key 或者特殊符号(@# )，我们需要使用中括号语法
• 😛当出现变量的时候(想用变量作为key) ，也需要使用中括号语法

1、点语法的问题

        var obj = {
            name:'张三',
            age:18,
            123:123,
            '@':'特殊符号1',
            '$':'特殊符号2'
        }
        console.log(obj);
    
        console.log(obj.123);       //语法不支持，报错
        console.log(obj.'@');       //语法不支持，报错
1
2
3
4
5
6
7
8
9
10
11

2、使用中括号语法

        var obj = {
            name:'张三',
            age:18,
            123:123,
            '@':'特殊符号1',
            '$':'特殊符号2'
        }
        console.log(obj);
  
        console.log(obj[123]);      // 123
        console.log(obj['@']);      // 特殊符号1
1
2
3
4
5
6
7
8
9
10
11

3、定义变量

点语法

• 猜想: 对象.变量 —> 对象.name —> 张三
• 实际: 对象点语法, 会将点后边的key作为字符串去使用, 所以点后边不能书写变量

        var obj = {
            name:'张三',
            age:18,
            123:123,
            '@':'特殊符号1',
            '$':'特殊符号2'
        }
        console.log(obj);
​
        // 定义一个key变量
        var key = 'note';
        console.log(obj.key);     //undefined
1
2
3
4
5
6
7
8
9
10
11
12

方括号语法

• 这种书写方式, 是把变量key解析出实际的值 —> ‘name’
• 所以 obj[key] —> obj[‘name’] —> 张三

      var obj = {
            name:'张三',
            age:18,
            123:123,
            '@':'特殊符号1',
            '$':'特殊符号2'
        }
        console.log(obj);
​
        // 定义一个key变量
        var key = 'name';
        console.log(obj[key]);     //张三
1
2
3
4
5
6
7
8
9
10
11
12

五、遍历对象

• 就是拿到对象的所有键值对

        var obj = {
            name:'张三',
            age:18,
            123:123,
            '@':'特殊符号1',
            '$':'特殊符号2'
        }
        console.log(obj);
​
        // for...in 循环
        for (var key in obj) {
            // console.log(key)    // 每一轮循环拿到的都是对象的key 
​
            console.log(key, obj[key])
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15