JS-JSON_js .json

一、JSON概述

(一) 概念

轻量级的数据交换格式，用于描述对象数据的语法的扩展

(二) 优点

紧凑、高效的格式、易于阅读、广泛支持、自我描述、格式灵活。

二、JSON结构和语法

(一) 结构

JSON可以保存多个key:value对。

{
  "name":	"xiao i",
  "age"	:	25,
  "sex" :	"男"
}

JSON数据类型的完整列表：

• string：用引号括起来的文字。
• number：正整数、负整数、浮点数。
• object：花括号括起来的键值对。
• array：一个或多个JSON对象集合。
• boolean：不带引号的true或false值。
• null：表示键值对没有数据，为null。

{
  "name":"xiao i",
  "age" : 25,
  "isMan": true,
  "child": {
    "name" : "xiao m",
    "age" : 3
  },
  "job":["React","vue"],
  "hubby":null
}

(二) 语法

• 键值对始终保存在双引号内。
• 切勿在key中使用连字符，而是使用下划线(_)、全部小写或驼峰式大小写。

三、JSON解析与序列化

JSON提供了两种方法：

• JSON.parse()：将数据转换为JavaScript对象。
• JSON.stringify()：将JavaScript对象转为字符串。

(一) JSON.parse()

JSON.parse(text,reviver)
// text:必需，一个有效的JSON字符串
// reviver:可选，转换结果的函数，将为对象的每个成员调用此函数
const json = '{"name":"xiao i","age":25,"sex":"男"}';
const myJson = JSON.parse(json);
console.log(myJson);	
//执行结果：{
// 	name:"xiao i",
//   age: 25,
//   sex: 男
// }
// JSON.parse的第二个参数revier，一个转换结果的函数，对象的每个成员调用此函数。
let json = '{"name":"xiao i","age":25,"sex":"男"}';
let myJson = JSON.parse(json,(key,value)=>{
  return (typeof value) === "number" ? String(value).padStart(3,"0") : value;
})
console.log(myJson);

(二) JSON.stringify()

JSON.stringify(value,replacer,space);
// value:必需，要转换的JavaScript数据(对象/数组)
// replacer:可选，用于转换结果的函数或数组。replacer为函数，则JSON.stringify将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。
// 如果此函数返回undefined，则排除成员，根对象的键就是一个空字符串""。如果replacer是一个数组，则仅转换该数组中具有键值的成员
// space:可选,文本添加缩进,空格和换行符.若spce是一个数值,则返回值文本在每个级别缩进指定数目的空格.
const json = { name : "xiao i", age: 25,sex : "男"};
const myJson = JSON.stringify(json);
console.log(myJson);		//执行结果:'{"name":"xiao i","age":"025","sex":"男"}'

(三) 异常处理

如果JSON文件或JSON中出现缺少逗号/引号等,就会抛出异常.使用try...catch包裹就可以将其封装成一个函数.

let myJson = {}
const json = '{"name":"xiao i","age":25,"sex":"男"}';
try{
  myJson = JSON.parse(json);
}catch(e){
  console.log(e.message);
}
console.log(myJson)		//执行结果:{name: 'xiao i', age: 25, sex: '男'}

(四) 其他操作

1. 删除键值对

使用delete运算符来删除键值对

const json = {"name" : "xiao i","age" : 25,"sex" : "男"};
delete json.sex;
console.log(json);		//执行结果:{name:"xiao i",age : 25};

2. 访问数组项

let json = {"name": "xiao i", "age" : 25,"sex" : "男","job":["React","Vue"]};
console.log(json.job[0]);		//执行结果:React

3. 遍历数组项

const json = {
  "name" : "xiao i",
  "age" : 25,
  "job"	: ["React","Vue"]
};
for(const item of json.job){
  console.log(item);		//React Vue
}

四、实用技巧

(一) 格式化JSON

JSON.stringify()支持第二个和第三个参数,可以借助第二,三个参数来格式化JSON字符串

let json = {"name":"xiao i","age" : 18,"city" : "北京"};
let myJson = JSON.stringify(json);
console.log(myJson);		//执行结果:{"name":"xiao i","age":18,"city":"北京"}
// 添加第二三个参数
const newJson = JSON.stringify(json,null,2);
console.log(newJson);
//执行结果:
// {
//   "name":"xiao i",
//   "age" :18,
//   "city":"北京"
// }
const newJson1 = JSON.stringify(json,null,"--");
console.log(newJson1);
执行结果:
{
--"name":"xiao i",
--"age" : 25,
--"city":"北京"
}

(二) 隐藏某些属性

JSON.stringify()支持第二个参数,用来处理JSON中的数据:

const user = {
  "name" : "Jenry",
  "password" : "123456",
  "age" : 25
};
console.log(JSON.stringify(user,(key,value)=>{
  if(key === "password"){
    return;
  }
  return value;
}));
// 输出结果:{"name":"Jenry","age":25}

(三) 过滤结果

通过JSON.stringify()方法中的第二个参数来获取指定值.

const user = {
  "name":"Jenry",
  "password":"12345",
  "age":25
}
console.log(JSON.stringify(user,['name','age']));		//执行结果:{"name":"Jenry","age":25}

五、JSON工具

• github:https://www.wpsshop.cn/w/知新_RL/article/detail/585193