JSON.stringify函数(JavaScript)（json.stringify函数的作用）

25-02-11 21

如果您想了解JSON.stringify函数(JavaScript)的相关知识，那么本文是一篇不可错过的文章，我们将对json.stringify函数的作用进行全面详尽的解释，并且为您提供关于Java

如果您想了解JSON.stringify函数(JavaScript)的相关知识，那么本文是一篇不可错过的文章，我们将对json.stringify函数的作用进行全面详尽的解释，并且为您提供关于JavaScript -- JSON.parse 函数和 JSON.stringify 函数、JavaScript JSON.stringify 有趣的部分、JavaScript JSON.stringify()的使用总结、JavaScript toString、String和stringify方法区别的有价值的信息。

本文目录一览：

JSON.stringify函数(JavaScript)（json.stringify函数的作用）
JavaScript -- JSON.parse 函数和 JSON.stringify 函数
JavaScript JSON.stringify 有趣的部分
JavaScript JSON.stringify()的使用总结
JavaScript toString、String和stringify方法区别

JSON.stringify函数(JavaScript)（json.stringify函数的作用）

原文地址：http://technet.microsoft.com/zh-cn/sysinternals/cc836459(v=vs.94)

JSON.stringify 函数
JavaScript
JSON.stringify 函数 (JavaScript)

将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串。

JSON.stringify(value [,replacer] [,space])
参数
value
必需。要转换的 JavaScript 值（通常为对象或数组）。

replacer
可选。转换结果的函数或数组。

如果 replacer 为一个函数，则 JSON.stringify会调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 为一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value参数也为数组时，将忽略 replacer 数组。

space
可选。向返回值 JSON 文本添加缩进、空白和换行符以使其更易于读取。

如果省略 space，则将生成返回值文本，而没有任何额外空白。

如果 space 为一个数字，则返回值文本在每个级别缩进指定数目的空格。如果 space 大于 10，则文本缩进 10个空格。

如果 space 是非空字符串（例如“\t”），则返回值文本在每个级别中缩进字符串中的字符数。

如果 space 是长度大于 10 个字符的字符串，则使用前 10 个字符。

返回值
一个包含 JSON 文本的字符串。

异常
异常
条件

替换器参数无效
replacer 参数不是函数或数组。

值参数中不支持循环引用
value 参数包含循环引用。

备注
如果 value 具有 toJSON 方法，则 JSON.stringify 函数使用该方法的返回值。如果 toJSON方法的返回值为 undefined，则不转换成员。这使对象能够确定其自己的 JSON 表示形式。

将不会转换不具有 JSON 表示形式的值，例如 undefined。在对象中，将丢弃这些值。在数组中，会将这些值替换为null。

字符串值以引号开始和结束。所有 Unicode字符可括在引号中，除了必须使用反斜杠进行转义的字符。以下字符的前面必须是反斜杠：

反斜杠 (\)

Backspace (b)

换页 (f)

换行符 (n)

回车 (r)

水平制表符 (t)

