简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JS基础-JS的数据类型和访问/流程控制/JSON格式字符串和js对象相互转换
Blogger Information
Blog 57
fans 3
comment 0
visits 59792
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS基础-JS的数据类型和访问/流程控制/JSON格式字符串和js对象相互转换
岂几岂几
Original
678 people have browsed it

JS的数据类型和访问/流程控制/JSON格式字符串和js对象相互转换

1. JS的数据类型和访问

1.1. 原始类型

  • JS中的原始数据类型有: number , string , boolean ;

  • 声明变量使用 var 关键字.

  1.   <script>
  2.       /* 数字类型 */
  3.       var year = 2020;
  4.       /* 字符串类型 */
  5.       var name = 'zhangsan';
  6.       /* 布尔类型 */
  7.       var isUpdate = false;
  8.   </script>
  • 获取变量的数据类型使用 typeof . 使用方式: typeof 变量名 .
  1.   <script>
  2.       var site = 'php.cn';
  3.       // 使用typeof来获取变量的数据类型
  4.       var dataType = typeof site;
  5.       document.write(dataType);
  6.       /* result: string */
  7.   </script>

1.2 特殊类型

  • JS中两个特殊的值类型: null , undefined .

  • 当只声明变量, 没有初始化变量值时, 此时变量的值是 undefined . 即, var param; 等效于 var param = undefined; .

  1.   <script>
  2.       var param;
  3.       document.write(param);
  4.       /* result: undefined */
  6.       var param1 = null;
  7.       document.write(param1);
  8.       /* result: null */
  9.   </script>
  • 特别的: null == undefined 返回的是 true ; 而 null === undefined 则返回 false 
  1.   <script>
  2.       document.write(null == undefined);
  3.       /* result: true */
  4.       document.write(null === undefined);
  5.       /* result: false */
  6.   </script>
  • null 和 undefined 的区别: null 表示空对象; undefined 表示非对象类型的变量值为空/无.
  1.   <script>
  2.       // 获取null的数据类型
  3.       var dataType = typeof null;
  4.       document.write(dataType);
  5.       /* result: object */
  6.   </script>

  • null / undefined 转换为原始类型数据的值

    • null / undefined 转换为布尔值, 值转为为 false ; 
  1.   <script>
  2.       if (!null) document.write('我被输出了<br>');
  3.       if (!undefined) document.write('我被打印了');
  4.       /* result: 
  5.       我被输出了
  6.       我被打印了 */
  7.   </script>
  • null / undefined 转换为字符串时, 值转为: "null" / "undefined" .
  1.   <script>
  2.       document.write(null + '<br>');
  3.       document.write(undefined + '<br>');
  4.       /* result: 
  5.       null
  6.       undefined */
  7.   </script>
  • null 转为数值时, 值为: 0 ; undefined 则不能转为数字(输出: NaN). 
  1.   <script>
  2.       document.write(null + 100);
  3.       document.write(undefined + 100);
  4.       /* result: 
  5.       100
  6.       NaN
  7.       */
  8.   </script>

1.3 对象类型: array , object , function

  • 在js中, 除开 null 和 undefined , 所有数据类型都是对象, 包括原始类型.
  1. <script>
  2.     // 证明原始类型数据也是对象: 都能通过他们调用内置方法
  3.     var num = 3.1415926;
  4.     var name = 'zhangsan';
  5.     // 把num的值四舍五入, 保留3位小数
  6.     console.log(num.toFixed(3));
  7.     console.log(name.toUpperCase());
  8.     /* result:
  9.     3.142
  10.     ZHANGSAN
  11.     */
  12. </script>

