6.JSON.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <!--
  10. JSON: JavaScript Object Natation
  11. js对象 表示 数据结构
  12. -->
  13. <script>
  14. // js对象
  15. var obj = {
  16. name: "Lucy",
  17. age: 19,
  18. };
  19. // json对象
  20. /***
  21. * var 声明对象
  22. * var obj = "{'属性名':'属性值'}"
  23. * 注意:单引包双引
  24. */
  25. var obj1 = "{'name':'LiLi'}";
  26. // console.log(obj);
  27. // console.log(obj1);
  28. var arr = [
  29. { id: 1, name: "孙悟空" },
  30. { id: 2, name: "猪八戒" },
  31. { id: 3, name: "哪吒" },
  32. ];
  33. console.log(arr, "arr");
  34. var arr1 =
  35. '[{"id":"1","name":"孙悟空"},{"id":"2","name":"猪八戒"},{"id":"3","name":"哪吒"}]';
  36. console.log(arr1, "arr1");
  37. // js转json JSON.stringify
  38. var arr2 = JSON.stringify(arr);
  39. console.log(arr2, "arr2");
  40. // json转js JSON.parse
  41. var arr3 = JSON.parse(arr2);
  42. console.log(arr3, "arr3");
  43. var arr4 = JSON.parse(arr1);
  44. console.log(arr4, "arr4");
  45. /**
  46. * 堆:引用数据类型
  47. * 栈: 型 引用数据类型的指针
  48. * 深浅拷贝:
  49. */
  50. var obj3 = {
  51. name: "12",
  52. };
  53. obj4 = obj3;
  54. obj3 = JSON.stringify(obj3);
  55. var obj4;
  56. obj4.name = "21";
  57. // obj4 = {
  58. // name:"21"
  59. // }
  60. // obj4 = JSON.stringify(obj4);
  61. // obj4 = '{"name":"10"}'
  62. console.log(obj4, "obj4");
  63. console.log(obj3, "obj3");
  64. var obj2;
  65. obj2 = obj;
  66. console.log(obj2);
  67. // 深拷贝:一个对象复制另一个对象的内容 修改当前对象 原对象不发生改变
  68. // obj2 = '{"name":"小明","age":"22"}'
  69. // 浅拷贝:一个对象复制另一个对象的内容 修改当前对象 原对象发生改变;
  70. // obj2.name ='画画';
  71. obj2 = {
  72. name: "哈哈",
  73. age: 10,
  74. };
  75. console.log(obj2, "obj2");
  76. console.log(obj, "obj");
  77. </script>
  78. </body>
  79. </html>