四个十六进制数字 (执行顺序

在序列化过程中，如果 value 参数具有 toJSON 方法，则 JSON.stringify 会首先调用 toJSON方法。如果该方法不存在，则使用原始值。紧接着，如果提供 replacer 参数，则该值（原始值或 toJSON 返回值）将替换为replacer 参数的返回值。最后，根据可选的 space 参数向该值添加空白以生成最终的 JSON 文本。

示例
此示例使用 JSON.stringify 将
contact
对象转换为 JSON 文本。定义
memberfilter
数组以便只转换
surname
和
phone
成员。省略
firstname
成员。

var contact = new Object();
contact.firstname = "Jesper";
contact.surname = "Aaberg";
contact.phone = ["555-0100","555-0120"];

var memberfilter = new Array();
memberfilter[0] = "surname";
memberfilter[1] = "phone";
var jsonText = JSON.stringify(contact,memberfilter,"\t");
document.write(jsonText);
// Output:
// { "surname": "Aaberg","phone": [ "555-0100","555-0120" ]}
此示例使用带数组的 JSON.stringify。
replacetoupper
函数将数组中的每个字符串转换为大写形式。

var continents = new Array();
continents[0] = "Europe";
continents[1] = "Asia";
continents[2] = "Australia";
continents[3] = "Antarctica";
continents[4] = "north America";
continents[5] = "South America";
continents[6] = "Africa";

var jsonText = JSON.stringify(continents,replacetoupper);

function replacetoupper(key,value) {
returnvalue.toString().toupperCase();
}

//Output:
// "EUROPE,ASIA,AUSTRALIA,ANTARCTICA,norTH AMERICA,SOUTHAMERICA,AFRICA"
此示例使用 toJSON 方法将字符串值转换为大写形式。

JavaScript -- JSON.parse 函数和 JSON.stringify 函数

函数: 字符串转换成对象。

<Meta charset=

> Document

运行结果：

bed8f52.png" alt="">

2. JSON.stringify 函数: 可

<Meta charset=

> Document

运行结果：

JavaScript JSON.stringify 有趣的部分

参考语法

JSON.stringify(value[, replacer [, space]])

一般在使用JSON.stringify常见有三种情形

仅仅转换成字符串

var arr = [{"name":"张三", "age":99, "address":"武汉犄角旮旯里", fun:function(){console.log("我就是一个注释")}}]
var jsonstr = JSON.stringify(arr);
console.log(jsonstr);

这种简单方便，但是一点都不好看，所以我们可以继续改进下

添加字符

var arr = [{"name":"张三", "age":99, "address":"武汉犄角旮旯里", fun:function(){console.log("我就是一个注释")}}]
var jsonstr = JSON.stringify(arr, null," ");
console.log(jsonstr);

其实很简单，就是在第三个参数里添加了一个空格，当然你也可以添加\n or \t这样的特殊字符

过滤数据，修改replacer参数

var arr = [{"name":"张三", "age":99, "address":"武汉犄角旮旯里", fun:function(){console.log("我就是一个注释")}}]

var jsonstr = JSON.stringify(arr, ["age"]," ");
console.log(jsonstr);

其实还可以解决一个问题，JSON.stringify在转换字符串的时候默认是不会转换function，
所以可以传递第二个参数修改下。其实想过滤数据也是可以在replacer方法里实现，当你返回的是对象或数组，都会被序列化。所以可以判断value的类型是否返回就ok了

    function replacer(key, value) {

       if(typeof value ==="function"){
            return String(value);
        }
        return value;
      }

var arr = [{"name":"张三", "age":99, "address":"武汉犄角旮旯里", fun:function(){console.log("我就是一个注释")}}]

var jsonstr = JSON.stringify(arr, replacer," ");
console.log(jsonstr);

JavaScript JSON.stringify()的使用总结

一、使用方法

1、基本用法

JSON.stringify()可以把一个JavaScript对象序列化为一个JSON字符串。

let json1 = {
  title: "Json.stringify",
  author: [
    "浪里行舟"
  ],
  year: 2021
};
let jsonText = JSON.stringify(json1);

默认情况下，JSON.stringify()会输出不包含空格或缩进的JSON字符串，因此jsonText的值是这样的：

"{"title":"Json.stringify","author":["浪里行舟"],"year":2021}"

在序列化JavaScript对象时，所有函数和原型成员都会有意地在结果中省略。此外，值为undefined的任何属性也会被跳过。最终得到的就是所有实例属性均为有效JSON数据类型的表示。

在JSON.stringify()方法一共能接受3个参数，其中两个可选的参数（分别是第二、第三个参数）。这两个可选参数可以用于指定其他序列化JavaScript对象的方式。第二个参数是过滤器，可以是数组或函数；第三个参数是用于缩进结果JSON字符串的选项。单独或组合使用这些参数可以更好地控制JSON序列化。

2、第二个参数--过滤器

如果第二个参数是一个数组，那么JSON.stringify()返回的结果只会包含该数组中列出的对象属性。比如下面的例子：

let json1 = {
  title: "Json.stringify",
  author: [
    "浪里行舟"
  ],
  year: 2021,
  like: ''frontend'',
  weixin: ''frontJS''
};
let jsonText = JSON.stringify(json1, [''weixin'']);

在这个例子中，JSON.stringify()方法的第二个参数是一个包含一个字符串的数组："weixin"。它对应着要序列化的对象中的属性，因此结果JSON字符串中只会包含这个属性：

"{"weixin":"frontJS"}"

如果第二个参数是一个函数，则行为又有不同。提供的函数接收两个参数：属性名（key）和属性值（value）。可以根据这个key决定要对相应属性执行什么操作。这个key始终是字符串，只是在值不属于某个键/值对时会是空字符串。

const students = [
  {
    name: ''james'',
    score: 100,
  }, {
    name: ''jordon'',
    score: 60,
  }, {
    name: ''kobe'',
    score: 90,
  }
];

function replacer (key, value) {
  if (key === ''score'') {
    if (value === 100) {
      return ''S'';
    } else if (value >= 90) {
      return ''A'';
    } else if (value >= 70) {
      return ''B'';
    } else if (value >= 50) {
      return ''C'';
    } else {
      return ''E'';
    }
  }
  return value;
}
console.log(JSON.stringify(students, replacer, 4))

上面的代码，我们通过replacer将成绩从百分制替换为成绩等级。

值得注意的是，如果stringify的第二个参数为函数那么它的返回值如果是undefined，那么对应的属性不会被序列化，如果返回其他的值，那么用返回的值替代原来的值进行序列化。

3、第三个参数--字符串缩进

JSON.stringify()方法的第三个参数控制缩进和空格。在这个参数是数值时，表示每一级缩进的空格数。例如，每级缩进4个空格，可以这样：

let json1 = {
  title: "Json.stringify",
  author: [
    "浪里行舟"
  ],
  year: 2021
};
let jsonText = JSON.stringify(json1, null, 4);

这样得到的jsonText格式如下：

{
    "title": "Json.stringify",
    "author": [
        "浪里行舟"
    ],
    "year": 2021
}

JSON.stringify()在处理数据的时候同时考虑了数据转换和方便阅读，只不过，方便阅读这一点，常常被人忽略。

4、toJSON()方法--自定义JSON序列化

有时候，对象需要在JSON.stringify()之上自定义JSON序列化。此时，可以在要序列化的对象中添加toJSON()方法，序列化时会基于这个方法返回适当的JSON表示。

下面的对象为自定义序列化而添加了一个toJSON()方法：

let json1 = {
  title: "Json.stringify",
  author: [
    "浪里行舟"
  ],
  year: 2021,
  like: ''frontend'',
  weixin: ''frontJS'',
  toJSON: function () {
    return this.author
  }
};
console.log(JSON.stringify(json1)); // ["浪里行舟"]

注意，箭头函数不能用来定义toJSON()方法。主要原因是箭头函数的词法作用域是全局作用域，在这种情况下不合适。

二、使用场景

1、判断数组是否包含某对象，或者判断对象是否相等。

//判断数组是否包含某对象
let data = [
    {name:''浪里行舟''},
    {name:''前端工匠''},
    {name:''前端开发''},
    ],
    val = {name:''浪里行舟''};
console.log(JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1);//true

我们还可以使用JSON.stringify()方法,来判断两个对象是否相等。

// 判断对象是否相等
let obj1 = {
    a: 1,
    b: 2
  }
  let obj2 = {
    a: 1,
    b: 2,
  }
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)) // true