1.3.1 数组类型

  • JS中的数组跟PHP中的索引数组类似
  1. <script>
  2.     // 定义数组
  3.     var player = ['James', 'Davis', 'Green', 'Rondo', 'Kuzma'];
  4.     document.writeln(player);
  5.     /* result: James,Davis,Green,Rondo,Kuzma James */
  7.     // 获取数组的中的元素
  8.     document.writeln(player[0]);
  9.     /* result: James */
  10. </script>
  • 判断变量是否为数组类型, 用 Array.isArray(变量名) , 因为 typeof 变量名 的返回值是 object , 不够具体.
  1. <script>
  2.     // 定义数组
  3.     var player = ['James', 'Davis', 'Green', 'Rondo', 'Kuzma'];
  4.     document.writeln('"typeof player" 的值是:' + (typeof player));
  5.     document.writeln('变量"player"的值' + (Array.isArray(player) ? '是' : '不是') + '数组');
  6.     /* result:
  7.     "typeof player" 的值是:object 
  8.     变量"player"的值是数组
  9.     */
  10. </script>

  • 数组循环

      1. for 循环 
  1.   <script>
  2.       var player = ['James', 'Davis', 'Green', 'Rondo', 'Kuzma'];
  3.       for (var index = 0; index < player.length; index++) {
  4.           document.write(player[index] + ", ");
  5.       }
  6.       /* result: James, Davis, Green, Rondo, Kuzma, */
  7.   </script>
    1. forEach 循环

    使用格式: array.forEach(function(当前遍历到的元素, 当前遍历到的元素在数组中的索引[可选], 受遍历的数组[可选]) {...}) 

  1.   <script>
  2.       var player = ['James', 'Davis', 'Green', 'Rondo', 'Kuzma'];
  3.       player.forEach(function(p, index) {
  4.           document.write("第" + (index + 1) + "位出场的是" + p + '<br>');
  5.       });
  6.       /*
  7.       第1位出场的是James
  8.       第2位出场的是Davis
  9.       第3位出场的是Green
  10.       第4位出场的是Rondo
  11.       第5位出场的是Kuzma
  12.       */
  13.   </script>

  • 数组函数

    • array.slice 函数

      用法: targetArr.slice(起始位置, 结束位置 + 1) : 获取JS数组中的”起始位置”到”结束为止”之间的元素

  1.     <script>
  2.         var player = ['James', 'Davis', 'Green', 'Rondo', 'Kuzma'];
  3.         // 返回前3个球员
  4.         document.write(player.slice(0, 3));
  5.         /* result : James,Davis,Green */
  6.     </script>

  • array.splice 函数

    类似PHP中的数组函数 splice , 可以用它实现对数组元素的增删改.

    使用语法: array.splice(起始位置, 元素个数[可选], 替换元素1[可选], 替换元素2[可选]...) ; 其中 替换元素1, 替换元素2... 可以以数组的形式传入: [替换元素1, 替换元素2...]

      1. 实现向当前数组中插入元素: targetArr.splice(起始位置, 0, 插入元素1, 插入元素2...) 
  1.     <script>
  2.         var player = ['James', 'Davis', 'Green', 'Rondo', 'Kuzma'];
  4.         // 在Davis后面插入Bradley, McGee
  5.         player.splice(2, 0, ['Bradley', 'McGee']);
  6.         document.write(player);
  7.         /* result: James,Davis,Bradley,McGee,Green,Rondo,Kuzma */
  8.     </script>
  1. - 2. 实现删除当前数组中的元素: `targetArr.splice(起始位置, 元素个数)` 
  1.     <script>
  2.         var player = ['James', 'Davis', 'Green', 'Rondo', 'Kuzma'];
  4.         // 删除Green, Rondo
  5.         player.splice(2, 2);
  6.         document.write(player);
  7.         /* result: James,Davis,Kuzma */
  8.     </script>
  1. - 3. 实现更新当前数组中元素的值: `targetArr.splice(起始位置, 元素个数, 替换后的值1, 替换后的值2[可选]...)` 
  1.     <script>
  2.         var player = ['James', 'Davis', 'Green', 'Rondo', 'Kuzma'];
  4.         // 把Davis, Green, Rondo更新为中文名
  5.         player.splice(1, 3, ['戴维斯', '格林', '隆多']);
  6.         document.write(player);
  7.         /* result: James,戴维斯,格林,隆多,Kuzma */
  8.     </script>

