对象json_json对象创建读取增删改对象的解析(for in)-CSDN博客

对象 obect

array
json
data
RegExp
null

json 它也可以放任何数据类型,具有代表性.

var json = {
       key:value,
       key:value,
       key:value,
       key:value//最后这个地方一定不可以加逗号
   }

学习对象要学习

对象要怎么去创建?对象的写法.
理解对象的作用是干什么的(针对性,可以容纳不同的数据类型)
怎么去读取对象的属性和方法以及对对象的属性和方法的增删改;
怎么样去判断对象的具体数据类型检测内部的属性和方法是否存在.
对象的解析(for in).
对象在组件封装开发过程中应用.

1.对象的写法.(开发过程推荐用引号包住key)


var xq = {
    name : 'xq',
    age : 18,
    say:function(){
        alert("同学们晚上好,好好听老师讲课");
    },
    marry:false,
    tel:130000,
    address:"湖南长沙"
};

var xq1 = {
    "name" : 'xq',
    "age" : 18,
    'say':function(){
        alert("同学们晚上好,好好听老师讲课");
    },
    marry:false,
    tel:130000,
    address:"湖南长沙"
};

var person = {
    name:'xiaoyuer',
    age:16,
    say:function(){
        alert("我叫小鱼儿");
    },
    tel:11111,
    address:"北京",
    "e-mail":"12345@qq.com",
    "valueOf":123//
};

//怎么样访问对象中的属性和方法
//alert(person.name);
//alert(person["name"]);
//alert(person["e-mail"]) //这样只能[]
//alert(person.say())//函数==>变量的话
//var say = "say";
//alert(person[say]);
//修改
//person.name = "goudan";
// 添
// person.marry = true;
// alert(person["marry"]);
//怎么样删除对象(arr,json) 唯一的一个方法 arr = null; json = null;
//怎么样删除对象里边的属性?
delete person.name;
//alert(person.name);//undefined
//怎么样去检测 json里边还有没有属性或者方法  通过 in返回一个布尔值 (字符串 in 对象)
//alert("name" in person);//true
//alert("address" in person);

//in不光检测你自己的 还会检测你从父类继承的 但是无法判断 到底是自己还是父类的
//对象都会继承js内置方法 valueOf toString constructor hasOwnProperty....
//alert("valueOf" in person);true
//alert(person["valueOf"])//123

//检测到底是不是自己的 避开父类 hasOwnProperty()
//alert(person.hasOwnProperty("name"));//true
//alert(person.hasOwnProperty("toString"));//false
//alert(person.hasOwnProperty("name")); //false===>上面delete

只有对象才可以点 (.) 方法和属性

//多个参数需要你返回的时候 要么返回一个数组 要么返回一个对象 数组 排序 反转/ 对象去点
// function fn(){
//     var a = 1;
//     function fn1(){

//     };
//     var json = {
//         a:a
//     };
//     return json;//返回对象
// }
// alert(fn().a);//函数也可以.


window{
    "document":document{
                "getElementById":getElementById,
                "getElementsByClassName":getElementsByClassName,
                "obj":obj{
                    "style":style{
                            "width":width,
                            "height":height
                    }
                    "title":title
                }
    }
}

输出json内容

var person = {
    "name":"狗蛋",
    "marry":false,
    "say":function(){alert("goudan")}
};
alert(person);//object
var arr = [1,23,4];
alert(arr);//1,23,4


//对象字符化     JSON.stringify()  
//JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数.
//可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生
//person.say = person.say.toString();
//var jsonStr = JSON.stringify(person);
//alert(jsonStr);//输出字符串'{"name":"狗蛋","marry":false,"say":"function(){alert('goudan')}"}'

//字符对象化 JSON.parse()
//var person2 = '{"name":"xq", "age":18}';//里面必须是双引号
//var person3 = "{'name':'xq', 'age':18}";//报错
//alert(person2.name);  //undefined
//var obj = JSON.parse(person2);
//alert(obj.name); //xq
//alert(typeof obj); //object

对象的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        table{width: 600px;border-collapse: collapse;margin: 20px auto;}
        table td{border: 1px solid #333;padding: 10px;width:125px;}
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
    <script type="text/javascript">
        var html = "";
        var tbody = document.getElementById("tbody");

        //需求 是要把人的数据放到表格里边  数组 是不行的
        //对象具有代表性
        var xiaoyuer = {
            name:"xiaoyuer",
            age:18,
            address:"北京"
        };
        // tbody.innerHTML += "<tr>"+
        // "    <td>"+xiaoyuer.name+"</td>"+
        // "    <td>"+xiaoyuer.age+"</td>"+
        // "    <td>"+xiaoyuer.address+"</td>"+
        // "    <td>操作</td>"+
        // "</tr>";

        var Arkin = {
            name:"Arkin",
            age:20,
            address:"杭州"
        };
        // tbody.innerHTML += "<tr>"+
        // "    <td>"+Arkin.name+"</td>"+
        // "    <td>"+Arkin.age+"</td>"+
        // "    <td>"+Arkin.address+"</td>"+
        // "    <td>操作</td>"+
        // "</tr>";

        var xq = {
            name:"xq",
            age:20,
            address:"湖南长沙"
        };
        // tbody.innerHTML += "<tr>"+
        // "    <td>"+xq.name+"</td>"+
        // "    <td>"+xq.age+"</td>"+
        // "    <td>"+xq.address+"</td>"+
        // "    <td>操作</td>"+
        // "</tr>";

        var arr = [];
        arr.push(xq);
        arr.push(Arkin);
        arr.push(xiaoyuer);
        arr.sort(function(a,b){
            var age1 = a.age;
            var age2 = b.age;
            return age1 - age2;
        });
        // 只有对象才能点
        for(var i=0;i<arr.length;i++){
            var data =arr[i];
            tbody.innerHTML += "<tr>"+
            "    <td>"+data.name+"</td>"+
            "    <td>"+data.age+"</td>"+
            "    <td>"+data.address+"</td>"+
            "    <td>操作</td>"+
            "</tr>";
        };
        // 数组才能统一操作,sort reverse
        //'小鱼儿' --- 'xiaoyuer'汉字==>拼音 (插件)
    </script>
</body>
</html>