对比 jQuery 与 JSON.stringify

在前端开发中，将 JavaScript 对象转换为字符串的需求非常普遍。jQuery 中提供了 $.param() 方法来完成这个任务，而 JavaScript 标准库中则提供了 JSON.stringify() 方法。

基本用法

使用 $.param() 和 JSON.stringify() 的基本语法如下：

// 使用 $.param()
var obj = { name: 'Alice', age: 25 };
var str = $.param(obj);  // name=Alice&age=25

// 使用 JSON.stringify()
var obj = { name: 'Bob', age: 30 };
var str = JSON.stringify(obj);  // {"name":"Bob","age":30}

可以看出，$.param() 将对象转换成了 URL 字符串的形式，而 JSON.stringify() 则转换成了 JSON 字符串的形式。二者的使用方式略有不同，但都能满足将对象转换为字符串的需求。

深度比较

然而，当我们深入比较二者的功能时，就会发现它们之间存在一些差异。

处理数组

首先是对数组的处理。使用 $.param() 转换包含数组的对象时，数组元素会被组合成以逗号分隔的字符串：

var obj = { names: ['Alice', 'Bob', 'Charlie'] };
var str = $.param(obj);  // names=Alice,Bob,Charlie

而使用 JSON.stringify() 时，数组会被转换成 JSON 数组的形式：

var obj = { names: ['Alice', 'Bob', 'Charlie'] };
var str = JSON.stringify(obj);  // {"names":["Alice","Bob","Charlie"]}

这意味着，如果需要处理数组类型的数据，使用 JSON.stringify() 更加合适。

处理空值

其次是对空值的处理。在使用 $.param() 转换对象时，如果属性值为 null 或 undefined，则该属性会被忽略：

var obj = { name: 'Alice', age: null, sex: undefined };
var str = $.param(obj);  // name=Alice

而在使用 JSON.stringify() 时，空值会被转换成 null：

var obj = { name: 'Bob', age: null, sex: undefined };
var str = JSON.stringify(obj);  // {"name":"Bob","age":null,"sex":null}

因此，如果需要保留空值信息，使用 JSON.stringify() 更加可靠。

总结

综上所述，虽然 $.param() 和 JSON.stringify() 都可以将 JavaScript 对象转换为字符串，但它们的功能和应用场景并不完全重叠。一般来说，如果需要处理数组类型的数据或需要保留空值信息，则应使用 JSON.stringify()。

最后，我们再看一个更复杂的例子，展示如何将一个包含数组和空值的对象转换成 JSON 字符串：

var obj = {
  name: 'Charlie',
  age: null,
  skills: ['JavaScript', null, 'HTML', undefined]
};

var str = JSON.stringify(obj);  
// {"name":"Charlie","age":null,"skills":["JavaScript",null,"HTML",null]}

通过这个例子，我们深入了解了 $.param() 和 JSON.stringify() 这两个方法的差异和使用场景，为我们日常开发提供了一些指导意义。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12783