JSON.stringify

JSON.stringify是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串。

1.方法的定义

JSON.stringify(value,replace,space)

参数一：将要转换成JSON字符串的值

参数二：可选，为函数时，被序列化的值的每个属性都会经过该函数的转换和处理；

              为数组时，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中。

参数三：可选，格式化输出，用于美化输出。

               为数字时，表示每个属性前面添加n个空格（最多不超过10个）；

               为字符串时，则该字符串会添加在每行前面（最多不超过10个）。

返回值：JSON字符串

2.方法的使用

第一个参数

JSON.stringify(true); // 'true'
JSON.stringify({name: "Sara",age: 14}); // 输出结果:  "{"name":"Sara","country":14}"
JSON.stringify("json string!"); // 输出结果： ""json string!""
JSON.stringify([1,2,"open","the","door"]); // 输出结果： "[1,2,"open","the","door"]"
JSON.stringify([new Number(1), new String("false"), new Boolean(false)]); 
// '[1,"false",false]'

// 单独出现undefined、任意的函数以及 symbol 值,会返回undefined
// 在数组中会返回null值；在对象中会被忽略
JSON.stringify(function(){}); //undefined
JSON.stringify({x: undefined, y: Object, z: Symbol("")}); // '{}'
JSON.stringify([undefined, Object, Symbol("")]); // '[null,null,null]' 

// 正则对象会被转换成空对象
JSON.stringify(/foo/) // "{}"

// 不可枚举的属性会被忽略
let obj = {};
Object.defineProperties(obj, {
  'foo': {
    value: 1,
    enumerable: true
  },
  'bar': {
    value: 2,
    enumerable: false
  }
});
JSON.stringify(obj); // {"foo":1}

第二个参数

// 函数参数，更改默认的字符串化的行为
function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}
let foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
let jsonString = JSON.stringify(foo, replacer); //"{"week":45,"month":7}"

// 数组参数，指定需要转成字符串的属性
JSON.stringify(foo, ["Mozilla", 7]); // "{"foundation":"Mozilla","month":7}"


// 多级嵌套的对象
let o1 = {a: {b:1}};
// 1.递归处理所有的键
function f(key, value) {
  // 处理三次，依次输出 []:{"a":{"b":1}}；  [a]:{"b":1}；   [b]:1；
  console.log("["+ key +"]:" + JSON.stringify(value));
  return value;
}
JSON.stringify(o1, f); // "{"a":{"b":1}}"

let o2 = {a: 1};
// 2.递归处理中，每一次处理的对象，都是前一次返回的值。
// 函数修改了对象o2为{b:2},接着JSON.stringify方法就递归处理修改后的对象o2,
// 此时key为b，value为2，所以value*2=4，即结果为{b:4}
function f(key, value){
  if (typeof value === "object"){
    return {b: 2};
  }
  return value*2;
}
JSON.stringify(o2,f); // '{"b":4}'

// 3.如果处理函数返回undefined或没有返回值，则该属性会被忽略。
function f(key, value) {
  if (typeof(value) == "string") {
    return undefined;
  }
  return value;
}
JSON.stringify({ a:"abc", b:123 }, f); // '{"b":123}'

第三个参数

JSON.stringify({ a: 2 }, null, " ");   // '{\n"a": 2\n}'
// 数字参数
JSON.stringify({ a: 2 }, null, 2);   // '{\n  "a": 2\n}'

// 字符串参数
JSON.stringify({ p1:1, p2:2 }, null, "|-");
// "{
// |-"p1": 1,
// |-"p2": 2
// }"

//\t表示用制表符进行缩进
JSON.stringify({ uno: 1, dos : 2 }, null, '\t')
// '{            \
//     "uno": 1, \
//     "dos": 2  \
// }' 

JSON.stringify 方法处理的对象，包含一个 toJSON 方法

let obj = {
  foo: 'foo',
  toJSON: function () {
    return 'bar';
  }
};
JSON.stringify(obj);      // '"bar"'
JSON.stringify({x: obj}); // '{"x":"bar"}'

// Date对象就部署了一个自己的toJSON方法。
JSON.stringify(new Date("2011-07-29")); // "2011-07-29T00:00:00.000Z"

// toJSON方法的一个应用是，可以将正则对象自动转为字符串。
RegExp.prototype.toJSON = RegExp.prototype.toString;
JSON.stringify(/foo/); // "/foo/"
//分析：在正则对象的原型上面部署了toJSON方法，将其指向toString方法，
//那么toJSON就实现了返回正则表达式的字符串值，因此遇到转换成JSON时，
//正则对象就先调用toJSON方法转为字符串，然后再被JSON.stingify方法处理。

3.常用的使用场景

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

let dataArr =[{name:'Tom'},{name:'Lucky'},{name:"Lili"}]
let obj ={name:'Tom'};
let flag = JSON.stringify(dataArr).indexOf(JSON.stringify(obj));
console.log(flag);

let arr1 = [1,2,3];
let arr2 =[1,2,3];
console.log(JSON.stringify(arr1)===JSON.stringify(arr2));

2）使用localStorage/sessionStorage时可以存储对象。

let val =[1,2,3];
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('demo',[1,2,3]);
getLocalStorage('demo')

3）实现对象深拷贝

function deepClone(data){
   let jsonStr = JSON.stringify(data);
   let obj = JSON.parse(jsonStr);
   return obj;
 }
 let arr = [1,2,3];
 let arrClone = deepClone(arr);
 arr[0] = 2;
 console.log(arr,arrClone); //[2, 2, 3]  [1, 2, 3]