数组与JSON转化

JavaScript 中数组与 JSON 字符串的相互转换

问题

jQuery 中如何将数组转化为 JSON 字符串,然后再转化回来?

解答

jQuery 本身没有提供 JSON 序列化方法,实际使用的是 JavaScript 原生的 JSON 对象。早期 jQuery 提供了 $.parseJSON() 方法,但已被废弃,现在推荐直接使用原生方法。

数组转 JSON 字符串

const arr = [1, 2, 3, { name: 'Tom', age: 18 }];

// 使用 JSON.stringify() 转换
const jsonStr = JSON.stringify(arr);

console.log(jsonStr);
// 输出: '[1,2,3,{"name":"Tom","age":18}]'

// 格式化输出(第三个参数指定缩进空格数)
const prettyJson = JSON.stringify(arr, null, 2);
console.log(prettyJson);
// 输出:
// [
//   1,
//   2,
//   3,
//   {
//     "name": "Tom",
//     "age": 18
//   }
// ]

JSON 字符串转数组

const jsonStr = '[1,2,3,{"name":"Tom","age":18}]';

// 使用 JSON.parse() 转换
const arr = JSON.parse(jsonStr);

console.log(arr);
// 输出: [1, 2, 3, { name: 'Tom', age: 18 }]

console.log(arr[3].name);
// 输出: 'Tom'

处理转换异常

// JSON.parse() 遇到非法 JSON 会抛出异常
function safeJsonParse(str) {
  try {
    return JSON.parse(str);
  } catch (e) {
    console.error('JSON 解析失败:', e.message);
    return null;
  }
}

// 测试
safeJsonParse('[1, 2, 3]');      // [1, 2, 3]
safeJsonParse('invalid json');   // null,并打印错误信息

jQuery 中的历史方法(已废弃)

// 早期 jQuery 写法(不推荐)
const arr = $.parseJSON('[1,2,3]');

// 现在应该直接使用原生方法
const arr = JSON.parse('[1,2,3]');

关键点

  • JSON.stringify() 将数组/对象转为 JSON 字符串
  • JSON.parse() 将 JSON 字符串转为数组/对象
  • JSON.parse() 解析非法 JSON 会抛出异常,需要 try-catch 处理
  • jQuery 的 $.parseJSON() 已废弃,直接用原生 JSON.parse()
  • JSON.stringify() 的第三个参数可以格式化输出