对象的简单讲解

156 阅读7分钟

对象

         * 
         *      属于 引用数据类型(复杂数据类型)
         * 
         * 
         *  他只是一个存储 基本数据类型的集合
         * 
         * 
         *      对象的花括号中书写的不是代码, 而是键值对格式的数据
         * 
         *      键值对      ---         key/value       ---     属性名:属性值
         * 
         * 
         *          冒号左边的统称为: 键/key/属性名
         *              右边统称为: 值/value/属性值
         * 
         * 
         *      对象这个数据结构 将来开发中经常会使用
         *          用户详情
         *          商品详情
         
         *          文章详情
         
            // 属性:值
            // 属性名不能重复,重复就会覆盖
            // 属性名是唯一的,属性名又叫做键名  key 关键词
            // 值 value
            // 键值对  有键名有值成对出现就叫做键值对 值的类型可以是任意类型,键的类型只能是字符型或者   唯一型(暂时不管)
            // 对象是一种键值对的数据存储格式,是一种松散结构
    // 松散结构,表示一个键值对和其他键值对是没有关联关系的。

                        var obj = {
                            num: 1,
                            sum: 10086,
                            name: '张三',
                            age: 18,
                            bo1: true,
                            bo2: false
                        }

                        console.log(obj)

1. 对象的创建

    // js是一个点语法的语言  使用.就是指对象下的属性或者方法
    // var obj1 = {}   // 字面量的方式创建
    // console.log(obj1)
    // var obj2 = new Object()     // 内置的构造函数的方式创建
    // console.log(obj2)

1.2对象的属性与方法定义

     var 王钢={
                眼睛:2,
                腿:2,
                嘴:1,
                编程:function(){
                    // 函数
                    console.log("aaaa")
                },
                做饭:function(){

        }
    }

    console.log(王钢.眼睛)
    王钢.编程();//写入方法() 就会执行对应方法的代码块

    在对象中有两种,一种叫做属性,一种叫做方法
    关键词后面是一个函数的就叫做方法,关键词后面不是函数是一个值的叫做属性

2. 对象的操作 (增删改查)

    点语法
  // 直接写入属性名的方式,属性名只能是数字、字母、下划线、$组成,可以使用纯数字作为属性名,但是不能使用数字开头后面使用其他字符
    // 可以使用_、字母、$开头,后面的可以使用数字、字母、下划线、$
    // 如果属性名加双引号,属性名就可以使用任意字符串定义(就是命名)了
            var obj = {
                name: '张三',
                id: 'QF001'"1dfsf": 123  // 可以随意定义 但获取必须是中括号语法
            }
            console.log('原本的对象: ', obj)

            // 2.1 增       对象名.新的属性名 = 对应的属性值
            // obj.age = 18

            // 2.2 删    delete 对象名.要删除的属性名
            // delete obj.id

            // 2.3 改   对象名.要修改属性值的属性名 = 新的属性值
            // obj.name = '张三丰'

            // console.log('操作后的对象: ', obj)

            // 2.4 查   对象名.要查询的属性名       会得到对应的属性值
            console.log(obj.name)

 // 点语法获取和设置时,只能获取设置普通直接设置命名属性名,不能获取设置使用""或者[]定义的属性名

中括号语法 (数组语法)

     // 点语法获取和设置时,只能获取设置普通直接设置命名属性名,不能获取设置使用""或者[]定义的属性名
    // 使用[]获取属性名时 不使用.语法,直接将[]写在对象后面,[]中可以使用字符串,也可以放置变量
    var obj = {
        name: '张三',
        id: 'QF001'
        "a-b":2,
        [o]:3
    }
    console.log('原对象: ', obj)

    // 增   对象名['要新增的属性名'] = 对应的属性值
    // obj['age'] = 18


    // 删   delete 对象名['要删除的属性名']
    // delete obj['id']

    // 改   对象名['要修改的属性名'] = 新的属性值
    // obj['name'] = '李四'


    // console.log('操作后的对象: ', obj)

    // 查   对象名['要查询的属性名']        会得到对应的属性值
    console.log(obj['name'])
    
  
    //    console.log(obj["a-b"])
    //    console.log(obj[o])
     中括号语法2
            var n="abc";
            var bool=true;
            var obj={a:1};
            var o={
                ["a"]:1,
                ["1"]:2,
                ["1a"]:4,
                ["a-b"]:5,
                [n]:6,//[]中使用字符没有""就是变量,相当于将变量的值作为对象的属性名
                [bool]:7, //所有非字符类型作为属性名时都会自动隐式转换为字符串
                [obj]:8
            }