1.3.2 对象

  • JS中的对象跟PHP中的关联数组相似.

  • 定义对象

  1. <script>
  2.     // 创建对象-1
  3.     var player1 = {
  4.         name: 'James',
  5.         team: '湖人',
  6.         age: 35,
  7.         // JS中, 如果属性名含有非法字符, 则用双引号 `"` 将其括起来
  8.         "player info": {
  9.             height: '203',
  10.             weight: '113',
  11.             position: 'F-G'
  12.         }
  13.     };
  15.     // 以表格的形式打印对象
  16.     console.table(player1);
  18.     // 另一种定义对象属性的方式见下面的例子
  19. </script>

执行结果：

  • 访问对象属性, 有两种方式一种是: 对象名.属性名 ; 另一种是类似PHP中的关联数组: 对象名[属性名] . 还有非法字符的属性名, 只能用第二种方式访问.
  1.     <script>
  2.         // 创建对象-2
  3.         var player2 = {};
  4.         player2.name = "James";
  5.         player2.team = '湖人';
  6.         player2.age = 35;
  7.         player2["player info"] = {
  8.             height: '203',
  9.             weight: '113',
  10.             position: 'F-G'
  11.         };
  13.         // 访问对象属性
  14.         document.write('姓名:' + player2.name + '<br>');
  15.         document.write('球队:' + player2.team + '<br>');
  16.         document.write('年龄:' + player2['age'] + '<br>');
  17.         document.write('身高:' + player2['player info'].height + '<br>');
  18.         document.write('体重:' + player2['player info']['weight'] + '<br>');
  19.         document.write('司职:' + player2['player info']['position'] + '<br>');
  20.         /*
  21.         姓名:James
  22.         球队:湖人
  23.         年龄:35
  24.         身高:203
  25.         体重:113
  26.         司职:F-G
  27.         */
  28.     </script>

  • 遍历对象属性

    • 遍历对象方法1: 使用 for 属性名 in 对象 . 语法: for(对象键名 in 对象), 在遍历中, 用 对象名["属性名"] 的方式获取元素值更稳一些, 避免出现非法字符遍历报错. 
  1.     <script>
  2.         var player1 = {
  3.             name: 'James',
  4.             team: '湖人',
  5.             age: 35,
  6.             // JS中, 如果属性名含有非法字符, 则用双引号 `"` 将其括起来
  7.             "player info": {
  8.                 height: '203',
  9.                 weight: '113',
  10.                 position: 'F-G'
  11.             }
  12.         };
  14.         // for...in...遍历对象属性.
  15.         for (prop in player1) {
  16.             var value = player1[prop];
  17.             if (typeof value != 'object')
  18.                 document.write(prop + ': ' + value + '<br>');
  19.             else // 如果属性值是对象, 继续遍历
  20.                 for (prop1 in value) {
  21.                     var value1 = value[prop1];
  22.                     document.write(prop1 + ': ' + value1 + '<br>');
  23.                 }
  24.         }
  25.         /* result
  26.         name: James
  27.         team: 湖人
  28.         age: 35
  29.         height: 203
  30.         weight: 113
  31.         position: F-G
  32.         */
  33.     </script>
  • 遍历对象方法2: 使用 Object.keys(对象) 获取对象的属性名组成的数组, 再借助数组的 forEach 进行遍历.
  1. <script>
  2.     var player1 = {
  3.         name: 'James',
  4.         team: '湖人',
  5.         age: 35,
  6.         // JS中, 如果属性名含有非法字符, 则用双引号 `"` 将其括起来
  7.         "player info": {
  8.             height: '203',
  9.             weight: '113',
  10.             position: 'F-G'
  11.         }
  12.     };
  14.     // 获取属性名数组
  15.     var props = Object.keys(player1);
  16.     props.forEach(function(prop) {
  17.         var value = player1[prop];
  18.         if (typeof value != 'object')
  19.             document.write(prop + ': ' + value + '<br>');
  20.         else {
  21.             // 如果属性值是对象, 继续遍历
  22.             var props1 = Object.keys(value);
  23.             props1.forEach(function(prop1) {
  24.                 var value1 = value[prop1];
  25.                 document.write(prop1 + ': ' + value1 + '<br>');
  26.             });
  27.         }
  28.     });
  29.     /* result:
  30.         name: James
  31.         team: 湖人
  32.         age: 35
  33.         height: 203
  34.         weight: 113
  35.         position: F-G
  36.     */
  37. </script>
  38. </body>

