前端系统化学习【JS篇】:(六-1)引用数据类型之Object普通对象篇

176 阅读4分钟

前言

  • 细阅此文章大概需要 8分钟\color{red}{8分钟}左右
  • 本篇中详细讲述\color{red}{详细讲述}了:
    1. object普通对象数据类型的简述
    2. 对象中作为属性名字符串和变量的区别
    3. 获取对象的某一属性的值
    4. 设置对象的某一属性的值
    5. 删除对象的某一属性
  • 如果有任何问题都可以留言给我,我看到了就会回复,如果我解决不了也可以一起探讨、学习。如果认为有任何错误都还请您不吝赐教,帮我指正,在下万分感谢。希望今后能和大家共同学习、进步。
  • 下一篇会尽快更新,已经写好的文章也会在今后随着理解加深或者加入一些图解而断断续续的进行修改。
  • 如果觉得这篇文章对您有帮助,还请点个赞支持一下,谢谢大家!

object对象数据类型

{}普通对象

  • {[key]:[value],....} 任何一个对象都是 由零到多组键值对 (属性名:属性值)组成的(并且属性名不能重复),每组键值对(属性名和属性值)之间用逗号分隔,并且属性名不能重复,属性名只能是数字或者字符串,若当前属性名不存在,默认的属性值是undefined
    • 键值对的键(属性名是数字或者字符串格式的
    • 如果获取的某一属性名并不存在,则获取到的属性值默认为undefined

获取对象的某一属性的值

  • 若想操作这些属性名和属性值只有两种方式,一种是对象名.属性名,另一种是对象名['属性名'],但是对于【数字属性名】来说只能使用中括号
  • 普通对象没有根据[数字索引]操作属性值方式
  • 对象.属性名(若属性名是数字,则不可用.来获取)
  • 对象[属性名]【这种写法注意变量或引用数据类型作为属性名的情况(详见上一篇中5.对象中作为属性名字符串和变量的区别】或对象['属性名']
    let person = {
        name:'xxx',
        age:'40',
        height:'185cm',
        weigth:'80kg'1:100
        };
        //属性名是数字或字符串格式的
        //获取普通对象属性名对应的属性值时
        //=>对象.属性名(若属性名是数字,则不可用.来获取)
        //=>对象[属性名]
        //=>如果当前属性名不存在,默认的属性值是undefined
        console.log(person.name);//=>xxx
        console.log(person['age']);//=>40
        console.log(person.sex);//=>undefined
        //console.log(person.1);//=>SyntaxError语法错误
        console.log(person[1]);
    

变量和属性名的区别

  • 一个对象的属性名只有两种格式:【字符串和数字】(等基本类型,但其他的基本不用)
  • 获取一个对象的某个属性值可以用:
    • 对象.字符串属性名 【.点只支持字符串属性名】
    • 对象['字符串属性名']
    • 对象[字符串]: 此时的字符串是作为一个变量存在,代表其存储的值
      • {属性名} 【在ES6中,如果属性名和属性值一样,如obj{name:name,age:12},则可以简写成obj{name,age:12}】
    • 对象[数字属性名]
    • 对象['数字属性名']
    • ========对象[数字索引] :仅数组可用=======
  • '字符串' 值->代表属性值本身

  • 字符串 对象->代表该字符串变量所存储的值

    var name = 10;
    var obj = {
        name:'maledingda'
    };
    console.log(obj.name);//=>'maledingda'
    console.log(obj['name']);//=>'maledingda'
    console.log(obj[name]);//此时的name是作为一个变量存在,代表其存储的值=>obj[10]=>undefined
    

设置对象的某一属性的值

  • 属性名不可以重复,如果属性名已经存在,则不属于新增,属于修改对应的属性值
    • 对象.属性名 = '属性值';
        person.girlFriend = 'aaa';
        person.name = '张三';
        console.log(person.name);//=>张三
        console.log(person.girlFriend);//=>aaa
    

删除属性

  • 真删除:delete 属性名;(将该键和值一并删除)
  • 假删除:使用操作属性的方法对属性值进行修改为null。(属性名还在,属性值为空)
    //1.真删除(把属性彻底删除,属性名和属性值都删除)
            delete person[1];
            delete person.weigth;
            console.log(person);
            //{name: "张三", age: "40", height: "185cm", girlFriend: "aaa"}
    //2.假删除(属性名还在,属性值为空)
            person.age = null;
            console.log(person);
            //{name: "张三", age: null, height: "185cm", girlFriend: "aaa"}