JavaScript 对象的秘密----给你谈对象

会不多说，直接上干货！！！

对象的基本介绍

         对象 --- 也是数据的集合
         对象与数组的区别
         数组是 索引值 ---> 数据
         对象是 键值对形式 键名 ---> 数据  键名 = 数值 的形式

         对象的 属性/键名 功能 就类似于 数组的 索引下标

对象的声明方式

1、字面量的声明方式

         对象当中的数据,必须是键值对形式 / 属性 属性值
         必须自己定义 数据的键名 和 数据的数值
         键名 : 数据  
         键名的命名规范 : 推荐使用英文字母,数字形式,不能以数字开头
                         键名不用写引号
         键名/属性 是name,存储的数据/属性值是张三
         如果是多个对象,使用逗号间隔

         控制台显示时,有时会按照属性的首字母来显示内容
         但是不是改变程序中,属性的顺序,不用去管,不影响程序执行

例如：

        //但是不是改变程序中,属性的顺序,不用去管,不影响程序执行
        var obj = { name:'张三' , age:18 , sex:'男'};

        console.log(obj);

        // 数组中,直接定义数据,索引是JavaScript程序自动添加的
        var arr = [1,2,3,4,5];
        console.log(arr);

2、内置构造函数方法

var obj2 = new Object();

对象的基本操作方法

        // 对象的基本操作
        // 对象的基本操作方法,与数组的基本操作方法,很相似
        // 语法形式也差不多,有一点要特别注意

我们用一个例子来讲吧！

        // 建立一个空对象
        var obj = {};

        // 给对象新增单元  

首先，先建立一个空的对象，然后再向里面添加单元。有多种方式哦！

方式1

        // 对象变量名称['键名'] = 数值 
        // 键名是不存在的键名,就是新增对象单元操作
        // 使用[]语法,键名必须要添加引号

 obj['name'] = '张三';

方式2

        // 对象变量名称.键名 = 数值
        // 使用 .语法 ,键名不要加引号

obj.sex = '男';

方式3

        // 键名是变量的形式
        // 对象新增单元的键名,是存储在变量中的
        // 此时只能使用 [] 形式来给对象新增单元
        // 并且此时的 变量名称 不要添加引号

        // 如果使用 [] 语法, str变量会被解析为 age 数据内容
        // 如果使用 . 语法, str变量不会被解析,会被直接操作为 str 键名

        // 就类似 '变量' 不解析变量,变量名称就是字符串
        //       `${变量}` 模板字符串,解析变量的

        var str = 'age' ; 

        // []语法,解析变量,添加单元键名是 age
        obj[str] = 180;


        console.log(obj);

最后，我们来做一个关于操作对像的总结。（承接上面的例子）

        // 如果是变量,存储键名,必须使用[]语法
        // 如果是正常添加,推荐使用 .点语法


        // 调用操作  对象.键名  或者  对象[键名]
        // 点语法不能解析变量,

        // 数组和对象是相同的,调用不存在的键名和索引,执行结果都是undefined
        console.log(obj.name);
        console.log(obj.sex);
        console.log(obj['sex']);
        console.log(obj.str);   // 不会解析str为age,只会直接执行obj.str,执行结果是
        console.log(obj[str]);  // 变量必须使用[]语法来执行

        // 修改对象存储的数据
        // 对已经存在的键名,进行赋值,是修改之前的数据

        obj.name = '韩梅梅';
        obj['sex'] = '女';
        // 变量,只能使用[]语法,不要加引号
        obj[str] = 18;

对象中的函数

        // 数组中的数据,可以是任意JavaScript支持的数据类型
        // 对象中的数据,也就是对象的属性值,也可以是JavaScript支持的任意数据类型

接下来是实例讲

 

    <script>
        var obj = {
            name:'张三',
            age:18,
            marry:true,
            o:{a:100,b:200},
            arr:['北京','上海','广州'],
            // 在对象中定义函数,类似于匿名函数
            // 函数是没有函数名称的
            // 函数的内存地址,存储在对象的属性中
            // 对象.属性()  就类似于 匿名函数 变量名称()
            // 此时是在调用函数,并且执行函数 
            fun:function(){
                console.log('我是对象中的函数')
            }
        }

        console.log(obj);
        
        // obj.name ---> 张三
        // obj.arr  ---> ['北京','上海','广州']
        // obj.0    ---> {a:100,b:200}

        obj.fun()  // 调用并且执行存储在对象中的函数/方法
    </script>

 

 

实例2

        // 对象中的函数,调用对象的属性和属性值

        var obj2 = {
            name : '张三',
            age : 18,
            fun : function(){
                // 在对象内部的函数中,调用对象的属性和属性值
                console.log( obj2.name , obj2.age )
            }
        }

        obj2.fun();