1.3.3 函数

  • JS中的函数和PHP中的函数类似

  • JS中的函数类型有: 普通函数 , 匿名函数 , 立刻执行函数 .

    • 普通函数: function 函数名(参数列表) {函数体...} 
  1.   <script>
  2.       /* 普通函数 */
  3.       function sayHello(name) {
  4.           document.write('hello!' + name);
  5.       }
  7.       sayHello('zhangsan');
  8.       /* result: hello!zhangsan  */
  9.   </script>
  • 匿名函数, 又叫函数表达式: function(参数列表) {函数体...} ; 可以赋值给变量.
  1.   <script>
  2.       /* 匿名函数 */
  3.       var func = function(name) {
  4.           document.write('hello!' + name);
  5.       }
  7.       // typeof 函数的值是function, 不像数组, 返回object
  8.       document.write(typeof func);
  9.       /* result: function */
  11.       // 借助变量使用匿名函数
  12.       func('zhangsan');
  13.       /* result: hello!zhangsan  */
  14.   </script>
  • 立刻执行函数: 即写完后立刻执行(不用专门调用): (function(参数列表[可选]) {函数体...})(实参列表[可选]) .
  1.   <script>
  2.       (function(name) {
  3.           document.write('hello! ' + name);
  4.       })('lisi');
  5.       /* result: hello! lisi */
  6.   </script>

2. JS中的流程控制

  • JS中的流程控制跟PHP类似

2.1. 流程控制

  • 单分支, 就是 if 条件句, 语法:
  1. <script>
  2.     if (判断) {
  3.         // 判断为true时执行的代码块...
  4.     }
  5. </script>
  • 双分支, 就是 if...else... 条件句, 语法:
  1. <script>
  2.     if (判断) {
  3.         // 判断结果为true时执行的代码块
  4.     } else {
  5.         // 判断结果为false时执行的代码块
  6.     }
  7. </script>

  • 多分支, JS中的多分支同样有两种.

    • 一种是 if...else if...else... , 其中 else if 可以出现0到多次, 语法:
  1.   <script>
  2.       if (判断1) {
  3.           // 判断1结果为true时执行的代码块
  4.       } else if (判断2) {
  5.           // 判断1结果为false, 判断2结果为true时执行的代码块
  6.       } else if (判断N) {
  7.           // 判断(N-1)结果为false, 判断N结果为true时执行的代码块
  8.       } else {
  9.           // 判断N结果为false时执行的代码块
  10.       }
  11.   </script>
  • 另一种是 switch 语句. 语法:
  1.   <script>
  2.       switch (变量) {
  3.           case 值1:
  4.               // do something 1...
  5.               break; // 可选
  6.           case 值2:
  7.               // do something 2...
  8.               break; // 可选
  9.           case 值N:
  10.               // do something N...
  11.               break; // 可选
  12.           default:
  13.               // do something default...
  14.               break;
  15.       }
  16.   </script>

