随着现代应用程序的复杂性不断提高，数据转换已成为前端开发中不可避免的问题。早期的 JavaScript 开发者可能会使用手动解析和编写 JSON 数据的方式来完成数据转换，但这样的方式存在很多局限性和问题。ES10 新增了几个 JSON 方法，使得数据转换不再是繁琐的工作，而是变得更加方便和高效。本文将介绍这些新增方法的具体应用以及如何使用这些方法来解决现实场景中的数据转换问题。
新增方法
ES10 新增了两个 JSON 方法：JSON.stringify() 和 JSON.parse()，同时，对 JSON.stringify() 方法进行了扩展，引入了两个新的参数：replacer 和 space。下面对这些方法的功能进行简要说明。
JSON.stringify()
JSON.stringify() 方法用于将 JavaScript 对象或数组转换为 JSON 格式的字符串。它接受两个可选参数：
replacer参数： 是一个函数，用于过滤或转换转换后的 JSON 对象的属性；space参数：可以是字符串或数字，用于控制输出的格式。
用法如下：
JSON.stringify(obj, replacer, space);
其中，obj 是要转换为 JSON 的 JavaScript 对象或数组，replacer 和 space 都是可选参数。
JSON.parse()
JSON.parse() 方法将 JSON 格式的字符串转换为 JavaScript 对象。其用法如下：
JSON.parse(text, reviver);
其中，text 是要转换的 JSON 格式的字符串，reviver 是一个可选参数，是一个函数，用于转换转换后的 JavaScript 对象的属性。
实例应用
简化数据传输
在前端开发过程中，我们通常需要从后端获取数据。在很多情况下，后端会返回 JSON 格式的数据。我们可以使用 JSON.parse() 方法将字符串转换为 JavaScript 对象，以方便在应用程序中使用。
fetch('/api/data')
.then(response => response.text())
.then(text => {
const data = JSON.parse(text);
// do something with data
});反过来，如果前端需要将数据传输给后端，可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串再进行传输。
-- -------------------- ---- -------
------------------ -
------- -------
-------- -
--------------- ------------------
--
----- --------------------
--
-------------- -- -
-- ------ --------
---过滤或转换对象属性
有些时候，我们不需要转换对象中的所有属性，或者需要对属性进行特殊的处理。这时，我们可以使用 replacer 参数来过滤或转换对象属性。
下面的示例将过滤掉对象 person 中的 age 属性，只保留 name：
const person = {
name: 'Alice',
age: 30,
address: 'Beijing'
};
const jsonStr = JSON.stringify(person, ['name', 'address']);
console.log(jsonStr); // {"name":"Alice","address":"Beijing"}下面的示例将在序列化对象 person 时，将 age 属性的值加 1：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
-------- ---------
--
----- ------- - ---------------------- ----- ------ -- -
-- ---- --- ------ -
------ ----- - --
- ---- -
------ ------
-
---
--------------------- -- ---------------------------------------------控制输出格式
默认情况下，JSON.stringify() 方法输出的 JSON 字符串是压缩的，不易读。我们可以使用 space 参数控制输出的格式，以便更容易查看和调试数据。
-- -------------------- ---- ------- ----- ---- - - ----- -------- ---- --- -------- --------- -- -- ------------ -------------------------------- ----- ---- -- --- -- - -- ------- -------- -- ------ --- -- ---------- --------- -- - -- ------------- -------------------------------- ----- ------- -- --- -- - -- -------- -------- -- ------- --- -- ----------- --------- -- -
总结
本文介绍了 ES10 新增的 JSON.stringify() 和 JSON.parse() 方法，在前端数据转换中的实际应用。通过这些方法，我们可以更方便、高效地进行数据转换，并在实际开发中解决一些问题。建议开发者在开发中使用这些方法，以便更好地管理和处理数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6490057448841e9894e2c29e