不过这种方式存在着较大的局限性，对象如果调整了键的顺序，就会判断出错！

// 调整对象键的位置后
let obj1 = {
    a: 1,
    b: 2
  }
  let obj2 = {
    b: 2,
    a: 1,
  }
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)) // false

2、使用localStorage/sessionStorage时

localStorage/sessionStorage默认只能存储字符串，而实际开发中，我们往往需要存储对象类型，那么此时我们需要在存储时利用json.stringify()将对象转为字符串，在取本地缓存时，使用json.parse()转回对象即可。

// 存数据
function setLocalStorage(key,val) {
    window.localStorage.setItem(key, JSON.stringify(val));
};
// 取数据
function getLocalStorage(key) {
    let val = JSON.parse(window.localStorage.getItem(key));
    return val;
};
// 测试
setLocalStorage(''Test'',[''前端工匠'',''浪里行舟'']);
console.log(getLocalStorage(''Test''));

3、实现对象深拷贝

开发中，有时候怕影响原数据，我们常深拷贝出一份数据做任意操作，使用JSON.stringify()与JSON.parse()来实现深拷贝是很不错的选择。

let arr1 = [1, 3, {
    username: '' kobe''
}];
let arr2 = JSON.parse(JSON.stringify(arr1));
arr2[2].username = ''duncan''; 
console.log(arr1, arr2)

