【JS】JSON 方法使用

小案例

• 修改属性名

let obj = {'a1':'a1', a2: "a22", a3: "a1"};
JSON.parse(JSON.stringify(obj).replace(/a1/g,"aa")); // 不会改变原对象
console.log(obj); // 输出{a1: 'a1', a2: 'a22', a3: "a1"}

`注意：如果要修改的属性名，有属性值与它相等，那么属性值也会被修改，慎用！`
let object = JSON.parse(JSON.stringify(obj).replace(/a1/g,"aa")); // 不会改变原对象
console.log(object);  // 输出{aa: 'aa', a2: 'a22', a3: "aa"}

`改变多个属性名`
let object = JSON.parse(
	JSON.stringify(obj)
	.replace(/a1/g,"aa")
	.replace(/a2/g,"bb")
); // 修改多个属性名
console.log(object);  // 输出{aa: 'aa', bb: 'a22', a3: "aa"}

JSON.parse()

• JSON.parse()：用来解析JSON字符串，构造由字符串描述的JavaScript值或对象
• 语法：

JSON.parse(text, reviver)
// text：		必选，要被解析成 JavaScript 值的字符串
// reviver：	可选，转换器, 如果传入该参数(函数)，可以用来修改解析生成的原始值，调用时机在 parse 函数返回之前。

• 示例 1：

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null

• 示例 2：

var jsonObj = '{"name":"jack","age":18,"gender":"男"}';
var jsonArr ='[{ "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }]';

var obj = JSON.parse(jsonStr);
var arr = JSON.parse(jsonArr);

console.log(obj);	//  obj 就是我们 js 的对象
console.log(arr);	// arr 就是我们 js 的数组

reviver 函数

JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});

// 1
// 2
// 4
// 6
// 5
// 3
// ""

JSON.stringify()

• JSON.stringify()： 将一个JavaScript值或对象转换为 JSON 字符串
• 语法：

JSON.stringify(value, replacer, space)
// value：		必选，将要序列化成 一个 JSON 字符串的值。
// replacer：	可选，
/*
1. 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
2. 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；
3. 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
*/
// space：		可选，指定缩进用的空白字符串
/*
1. 如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格
2. 如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格
3. 如果该参数没有提供（或者为 null），将没有空格
*/

• 示例 1：

JSON.stringify({});                        // '{}'
JSON.stringify(true);                      // 'true'
JSON.stringify("foo");                     // '"foo"'
JSON.stringify([1, "false", false]);       // '[1,"false",false]'
JSON.stringify({ x: 5 });                  // '{"x":5}'

JSON.stringify({x: 5, y: 6});
// "{"x":5,"y":6}"

JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
// '[1,"false",false]'

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

JSON.stringify([undefined, Object, Symbol("")]);
// '[null,null,null]'

JSON.stringify({[Symbol("foo")]: "foo"});
// '{}'

JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
// '{}'

JSON.stringify(
    {[Symbol.for("foo")]: "foo"},
    function (k, v) {
        if (typeof k === "symbol"){
            return "a symbol";
        }
    }
);


// undefined

// 不可枚举的属性默认会被忽略：
JSON.stringify(
    Object.create(
        null,
        {
            x: { value: 'x', enumerable: false },
            y: { value: 'y', enumerable: true }
        }
    )
);

// "{"y":"y"}"

• 示例 2：

var obj = {
  name: 'Jack',
  age: 18,
  gender: '男'
};
var arr = [
  {
    name: 'Jack',
    age: 18,
    gender: '男'
  },
  {
    name: 'Jack',
    age: 18,
    gender: '男'
  },
  {
    name: 'Jack',
    age: 18,
    gender: '男'
  }
];
var jsonObj = JSON.stringify(obj);
var jsonArr = JSON.stringify(arr);

console.log(jsonObj);	// jsonObj 就是 json 格式的对象字符串
console.log(jsonArr);	// jsonArr 就是 json 格式的数组字符串

replacer 参数

• replacer 参数可以是一个函数或者一个数组。
• 作为函数，它有两个参数，键（key）和值（value），它们都会被序列化。
• 不能用 replacer 方法，从数组中移除值（values），如若返回 undefined 或者一个函数，将会被 null 取代。
• 函数应当返回JSON字符串中的value:

1. 如果返回一个 Number, 转换成相应的字符串作为属性值被添加入 JSON 字符串
2. 如果返回一个 String, 该字符串作为属性值被添加入 JSON 字符串
3. 如果返回一个 Boolean, "true" 或者 "false" 作为属性值被添加入 JSON 字符串
4. 如果返回 undefined，该属性值不会在 JSON 字符串中输出

• 示例 1：replacer是一个function

let foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}
var jsonString = JSON.stringify(foo, replacer);
console.log(jsonString )	// '{"week":45,"month":7}'

• 示例 2：replacer是一个array

JSON.stringify(foo, ['week', 'month']);
// '{"week":45,"month":7}', 只保留 “week” 和 “month” 属性值。

space 参数

• 如果是一个数字, 则在字符串化时每一级别会比上一级别缩进多这个数字值的空格（最多10个空格）；
• 如果是一个字符串，则每一级别会比上一级别多缩进该字符串（或该字符串的前10个字符）
• 示例 1：

JSON.stringify({ a: 2 }, null, " ");   
/* 
'{ 
 "a": 2	// 首行有" ",1个空格
}'
*/
JSON.stringify({ a: 2 }, null, "ss");   
/* 
'{ 
ss"a": 2 // 首行有"ss"
}'
*/
JSON.stringify({ a: 2 }, null, 2);   
/* 
'{ 
  "a": 2 // 首行有2个空格
}'
*/

• 示例 2：

let user = {
  name: "John",
  age: 25,
  roles: {
    isAdmin: false,
    isEditor: true
  }
};

alert(JSON.stringify(user, null, 2));
/* 两个空格的缩进：
{
  "name": "John",
  "age": 25,
  "roles": {
    "isAdmin": false,
    "isEditor": true
  }
}
*/

/* 对于 JSON.stringify(user, null, 4) 的结果会有更多缩进：
{
    "name": "John",
    "age": 25,
    "roles": {
        "isAdmin": false,
        "isEditor": true
    }
}
*/