前端基础的讲解-JS(22)

什么是JSON?

1.json 是一种轻量级的数据交换格式

简单来说:json 就是一种在各个编程语言中流通的数据格式,负责不同编程语言中的数据传递和交互。

类似于:

国际通用语言 - 英语

中国 56 个民族不同地区的通用语言 - 普通话

json 在 js 中提供了两种方法

  • JSON.parse()-将 JSON 数据转换为对象或数组
  • JSON.stringify()-将对象或数组转换为 JSON 数据
javascript 复制代码
let  data  =  {name:'张三',age:18};
 console.log(data);  //  对象
let  str  =  JSON.stringify(data); 
console.log(str);  //  json 数据
let  obj  =  JSON.parse(str) 
console.log(obj);  //  对象

JSON 数据的格式:

{"name":" 张三","age":19} ["张三","李四","王五","赵六"]

以上是两种最简单的 json,样式与对象和数组的语法基本相同。

JSON 数据注意事项:

  1. json 是一种纯字符数据,不属于任何编程语言。
  2. json 的数据可以用花括号 {} 或中括号 [] 包裹,对应 js 中的 object 和 array。
  3. json 中键值对的键,必须用双引号""包裹,单引号都不行。
  4. json 中键值对的值,不允许出现 function、undefined、NaN,但可以有 null。
  5. json 数据结束后,不允许出现没有意义的符号,如:{"name":"张三","age":18 , },注意数据结尾部分 18 后面的逗号,不允许出现。

如果直接写在 js 文件中,需要以单引号将 JSON 数据包裹,以示为字符。

javascript 复制代码
let  data  =  '{"name":"张三","age":18}';
 console.log(data);  //  json 数据
let  obj  =  JSON.parse(data) ;
console.log(obj);  //  js 对象

不过 json 数据一般都存放在 json 文件中,可以在项目的 js 文件夹下创建一个 xxx.json 文件

json 除了作为不同编程语言之间通用数据格式以外,还可以将我们的数据转为 json 格式存储到 localStorage、sessionStorage 或 cookie 中。更方便我们对数据的管理。

相关推荐
CodeGuru4 分钟前
UniApp Vue3 生成海报并分享到朋友圈
前端
三原4 分钟前
附源码:三原管理系统新增俩种常用布局
java·前端·vue.js
布局呆星4 分钟前
Vue3 | 组件化开发---组件插槽与通信
前端·javascript·vue.js
DyLatte7 分钟前
当我想把所有角色都做好时,就开始内耗了
前端·后端·程序员
a11177627 分钟前
汽车展厅项目 开源项目 ThreeJS
前端·开源·html
阳火锅1 小时前
Element / AntD 官方都没做好的功能,被这个开源小插件搞定了!
前端·vue.js·面试
大阳光男孩1 小时前
Uniapp+Vue3树形选择器
前端·javascript·uni-app
沙振宇1 小时前
【Web】使用Vue3+PlayCanvas开发3D游戏(九)纹理视觉效果
前端·游戏·3d·纹理
前端 贾公子1 小时前
uniapp中@input修改input内容不生效 | 过滤赋值无效 | 连续非法字符不更新的问题
开发语言·前端·javascript
写不来代码的草莓熊1 小时前
el-date-picker ,自定义输入数字自动转换显示yyyy-mm-dd HH:mm:ss格式 【仅双日历 datetimerange专用】
开发语言·前端·javascript