这是利用JSON.stringify将对象转成JSON字符串，再用JSON.parse把字符串解析成对象，一去一来，新的对象产生了，新对象会开辟新的栈，实现深拷贝。

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数和正则，因为这两者基于JSON.stringify和JSON.parse处理后，得到的正则就不再是正则（变为空对象），得到的函数就不再是函数（变为null）了。

let arr1 = [1, 3, function () { }, {
  username: '' kobe''
}];
let arr2 = JSON.parse(JSON.stringify(arr1));
arr2[3].username = ''duncan'';
console.log(arr1, arr2)

三、使用注意事项

JSON.stringify()虽然功能很强大，但是有些属性无法被stringify，所以在开发中需注意以下几种情况，以免产生一些始料未及的BUG。

1、被转换值中有 NaN 和 Infinity

let myObj = {
  name: "浪里行舟",
  age: Infinity,
  money: NaN,
};
console.log(JSON.stringify(myObj));
// {"name":"浪里行舟","age":null,"money":null}

JSON.stringify([NaN, Infinity])
// [null,null]

2、被转换值中有 undefined、任意的函数以及 symbol 值

分为两种情况：

数组,undefined、任意的函数以及symbol值在序列化的过程中会被转换成 null

JSON.stringify([undefined, function () { }, Symbol("")]);
// ''[null,null,null]''

非数组,undefined、任意的函数以及symbol值在序列化的过程中会被忽略

JSON.stringify({ x: undefined, y: function () { }, z: Symbol("") });
// ''{}''

3、循环引用

如果一个对象的属性值通过某种间接的方式指向该对象本身，那么就是一个循环引用。比如：

let bar = {
  a: {
    c: foo
  }
};
let foo = {
  b: bar
};

JSON.stringify(foo)

这种情况下，序列化会报错的：

// 错误信息
Uncaught ReferenceError: foo is not defined
    at <anonymous>:3:8

4、含有不可枚举的属性值时

不可枚举的属性默认会被忽略：

let personObj = Object.create(null, {
  name: { value: "浪里行舟", enumerable: false },
  year: { value: "2021", enumerable: true },
})

console.log(JSON.stringify(personObj)) // {"year":"2021"}

四、总结

JSON.stringify()用于将JavaScript对象序列化为JSON字符串，这方法有一些选项可以用来改变默认的行为，以实现过滤或修改流程。不过也应该注意有些属性是无法被 stringify，所以开发时候应该避开这些坑！

以上就是JavaScript JSON.stringify()的使用总结的详细内容，更多关于JavaScript JSON.stringify()的使用的资料请关注其它相关文章！

您可能感兴趣的文章:

详解JavaScript对象序列化
JavaScript对象与JSON格式的转换及JSON.stringify和JSON.parse的使用方法
JS中的Error对象及使用JSON.stringify()序列化Error问题

JavaScript toString、String和stringify方法区别

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>JavaScript toString与String方法区别</title>
    </head>
    <body>
        <script type="text/javascript">
            //一 toString限制
            // 报错Cannot read property ''toString'' of undefined
            // console.log(undefined.toString())
            // 报错Cannot read property ''toString'' of undefined
            //console.log(null.toString())

            //二 String无限制
            console.log(String(undefined))
            console.log(String(null))

            //三 toString可根据进制编码
            let num = 10;
            console.log(num.toString(2))
        </script>
    </body>
</html>

二、stringify也可以实现字符串化，并且健壮性也良好。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>JavaScript toString、String和stringify方法区别</title>
    </head>
    <body>
        <script type="text/javascript">
            let a = {
                age: undefined,
                name: null
            }
            //输出 {"name":null}
            console.log(JSON.stringify(a))
            let b;
            //输出 undefined
            console.log(JSON.stringify(b));
            let c = null;
            //输出 null
            console.log(JSON.stringify(c))
        </script>
    </body>
</html>

关于JSON.stringify函数(JavaScript)和json.stringify函数的作用的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于JavaScript -- JSON.parse 函数和 JSON.stringify 函数、JavaScript JSON.stringify 有趣的部分、JavaScript JSON.stringify()的使用总结、JavaScript toString、String和stringify方法区别的相关信息，请在本站寻找。

本文标签：