HTML之JavaScript使用JSON

HTML之JavaScript使用JSON

复制代码
    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。
    JSON是JavaScript对象的字符串表示法,它使用文本表示一个js对象的信息,可以将json字符串转换为js对象,也可以将js对象转换为json字符串
    JSON的应用场景:
        1.数据交换
        2.前后端数据交互 最多
        3.存储数据
        4.配置文件
        5.服务端返回数据
        6.本地存储
        7.序列化和反序列化
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        Json的格式语法
            var personStr = '{"属性名":"属性值","属性名":{"属性名":"属性值"},"属性名":[10,20...],...}';
            属性名必须用双引号包裹("")
            属性值是字符串的话 必须用双引号包裹(""),数字可以不处理
        */
       // 这是一个json格式的字符串 
       var personStr = '{"name":"张三","age":18,"dog":{"dname":"旺财","dage":3},"friends":["李四","王五","赵六"]}';
       console.log(personStr);
       console.log(typeof personStr);// string
       console.log(personStr.name);// undefined
       // 将json格式的字符串转换为json对象  使用JSON.parse()方法
       var personObj = JSON.parse(personStr);
       console.log(personObj);
       console.log(typeof personObj);// object
       console.log(personObj.name);// 张三
       // 将json对象转换为json格式的字符串  使用JSON.stringify()方法
         var personStr1 = JSON.stringify(personObj);
         console.log(personStr1);
         console.log(typeof personStr1);// string
    </script>
</head>
<body>
    
</body>
</html>
相关推荐
叫我一声阿雷吧17 小时前
JS 入门通关手册(45):浏览器渲染原理与重绘重排(性能优化核心,面试必考
javascript·前端面试·前端性能优化·浏览器渲染·浏览器渲染原理,重排重绘·reflow·repaint
Mike_66617 小时前
txt_json和xml_json
xml·python·json
大家的林语冰17 小时前
《前端周刊》尤大开源 Vite+ 全家桶,前端工业革命启动;尤大爆料 Void 云服务新产品,Vite 进军全栈开发;ECMA 源码映射规范......
前端·javascript·vue.js
DevOpenClub17 小时前
语义化获取站点 JSON 结构内容 API 接口
json
jiayong2317 小时前
第 8 课:开始引入组合式函数
前端·javascript·学习
天若有情67318 小时前
【C++原创开源】formort.h:一行头文件,实现比JS模板字符串更爽的链式拼接+响应式变量
开发语言·javascript·c++·git·github·开源项目·模版字符串
yuki_uix19 小时前
重排、重绘与合成——浏览器渲染性能的底层逻辑
前端·javascript·面试
止观止19 小时前
拥抱 ESNext:从 TC39 提案到生产环境中的现代 JS
开发语言·javascript·ecmascript·esnext
时寒的笔记19 小时前
js逆向7_案例惠nong网
android·开发语言·javascript
吴声子夜歌19 小时前
ES6——Generator函数详解
前端·javascript·es6