2.2 循环

  • for 循环
  1. <script>
  2. for(赋值语句; 判断语句; 更新值语句) {
  4.     // 循环体, 当判断语句执行结果为true时, 执行循环体中的代码, 否则, 结束循环...
  6. }
  7. </script>
  • while 循环
  1. <script>
  2. while(判断语句) {
  3.     // 循环体, 当判断语句执行结果为true时, 执行循环体中的代码, 否则, 结束循环...
  4. }
  5. </script>
  • do...while 循环
  1. <script>
  2.     do {
  3.         // 循环体, 先执行一遍循环体中的代码, 再执行判断, 当判断语句执行结果为true时, 继续执行循环体中的代码, 否则, 结束循环...
  4.     } while (判断语句);
  5. </script>

3. JS对象与JSON格式字符串之间的相互转换

3.1 JS对象转换为JSON格式字符串

  • 转换过程, 会忽略JS对象中的这些成员: 方法不会被转换, undefined 值属性不会被转换, 原型对象成员不会被转换.

  • 使用 JSON.stringify() 方法转换.

    • 使用方法1: JSON.stringify(JS对象) , 把对象转换为JSON字符串, 转换所有能转换的成员.
  1. <script>
  2.     var player = {
  3.         name: 'James',
  4.         age: 35,
  5.         // 是否自由球员
  6.         isFreeAgent: false,
  7.         "player info": {
  8.             height: 203,
  9.             weight: 113,
  10.             position: 'F-C'
  11.         },
  12.         // 退役日期
  13.         retireDate: null,
  14.         salary: undefined,
  16.         // 方法
  17.         getName: function() {
  18.             return this.name;
  19.         }
  20.     };
  22.     // 转换
  23.     var playerStr = JSON.stringify(player);
  25.     document.write(playerStr);
  26.     /* result: {"name":"James","age":35,"isFreeAgent":false,"player info":{"height":203,"weight":113,"position":"F-C"},"retireDate":null}  */
  27. </script>
  • 使用方法2: JSON.stringify(JS对象, 需转换的属性数组) , 只转换参数2指定的属性.
  1. <script>
  2.     var player = {
  3.         name: 'James',
  4.         age: 35,
  5.         // 是否自由球员
  6.         isFreeAgent: false,
  7.         "player info": {
  8.             height: 203,
  9.             weight: 113,
  10.             position: 'F-C'
  11.         },
  12.         // 退役日期
  13.         retireDate: null,
  14.         salary: undefined,
  16.         // 方法
  17.         getName: function() {
  18.             return this.name;
  19.         }
  20.     };
  22.     // 只转换name, age
  23.     var playerStr = JSON.stringify(player, ['name', 'age']);
  25.     document.write(playerStr);
  26.     /* result: {"name":"James","age":35} */
  27. </script>
  • 使用方法3: JSON.stringify(JS对象, function(遍历到的对象的属性名, 遍历到的对象的属性值)) , 遍历属性进行转换过程中, 使用参数2指定的回调函数先处理遍历到的属性值, 然后再对其进行转换; 有点类似PHP中的数组函数 array_walk .
  1.     <script>
  2.         var employee = {
  3.             name: 'zhangsan',
  4.             depart: '开发部',
  5.             sex: 'female',
  6.             age: 25,
  7.             isMarried: false,
  8.             hireDate: '2020-01-01',
  9.             fireDate: null,
  10.             salary: 8888
  11.         };
  13.         var empStr = JSON.stringify(employee, function(prop, value) {
  14.             switch (prop) {
  15.                 case 'salary':
  16.                     return '保密';
  17.                     break;
  18.                     // 函数内部可以调用外部变量, 直接拿employee来用
  19.                 case 'age':
  20.                     return employee['sex'] == 'female' ? '女孩的年龄不要猜' : value;
  21.                     break;
  22.                     // 不希望转换的属性, 返回undefined即可
  23.                 case 'hireDate':
  24.                     return undefined;
  25.                     break;
  26.                 default:
  27.                     return value;
  28.             }
  29.         });
  31.         document.write(empStr);
  32.         /* result: {"name":"zhangsan","depart":"开发部","sex":"female","age":"女孩的年龄不要猜","isMarried":false,"fireDate":null,"salary":"保密"} */
  33.     </script>
  • JSON.stringify() 的第三个参数, 是格式化json数据对象用的, 无关功能.
  1. <script>
  2.     var employee = {
  3.         name: 'zhangsan',
  4.         depart: '开发部',
  5.         sex: 'female',
  6.         age: 25,
  7.         isMarried: false,
  8.         hireDate: '2020-01-01',
  9.         fireDate: null,
  10.         salary: 8888
  11.     };
  13.     var empStr = JSON.stringify(employee, function(prop, value) {
  14.         return value;
  15.     }, 4);// 第三个参数值为4, 表示在属性前面添加4个空格
  17.     console.log(empStr);
  18.     /*
  19.     {
  20.         "name": "zhangsan",
  21.         "depart": "开发部",
  22.         "sex": "female",
  23.         "age": 25,
  24.         "isMarried": false,
  25.         "hireDate": "2020-01-01",
  26.         "fireDate": null,
  27.         "salary": 8888
  28.     }
  29.     */
  30. </script>

