微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > JavaScrip中的基本数据类型，对象序列化为JSON字符串
博主信息
博文 64
粉丝 6
评论 2
访问量 102137
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JavaScrip中的基本数据类型，对象序列化为JSON字符串
王娇
原创
1053人浏览过

学习总结

1.js中的数据类型和php中的数据类型非常相似，不同之处js中的数组类似php中的关联数组，js对象中的属性类似php中的关联数组，访问对象属性用.操作符
2.js中的对象可以通过JSON.sringify(对象名)方法把一对象序列化一个json字符串，然后在网络中传输
3.将一个json字符串解析为一个js对象JSON.parse(json字符串，回调函数可选)

1，index.html中的Script脚本

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>JavaScrip基础知识</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //-----------------------------------------
  12.       //1.1JavaScript中的简单数据类型
  13.       //----------------------------------------------
  14.       var name = "angle";
  15.       var age = 32;
  16.       var isStudent = false;
  17.       var hobby = null;
  18.       var school = undefined;
  19.       //js中有3种简单数据类型，string,number,boolean
  20.       console.log(
  21.         typeof name,
  22.         name,
  23.         typeof age,
  24.         age,
  25.         typeof isStudent,
  26.         isStudent,
  27.         typeof hobby, //输出类型为object，值为null
  28.         hobby,
  29.         typeof school, //输出类型为undefined,值为undefined
  30.         school
  31.       );
  32.       //----------------------------------------------
  33.       //1.2JavaScript中的数组
  34.       //------------------------------------------------
  35.       //js中数组定义
  36.       var student = ["angle", 32, false];
  37.       //数组长度通过student.length获得
  38.       //通过for循环遍历数组
  39.       for (var i = 0; i < student.length; i++) {
  40.         console.log(student[i]);
  41.       }
  42.       //Array.isArray(变量名)判断一个变量是否是数组
  43.       if (Array.isArray(student)) {
  44.         console.log("student是一个数组");
  45.       } else {
  46.         console.log("student不是一个数组");
  47.       }
  49.       //如果script脚本放在head中
  50.       //window.document.body.innerHTML += "<li>" + value + "</li>";会报类型错误
  51.       //如果script脚本放在body中，则可以正常输出
  52.       student.forEach(function (value, number, arr) {
  53.         console.log(value);
  54.         window.document.body.innerHTML += "<li>" + value + "</li>";
  55.       });
  57.       //使用slice函数获取数组中的元素，返回结果还是一个数组
  58.       console.log("姓名:", student.slice(0, 1));
  59.       //使用splice函数实现数组元素的 增 删 改 查
  60.       console.log(student);
  61.       student.splice(2, 0, "male", "listen music"); //splice(从什么位置开始，要删除几个元素，要插入的元素，要插入的元素，...)
  62.       console.log(student);
  63.       var orihobby = student.splice(3, 1, ["reading book", "programming"]); //插入的数据还可以是一个数组
  64.       console.log(student);
  65.       console.log(orihobby); //splice返回的是删除的数组元素，类型也是一个数组
  66.       //---------------------------------------
  67.       //1.3 JavaScript中的对象
  68.       //------------------------------------------
  69.       //定义对象用{}
  70.       var stu = {
  71.         name: "angle", //对象中可以包含简单数据类型
  72.         age: 32,
  73.         sex: "male",
  74.         isStudent: false,
  75.         //对象中可以包含数组
  76.         hobby: ["reading book", "listen music", "programming"],
  77.         //对象也可以包含另一个对象
  78.         schoolInfo: {
  79.           grade: "05-01",
  80.           department: "计算机科学与技术",
  81.           school: "清华大学",
  82.         },
  83.       };
  84.       console.table(stu);
  85.       console.log("姓名：" + stu.name); //通过.操作符，获取对象中的属性
  86.       console.log("年龄：" + stu["age"]); //通过关联数组的方式访问对象属性
  87.       console.log("第一个爱好：" + stu["hobby"][0]); //通过二维数组方式访问对象属性
  88.       console.log("校名：" + stu["schoolInfo"]["school"]); //通过二维关联数组方式访问对象属性
  90.       //通过for(属性名称 in 对象名) {属性值 = 对象名[属性名]}语句遍历对象属性
  91.       for (key in stu) {
  92.         console.log(key, ":", stu[key]);
  93.       }
  94.       //上下两种方法结果相同
  95.       stuKey = Object.keys(stu); //Object.keys(对象名)获取对象的属性名称
  96.       stuKey.forEach(function (value) {
  97.         console.log(value, ":", this[value]);
  98.       }, stu);
  99.       //--------------------------------------------
  100.       //函数
  101.       //-------------------------------------------------
  102.       //定义函数,两数之间的和
  103.       function sum(start, end) {
  104.         var sum = 0;
  105.         //for循环
  106.         for (var i = start; i <= end; i++) {
  107.           sum += i;
  108.         }
  109.         return sum;
  110.       }
  111.       console.log("1-100的和为：", sum(1, 100));
  113.       //函数表达式 ，可以把函数赋给一个变量，通过变量调用函数
  114.       var sum = function (start, end) {
  115.         var sum = 0;
  116.         var i = start;
  117.         //while循环
  118.         while (i <= end) {
  119.           sum += i;
  120.           i++;
  121.         }
  122.         return sum;
  123.       };
  124.       console.log("1-10的和为：", sum(1, 10));
  126.       //直接调用函数
  127.       console.log(
  128.         "1-50的和为：",
  129.         (function (start, end) {
  130.           var sum = 0;
  131.           var i = start;
  132.           //do while 循环
  133.           do {
  134.             sum += i;
  135.             i++;
  136.           } while (i <= end);
  137.           return sum;
  138.         })(1, 50)
  139.       );
  141.       //--------------------------------------------
  142.       //JS对象序列化为json字符串
  143.       //--------------------------------------------
  144.       var stu1 = {
  145.         name: "hugn", //对象中可以包含简单数据类型
  146.         age: 32,
  147.         sex: "female",
  148.         isStudent: false,
  149.         //对象中可以包含数组
  150.         hobby: ["reading book", "listen music", "programming"],
  151.         //对象也可以包含另一个对象
  152.         schoolInfo: {
  153.           grade: "08-02",
  154.           department: "计算机科学与技术",
  155.           school: "人民大学",
  156.         },
  157.         //定义对象方法，返回名字
  158.         getName: function () {
  159.           return this.name;
  160.         },
  161.         //定义对象方法，更改名字
  162.         updateName: function (value) {
  163.           this.name = value;
  164.         },
  165.         updateAge: function (value) {
  166.           this.age = value;
  167.         },
  168.       };
  169.       console.table(stu1); //通过表格方式显示对象属性
  170.       var stuName = stu1.getName(); //获取对象中的名字
  171.       console.log(stuName);
  172.       stuName = "Eric";
  173.       stu1.updateName(stuName); //更改对象中的名字
  174.       console.log(stu1.getName());
  175.       //将js对象序列化为一个json字符串
  176.       var stuJson = JSON.stringify(stu1);
  177.       //序列化后的json字符串，只包含已经定义并赋值的属性值
  178.       console.log(stuJson);
  180.       //   stringify(JS对象，需要序列化的属性数组)
  181.       stuJson = JSON.stringify(stu1, ["name", "age", "sex"]);
  182.       console.log(stuJson);
  184.       stu1.updateAge(45); //更改年龄
  185.       //stringify(js对象，回调函数（对象属性名，对象属性值）)
  186.       stuJson = JSON.stringify(stu1, function (key, value) {
  187.         switch (key) {
  188.           case "sex":
  189.             if (value == "male") return "女";
  190.             else return "男";
  191.           case "age":
  192.             if (value < 30) return "还年轻，抓紧奋斗";
  193.             else if (value >= 30 && value < 40) return "已到而立之年";
  194.             else if (value >= 40 && value < 50) return "已到不惑之年";
  195.             else if (value >= 50 && value < 60) return "知天命";
  196.             else return "该退休啦！";
  197.           default:
  198.             return value;
  199.         }
  200.       });
  201.       console.log(stuJson);
  202.       //----------------------------------------------------
  203.       //将json字符串解析为一个js对象JSON.parse(json字符串,回调函数（属性名，属性值）)
  204.       //----------------------------------------------------
  205.       var jsObj = JSON.parse(stuJson, function (key, value) {
  206.         if (key == "sex") {
  207.           if (value == "男") return "female";
  208.           else return "male";
  209.         }
  210.         return value;
  211.       });
  212.       console.log(jsObj);
  214.       var stu2 = {
  215.         name: jsObj.name,
  216.         age: jsObj.age,
  217.         sex: jsObj.sex,
  218.         isStudent: jsObj.isStudent,
  219.       };
  220.       console.log(stu2);
  221.     </script>
  222.   </body>
  223. </html>
  • 代码运行效果图




批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：JSON.stringift, JSON.parse, 这二个方法, 可能很多人只知道第一个参数, 其实第二个参数也很重要
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录