JavaScript-字面量对象详解-优快云博客

本文链接：https://blog.youkuaiyun.com/sun13921881708/article/details/76088892
字面量对象


定义：js的字面量对象，就是一种简化的创建对象的方式，和用构造函数创建对象一样存在于堆内存当中
字面量对象表达式语法：
  {属性：属性值，属性：属性值,.....}

属性访问：
  1.通过（.）语法访问：obj.propertyName
  
通过语法访问[]:obj["name"]

遍历字面量对象
for(var temppro in obj){
  
}

我会把js中的字面量对象进行数据解析，解析后会将数据存储在相对应的数据模型中，数据模型就是我们js中通过相对应的构造函数创建出来的一个个对象


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    </style>
</head>
<body>

<input type="button" value="这是第一个按钮" οnclick="btnClick(this)"/>
<input type="button" value="这是第而个按钮" οnclick="btnClick(this)"/>
</body>
</html>
<script type="text/javascript">
//创建字面量对象
    var person={
        name:"张三",age:19,
        dog:{
            dogName:"dsf",
            dogAge:1
        },
        friends:[
            {
                friendName:"sdfg",
                friengAge:24

            },
            {
                friendName:"wert",
                friengAge:27

            },
        ]
    }
//获取dog名称
    console.log(person.dog.dogName);

    //获取frinedName值sdfg
    console.log(person.friends[0].friendName)

    //遍历person字面量对象
//tempPro可以理解成每个属性名称
    for(var tempPro in person){
        console.log(tempPro);
        console.log(person[tempPro]);
        //如果当前属性名称为friedns的时候
        if(tempPro=="friends"){
            //获取friends
            friends=person[tempPro];
            //遍历friends数组
            for(var tempIdx in person[tempPro]){
                //得到friedns数组中的每一个对象
                var tempObj=tepfriends[tempIdx];

            }
        }
    }
/*封装数据模型*/
//地区的构造函数
    function region(regionName) {
        this.regionName=regionName;
        //定义学校的数组
        this.schools=new Array();
    }
//学校的构造函数
    function school(schollName) {
        this.schollName=schollName;
        //定义班级数组
        this.classes=new Array();
    }

    //班级的构造函数
    function Class(className) {
        this.className=className;
        //创建学生数组
        this.students=new Array()
    }

    //定义构造函数
    //学生
    function student(studentName) {
        this.studentName=studentName;
    }

    //分析字面量对象
    var rootObj={
        //地区数组
        region:[
            //地区对象
            {
                regionName:"南昌地区",
                //学校数组
                schools:[
                    schoolName:"南昌一中",
    //班级
classes:[
    {className:"一班",

    }
]
                ]
            }
        ]

    }

//找到某一个同学，解析数据，将封装的数据模型解析出来

//定义一个数组，用来存储所有地区对象的数组
    var regionArray=new Array();
    //遍历地区数组
    for(var tempRegionIdx in regions){
        //得到每一个地区的对象
        var tempRegion=regions[tempRegionIdx];
        //在这里创建对象（构造函数）
        var tempRegionObj=new Region(tempRegion.regionName);
        //将每个地区对象存储到全局的数组中
        regionArray.push(tempRegionObj);
        //得到学校数组
        var schools=tempRegion.schools;
        //遍历数组
        for(var tempSchoolIdx in scholls){
            //得到每一个学校的对象
            vartempSchool=schools[tempSchoolIdx];
            //创建学校的对象（构造函数）
            var tempSchoolObj=new school(tempSchool.schoolName);

//给当前地区添加学校对象
            tempRegionObj.schools.push(tempSchoolObj);
            //得到班级数组
            var classes=tempSchool.classes;
            //遍历班级数组
            for(var tempClassIdx in classes){
                //得到每一个班级对象
                var tempClass=classes[tempClassIdx];
                //创建班级的对象
                var tempClassObj=bew Class(tempClass.className);
                //给当前的学校班级数组添加班级对象
                tempSchoolObj.classes.push(tempClassObj);


            }
            //得到学生数组
            var students=tempClass.students;
            //遍历学生数组
            for(var tempStudentIdx in students){
                //获取每一个学生对象
                var tempStudent=students[tempStudentIdx];
                //创建学生对象
                var tempStudentObj=new Student(tempStudent.studentName);
                //给当前的班级的学生数组添加学生对象
                tempClassObj.students.push(tempStudentObj);
                //判断要找的同学
                if(tempStudent.studentName=="张三"){
                    console.log("\n地区："+tempRegion.regionName+"\n学校："+tempSchool.schoolName)

//break;
                }

            }
        }
    }
</script>