对象点语法和中括号语法的区别

         *      
         *      只要正常情况, 对象的属性名符合变量的命名规则与规范的情况下, 使用点语法或者中括号语法 没有任何区别
         * 
         *      但是在遇到一些特殊的属性名的时候 就要更换了, 比如 说属性名为数字
         * 
         *      还有一种情况, 属性名想要使用变量的时候, 也需要使用中括号语法
       


    var obj = {
        0: '数字0',
        1: '数字1',
        2: '数字2',
        name: '张三'
    }

    // console.log(obj)
    // // console.log(obj.0)   // 语法不允许
    // console.log(obj[0])


    // console.log(obj.name)
    // console.log(obj['name'])
    // 将属性名赋值给 myName。注意带文字必须有字符串,数字属性名不用
        var myName = 'name'

 

   
    /**
     *  在 JS 中, 对象的点语法, 会将 . 后边的 这个单词/属性 视为一个普通字符串
     *      而不会当成一个变量
     * 
     *  所以现在相当于 去 对象 obj 中 查找一个 属性名为 myName 的键值对
     *  但是对象中并没有, 所以得到了一个 undefined
     * 
     *  要是想当一个变量使用, 必须使用 中括号语法, 而且不能加引号
     *      如果加了引号, 那么就是当一个字符串去使用, 结果和上述的点语法相同
     *  只有不加引号, 才会是当一个变量去使用
     * 
     * 
     * 我推荐
     *      正常情况下全都使用 点语法
     *      涉及到变量的时候 使用 中括号语法
    */
     console.log(obj.myName)   //  undefined
     console.log(obj['myName']) // undefined
     console.log(obj[myName])
     console.log(obj['name'])
     
    

image.png

* 遍历对象

     *      拿到对象内部的所有数据
   

      var obj = {
      a: 1,
      b: 2,
      c: 3,
    };

    将对象中每一个属性名赋值给变量key

  遍历对象 将对象中的每个属性循环查看,叫做遍历
    for(var key in obj){
      // console.log(key);//a b c
      // console.log(obj[key])
      console.log(key,obj[key])
    }
2. // 按照对象属性的添加顺序遍历
           var obj={
              a:1,
              1:2,
              10:3,
              3:4,
              b:5,
              d:6,
              1.2:7
          }

          将属性名转换为数值,
          如果不是非数值(含有小数点和负数的按照字母字符遍历),
          则按照这个数值属性的从小到大的顺序先变量,
          然后再将转换数值后是非数值的字母属性按照添加的先后顺序遍历
          for(var key in obj){
              console.log(key);
          }

Object.assign 方法

   var obj={a:1,b:2};
  var o={};
  //将obj上的属性复制到o上
  Object.assign(o,obj);
  console.log(o)

JSON格式

      var obj={a:1,b:2,c:3,d:{ab:10}};

 1.   将对象转换为JSON格式的字符串
      var str=JSON.stringify(obj);

      JSON格式的字符串 '{"a":1}' JSON格式的字符串 
      使用{}作为字符串的前后首尾字符,每个属性使用""引起每个属性名,值正常写入
      JSON字符串的值中不会存在HTML标签或者函数、undefined,
      只能字符型、数值型、布尔型、null和对象的值,

      console.log(str);

      var str='{"a":1,"b":{"c":3}}';
 2.JSON字符串转换为对象
      var o=JSON.parse(str);
      console.log(o);
      
      

对象浅复制

*   通过浅复制一个引用数据类型到另外一个变量中

*   其中这个数据内的基本数据类型修改的时候不会互相影响

*   但是其中的 引用数据类型再修改的时候会互相影响


       
          var o1={a:1,b:2,c:3};
          var o2={}
          // 通过循环将o1中每个属性赋值给o2
          for(var key in o1){
          // 将o1的key设置在o2上,并且将o1的key对应的值存储在o2上
               o2[key]=o1[key]
          }
          // console.log(o2);
          o2.a=100;

          console.log(o2,o1)

         c属性是一个对象的引用地址,在赋值的时候将c属性的引用地址也赋值给了o2的c属性
         o2的c属性的值和o1的c属性的值都是同一个引用地址
         要解决这个问题不能使用浅复制,必须使用深复制,暂时无法完成
              var o1={a:1,b:2,c:{d:3}}
              var o2={};
             for(var key in o1){
                   o2[key]=o1[key]
              }
              o2.a=100;
              o2.c.d=100;
              console.log(o2,o1);

最简单的深复制可以使用JSON处理

    *   不管多少层数据结构, 都百分之百复制一份过来; 但是内部数据的修改, 不会互相影响.
     *   语法:`JSON.parse(JSON.stringify(数据)) `

  var o1 = { a: 1, b: 2, c: { d: 3 } };

          var str=JSON.stringify(o1);
         var o2=JSON.parse(str);
            var o2=JSON.parse(JSON.stringify(o1));
            o2.c.d=100;
         console.log(o1,o2);