js中自定义对象、json对象、json字符串、普通js对象 --js学习那本书上的

最新推荐文章于 2023-05-14 20:53:57 发布

忆水思寒

最新推荐文章于 2023-05-14 20:53:57 发布

阅读量247

点赞数

分类专栏： C#

原文链接：https://blog.csdn.net/IT_CREATE/article/details/85072384

版权

C# 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

4.7 自定义对象

JS除了内置对象之外，还允许我们程序自己定义属于我们自己的对象，在JS中自定义对象的方式有2种：通过构造器创建对象，通过初始化器创建对象。

4.7.1 构造器创建对象（原生JS对象）

构造器，就是一个普通的函数，函数中可以定义0到N个参数，具体的代码如下：

/*对象构造器，就是一个普通函数*/
    function Student(stuName,age,password,gender){
       /*定义对象的属性*/
        this.stuName = stuName;
        this.age = age;
        this.password = password;
        this.gender = gender;

        /*定义对象的方法*/
        this.study = function(){
            console.log(this.stuName + "写的方法！")
        }
    }

4.7.1.1 创建对象

//使用该对象
// var stu = new Student("胡帅",18,'123456',1);
    var stu = new Student();
    stu.stuName = "胡帅";
    stu.age = 18;
    stu.gender = 1;
    stu.password = "123456";

4.7.1.2 动态添加属性和行为

//如果需要给胡帅这个对象，动态的添加属性
    Student.prototype.address = null;
    stu.address = "九眼桥1号桥洞！";

    //如果需要给胡帅这个对象，动态的添加行为
    Student.prototype.playGame = function(game){
        console.log(this.stuName + "玩[" + game +"]游戏！")
    }

4.7.1.3 使用对象

console.log(stu)
stu.study();//调用胡帅学习的行为
stu.playGame("老鹰捉小鸡");

//调用某一个属性
console.log(stu.stuName)

4.7.2 对象初始化器方式（生成JS对象）

/*使用对象初始化器创建一个新的对象*/
var stu = {
    /*定义对象的属性*/
    stuName: "胡帅",
    age: 18,
    gender: 1,
    password: "123456",
    /*定义对象的行为*/
    study: function () {
        console.log(this.stuName + "正在打游戏！");
    }
};
//使用学生对象
console.log(stu.stuName);

//定义一个JS对象，对象属性中可以包含其他对象，如下面的妻子，可以包含数组，如他儿子们对象的数组
var person = {
    userName: "胡帅",
    wife: {userName: "赵铁锤", age: 28},
    sons: [{userName: "狗蛋儿"}, {userName: "二狗蛋"}, {userName: "小狗蛋"}],
    kiss: function () {
        console.log(this.userName + "给他妻子" + this.wife.userName + "说：妹妹，来波尔一个！！！")
    },
    gun: function () {
        console.log(this.userName + "给他的儿子说：儿子，去玩泥巴！！！")
    }
};

/*属性调用*/
person.userName;
person.wife.name;

person.sons[0].userName;

/*行为调用*/
person.gun();
person.kiss();

4.7.2.1 JS对象的格式

1、所有的数据都是以KV键值对结构方式存在
2、KV键值对需要使用冒号分割，每个成对的KV键值对需要使用逗号进行分割
3、花括号来描述一个完整的JS对象
4、中括号来描述一个完成的数组对象

4.7.2.2 JS对象使用

JS对象的使用，很简单，语法如下:
Object.属性名|方法名();

以上的这些写法只是将原生的js对象利用更加简单的方式进行书写，且更加容易阅读，不作为数据传送，只是一种写法

4.7.3 JSON简单介绍

JSON在JS中，也是一种对象的描述方式，它的作用跟XML描述对象的一样。只不过XML描述对象更加复杂，解析起来更加困难，所以我们一般推荐大家使用JSON来描述一个对象，它是一种轻量级的文本数据转换格式。

它跟XML都是常见的数据描述手段，但是它们区别在于：

1、它不需要像XML那样去定义一系列的标签，也不需要提供对应的标签解析程序
2、它的内容更短更小，传输时花费的网络代价就非常的小，传输速度也就更加的快

4.7.4 JSON作为数据传输

JSON作为数据传输格式的时候我们要注意了，JSON格式的的数据是键值对的形式，同时不能含有方法函数，同时键必须用双引号包含起来，值可以是数值(10进制) ,字符串(双引号),布尔值和null,也可以是数组,符合JSON的对象，不能是函数,NaN,Infinity,-Infinity和undefined，因为传输数据主要就是靠这类明确用来保存数据值的属性，属性之间用逗号“，”隔开，同时属性最后不能有逗号。以下这种格式的写法称为json对象，但它也是js对象，json对象只是js对象的一种写法而已。

如：


 
 
   
   
    
    
   
   
   
   
    
    
     
     var data = {
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     "name":
     
     "张三",
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     "age":
     
     18,
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     "brother":{ 
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     "name":
     
     "张二",
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     "age":
     
     18},
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     "sister"::[{ 
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     "name":
     
     "张萌",
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     "age":
     
     18},{ 
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     "name":
     
     "张倩",
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     "age":
     
     18}]
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     }

