JSON.stringify()
JSON.stringify() 是 JavaScript 中的一个内置方法,用于将一个 JavaScript 值(对象或值)转换为一个 JSON 字符串。这个方法对于在客户端和服务器之间传输数据特别有用,因为 JSON 是一种轻量级的数据交换格式,它基于文本,并且易于人阅读和编写,同时也易于机器解析和生成。
以下是一些 JSON.stringify() 的基本用法和示例:
基本用法
javascript复制代码
const obj = {
name: 'John',
age: 30,
city: 'New York'
};
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出: '{"name":"John","age":30,"city":"New York"}'
替换函数
你可以提供一个替换函数(replacer),用于在字符串化过程中过滤或转换数据:
javascript复制代码
function replacer(key, value) {
if (typeof value === 'string') {
return undefined; // 过滤掉所有字符串
}
return value;
}
const obj = {
name: 'John',
age: 30,
city: 'New York'
};
const jsonString = JSON.stringify(obj, replacer);
console.log(jsonString); // 输出: '{"age":30}'
缩进和空格
你可以使用第三个参数来指定缩进级别(或空格数):
javascript复制代码
const obj = {
name: 'John',
age: 30,
city: 'New York'
};
const prettyJsonString = JSON.stringify(obj, null, 2);
console.log(prettyJsonString);
// 输出:
// {
// "name": "John",
// "age": 30,
// "city": "New York"
// }
在这个例子中,我们传递了 null 作为第二个参数(因为我们不需要替换函数),并传递了 2 作为第三个参数,表示我们希望每个级别缩进两个空格。
注意事项
- 循环引用(即对象属性直接或间接地引用自己)会导致 JSON.stringify() 抛出一个错误。
- 函数和 undefined 会被 JSON.stringify() 忽略(在字符串化过程中不会包含它们)。
- 对象的 getter 方法在字符串化过程中不会被调用。
- 日期对象会被转换为一个字符串(按照 ISO 8601 格式)。
- NaN 和 Infinity 会被替换为 null。
- 数组和对象会被递归地字符串化。
希望这可以帮助你更好地理解 JSON.stringify() 方法!
JSON.parse()
JSON.parse() 是 JavaScript 中的一个内置方法,用于将一个 JSON 字符串转换回 JavaScript 对象或值。这个方法在处理从服务器接收到的 JSON 数据或在本地解析存储的 JSON 字符串时特别有用。
以下是一些 JSON.parse() 的基本用法和示例:
基本用法
javascript复制代码
const jsonString = '{"name":"John","age":30,"city":"New York"}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 输出: John
console.log(obj.age); // 输出: 30
console.log(obj.city); // 输出: New York
处理错误
由于 JSON.parse() 在遇到无效的 JSON 字符串时会抛出一个错误,因此通常建议使用 try...catch 语句来捕获和处理这些错误:
javascript复制代码
const jsonString = 'Invalid JSON string';
try {
const obj = JSON.parse(jsonString);
console.log(obj);
} catch (error) {
console.error('An error occurred:', error);
}
使用 reviver 函数
JSON.parse() 还接受一个可选的第二个参数,这是一个转换函数(通常被称为 reviver 函数),该函数可以在返回之前对解析的对象中的每个键值对进行处理:
javascript复制代码
const jsonString = '{"name":"John","age":30,"city":"New York"}';
function reviver(key, value) {
if (key === 'age' && typeof value === 'number') {
return value + 1; // 将年龄增加 1
}
return value;
}
const obj = JSON.parse(jsonString, reviver);
console.log(obj.name); // 输出: John
console.log(obj.age); // 输出: 31
console.log(obj.city); // 输出: New York
在这个例子中,reviver 函数在解析过程中检查了每个键值对。如果键是 'age' 并且值是数字类型,那么它返回的值将是原值加 1。
注意事项
- 字符串必须是一个有效的 JSON 格式,否则 JSON.parse() 将抛出一个错误。
- JSON 字符串中的属性名称必须用双引号(")括起来。使用单引号(')或没有引号都将导致解析错误。
- 如果 JSON 字符串包含注释或尾随逗号,那么 JSON.parse() 将无法正确解析它,因为这些特性不是 JSON 标准的一部分。
- JSON.parse() 只能解析 JSON 字符串,不能解析 JavaScript 对象字面量或表达式。例如,它不能解析 eval() 可以处理的代码字符串。
补充
当您尝试使用 JSON.parse() 解析一个无效的 JSON 字符串时,JavaScript 会抛出一个 SyntaxError。无效的 JSON 字符串可能包含以下常见问题:
- 字符串未用双引号括起来:在 JSON 中,所有的字符串必须使用双引号(")括起来,而不是单引号(')或没有引号。
json复制代码
// 无效的 JSON
{ name: 'John' }
// 有效的 JSON
{ "name": "John" }
- 使用了 JavaScript 注释:JSON 不支持注释。
json复制代码
// 无效的 JSON
{
// 这是一个注释
"name": "John"
}
// 有效的 JSON(没有注释)
{
"name": "John"
}
- 尾随逗号:JSON 对象或数组的最后一个元素后不应有逗号。
json复制代码
// 无效的 JSON
{
"name": "John",
"age": 30,
}
// 有效的 JSON
{
"name": "John",
"age": 30
}
- 使用了 JavaScript 类型的标识符,如 true、false 或 null,但拼写错误或格式错误。
json复制代码
// 无效的 JSON
{
"active": True
}
// 有效的 JSON
{
"active": true
}
- 数字格式错误,如使用逗号作为千位分隔符或包含非法字符。
json复制代码
// 无效的 JSON
{
"price": 1,000.50
}
// 有效的 JSON
{
"price": 1000.5
}
- 使用了 JavaScript 的特殊值,如 undefined、function 或 NaN,这些都是 JSON 不支持的。
json复制代码
// 无效的 JSON(尝试包含 JavaScript 类型的值)
{
"value": undefined
}
// 有效的 JSON(使用 null 表示空值)
{
"value": null
}
- 对象或数组的键名不是有效的字符串。
json复制代码
// 无效的 JSON(键名不是字符串)
{
age: 30
}
// 有效的 JSON(键名是字符串)
{
"age": 30
}
如果您尝试解析一个无效的 JSON 字符串,您应该使用 try...catch 语句来捕获 SyntaxError 并适当地处理它。例如:
javascript复制代码
const jsonString = '{ name: "John" }'; // 无效的 JSON
try {
const obj = JSON.parse(jsonString);
console.log(obj);
} catch (error) {
console.error('JSON 解析错误:', error);
}
在上面的示例中,因为 jsonString 是一个无效的 JSON 字符串,所以 JSON.parse() 会抛出一个 SyntaxError,该错误会被 catch 语句捕获并打印到控制台。