3.2 JSON格式字符串转换为JS对象

  • 使用JSON.parse(JSON字符串)函数
  1. <script>
  2. // 在js中, 可以通过在行末增加\来把字符串换行
  3. var empStr = '{\
  4.     "name": "zhangsan",\
  5.     "depart": "开发部",\
  6.     "sex": "female",\
  7.     "age": 25,\
  8.     "isMarried": false,\
  9.     "hireDate": "2020-01-01",\
  10.     "fireDate": null,\
  11.     "salary": 8888\
  12. }';
  14. // jsonStr => JS obj
  15. var empObj = JSON.parse(empStr);
  17. for(prop in empObj) {
  18.     document.write(eprop + ': ' + empObj[prop] + '<br>');
  19. }
  21. /*result:
  22. name: zhangsan
  23. depart: 开发部
  24. sex: female
  25. age: 25
  26. isMarried: false
  27. hireDate: 2020-01-01
  28. fireDate: null
  29. salary: 8888
  30. */
  31. </script>
  • JSON.parse(JSON字符串, function(prop, value) {...}): 可以给第二个参数传入一个回调函数, 把回调函数处理后的属性值作为转换后的JS对象的属性值.
  1. <script>
  2. // 在js中, 可以通过在行末增加\来把字符串换行
  3. var empStr = '{\
  4.     "name": "zhangsan",\
  5.     "depart": "开发部",\
  6.     "sex": "female",\
  7.     "age": 25,\
  8.     "isMarried": false,\
  9.     "hireDate": "2020-01-01",\
  10.     "fireDate": null,\
  11.     "salary": 8888\
  12. }';
  14. // jsonStr => JS obj
  15. var empObj = JSON.parse(empStr, function(prop, value) {
  16.     // 薪水保密
  17.     if(prop == 'salary') {
  18.         return '****';
  19.     }
  21.     return value;
  22. });
  24. for(prop in empObj) {
  25.     document.write(eprop + ': ' + empObj[prop] + '<br>');
  26. }
  28. /*result:
  29. name: zhangsan
  30. depart: 开发部
  31. sex: female
  32. age: 25
  33. isMarried: false
  34. hireDate: 2020-01-01
  35. fireDate: null
  36. salary: ****
  37. */
  38. </script>

学习心得

数据类型和访问, 流程控制是每一门变成语言都有的内容, 无他, 必须记住. JS对象和JSON字符串之间的转换, 非常重要, 因为很多网站前后端的数据交互都是使用JSON数据. 将JS对象转换为字符串, 才能把前端数据发送到服务端(还可以用序列化的方式); 而服务端返回的JSON数据, 也需要经过转换成JS对象后, 才能渲染到模板中.

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看来是理解了, 总结的很棒
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！