这种JSON格式的对象（JSON对象）就是用来做为json格式数据传输的，如果作为消息形式传送至服务器的话就可已使用普通JS对象，不要包含方法。如：


 
 
   
   
    
    
   
   
   
   
    
    
     
     var person = {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         
     
     userName: 
     
     "胡帅",
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     age:
     
     30,
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         
     
     wife: {
     
     userName: 
     
     "赵铁锤", 
     
     age: 
     
     28},
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         
     
     sons: [{
     
     userName: 
     
     "狗蛋儿"}, {
     
     userName: 
     
     "二狗蛋"}, {
     
     userName: 
     
     "小狗蛋"}]
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     };

区别	JSON	Javascript对象
含义	仅仅是一种数据格式	表示类的实例，一种javascript的引用类型
传输	可以跨平台数据传输，速度快，作为json格式传输：application/json，以json字符串的形式，利用ajax	可作为消息的形式发送给服务器：multipart/form-data，利用ajax，传输对象
表现	1.简直对方式，键必须加双引号 <p>2.值只能是数值(10进制) ,字符串(双引号),布尔值和null,也可以是数组,符合JSON的对象不能是方法函数，NaN,Infinity,-Infinity和undefined</p> <p>3.最后一个值后面不能有逗号</p> </td> <td> <p>1.键值对方式，键可允许加单引号，双引号，也可以不加</p> <p>2.值可以是函数、对象、字符串、数字、boolean 等javascript 中的任意值</p> <p>3.可以有逗号</p> </td> </tr><tr><td>相互转换</td> <td> <p>Json字符串转换Js对象</p> <p>1.JSON.parse(JsonStr);(不兼容IE7)</p> <p>2.eval("("+jsonStr+")");(兼容所有浏览器，但不安全，会执行json里面的表达式?)</p> </td> <td> <p>js对象转换Json字符串</p> <p>JSON.stringify(jsObj);</p> </td> </tr></tbody></table></div><p><strong><span style="color:#f33b45;">注：json仅仅是一种格式，json对象其实是按照既定规则书写的js对象，json对象就是js对象</span></strong></p>

JSON对象调用

同JS对象的调用方式相同，语法如下：

jsonObject.属性名


 
 
   
   
    
    
   
   
   
   
    
    
     
     //如调用上面的json对象
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     console.log(data.name);
     
     //打印 张三

JSON格式的字符串与JSON对象

JSON格式的字符串：

（简单说就是在json对象外面包裹了单引号，变成字符串（属性必须用双引号包裹）；就是说，在浏览器控制台利用console.log( )打印该字符串，显示为下面这种格式（json对象书写的代码的样式）：

{"docName":"张","age":18,"page":1,"rows":5}

例子：


 
 
   
   
    
    
   
   
   
   
    
    
     
     var txt = 
     
     '{ "employees" : [' +
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     '{ "firstName":"Bill" , "lastName":"Gates" },' +
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     '{ "firstName":"George" , "lastName":"Bush" },' +
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     '{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

var obj = eval ("(" + txt + ")");

转成对象之后，就可以利用对象的调用方式进行取值了。因为后台可能传输上来的是json格式的字符串，所以需要用这种方式进行解析。

注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json字符串中的表达式。

1. jQuery插件支持的转换方式

$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成js对象，必须是json格式的字符串

2.jquery.json.js插件支持的转换方式

$.toJSON(jsonobj);//可以将js对象转换成json字符串

3. 浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器：

JSON.parse(jsonstr); //可以将json字符串转换成js对象，必须是json格式的字符串
JSON.stringify(jsonobj); //可以将js对象转换成json字符串

JSON.stringify 函数

作用：把对象转成JSON字符串，因此会忽略属性值不符合JSON 的字段


 
 
   
   
    
    
   
   
   
   
    
    
     
     var test = {
    
    
   
   

   
   
    
    
   
   
   
   
    
         
     
     one : 
     
     'Good',
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     'two' : 
     
     'Man',
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     'three' : 
     
     undefined,
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     'four' : [ 
     
     1, 
     
     2 ],
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     'five' : 
     
     function() {
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     return 
     
     'test'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         } 
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     }
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     JSON.stringify(test); 
     
     //'{"one":"Good","two":"Man","four":[1,2]}'

忆水思寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中自定义对象、json对象、json字符串、普通js对象 --js学习那本书上的

4.7 自定义对象JS除了内置对象之外，还允许我们程序自己定义属于我们自己的对象，在JS中自定义对象的方式有2种：通过构造器创建对象，通过初始化器创建对象。 4.7.1 构造器创建对象（原生JS对象）构造器，就是一个普通的函数，函数中可以定义0到N个参数，具体的代码如下：/*对象构造器，就是一个普通函数*/    function Student(stuNam...
复制链接

扫一扫

专栏目录