原生JS：JSON对象详解

时间 2019-11-22

原文原文链接

JSON对象 支持到IE8，旧版的IE须要Polyfilljavascript

本文参考MDN作的详细整理，方便你们参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript）java

JSON对象自己不能被调用或者做为构造函数，除了它的这两个方法属性外 JSON 对象自己并无什么有用的功能。git

每一个JSON对象，就是一个值。要么是简单类型的值，要么是复合类型的值，可是只能是一个值，不能是两个或更多的值。这就是说，每一个JSON文档只能包含一个值。github

描述正则表达式

JSON 是一种用来序列化对象、数组、数值、字符串、布尔值和 null 的语法。它基于 JavaScript 语法，可是又有区别：一些 JavaScript 值不是 JSON，而某些 JSON 不是 JavaScript 值。参考 JSON: The JavaScript subset that isn't。算法

JavaScript 与 JSON 的区别json

JSON对值的类型和格式有严格的规定。数组

复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
简单类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。
字符串必须使用双引号表示，不能使用单引号。
对象的键名必须放在双引号里面。
数组或对象最后一个成员的后面，不能加逗号。

JavaScript类型浏览器	JSON与之区别session
对象和数组	属性名称必须用双引号包裹；最后一个属性后面不能有逗号。
数值	前导0不能使用（在 JSON.stringify 中将会被忽略，在 JSON.parse 会抛出错误）；小数点后面至少有一个数字。
字符串	只有有限的字符可以被转义；不容许某些控制字符；但容许使用Unicode 行分隔符 (U+2028) 和段落分隔符 (U+2029) ; 字符串必须用双引号括起来。在 Javascript 中,下面的示例中 JSON.parse() 可以正常解析但 SyntaxError 会出错: var code = '"\u2028\u2029"'; JSON.parse(code); // works fine eval(code); // fails

完整的JSON语法以下：

JSON = null
or true or false
or JSONNumber
or JSONString
or JSONObject
or JSONArray
JSONNumber = - PositiveNumber
or PositiveNumber
PositiveNumber = DecimalNumber
or DecimalNumber . Digits
or DecimalNumber . Digits ExponentPart
or DecimalNumber ExponentPart
DecimalNumber = 0
or OneToNine Digits
ExponentPart = e Exponent
or E Exponent
Exponent = Digits
or + Digits
or - Digits
Digits = Digit
or Digits Digit
Digit = 0 through 9
OneToNine = 1 through 9
JSONString = ""
or " StringCharacters "
StringCharacters = StringCharacter
or StringCharacters StringCharacter
StringCharacter = any character
except " or \\ or U+0000 through U+001F
or EscapeSequence
EscapeSequence = \\" or \\/ or \\\\ or \\b or \\f or \\n or \\r or \\t
or \\u HexDigit HexDigit HexDigit HexDigit
HexDigit = 0 through 9
or A through F
or a through f
JSONObject = { }
or { Members }
Members = JSONString : JSON
or Members , JSONString : JSON
JSONArray = [ ]
or [ ArrayElements ]
ArrayElements = JSON
or ArrayElements , JSON

空白字符能够出如今任意位置，可是数值类型的数字中间不能有空白字符，字符串中间不能随意添加空白字符，由于添加的空白字符会被解释为相应的字符值，从而引发错误。有效空白字符只包括制表符 (U+0009)、回车符 (U+000D)、换行符 (U+000A) 和空格 (U+0020) 。

方法

JSON.parse(text[, reviver])

解析JSON字符串text, 能够选择改变前面解析后的值及其属性，而后返回解析的值。它从 text 字符串解析出的一个 Object。若是被解析的 JSON 字符串包含语法错误，则会抛出 SyntaxError 异常。

text 要解析的 JSON 字符串，能够查看 JSON 一文了解 JSON 的语法。
reviver 可选一个函数，用来转换解析出的属性值
使用 reviver 函数：

若是指定了 reviver 函数，则解析出的 JavaScript 值（解析值）会通过一次转换后才将被最终返回（返回值）。更具体点讲就是：解析值自己以及它所包含的全部属性，会按照必定的顺序（从最最里层的属性开始，一级级往外，最终到达顶层，也就是解析值自己）分别的去调用 reviver 函数，在调用过程当中，当前属性所属的对象会做为 this 值，当前属性名和属性值会分别做为第一个和第二个参数传入 reviver 中。若是 reviver 返回 undefined，则当前属性会从所属对象中删除，若是返回了其余值，则返回的值会成为当前属性新的属性值。

当遍历到最顶层的值（解析值）时，传入 reviver 函数的参数会是空字符串 ""（由于此时已经没有真正的属性）和当前的解析值（有可能已经被修改过了），当前的 this 值会是 {"": 修改过的解析值}，在编写 reviver 函数时，要注意到这个特例。（译者按：这个函数的遍历顺序按深度优先遍历）

JSON.parse('{"p": 5}', function (key, value) {
  if(key === '') return value;     // 若是到了最顶层，则直接返回属性值，
  return value* 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(value[, replacer [, space]])

将任意的 JavaScript 值序列化成 JSON 字符串。若转换的函数被指定，则被序列化的值的每一个属性都会通过该函数的转换和处理；若转换的数组被指定，只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中。

value 将要序列化成 JSON 字符串的值。
replacer 可选若是该参数是一个函数，则在序列化过程当中，被序列化的值的每一个属性都会通过该函数的转换和处理；

若是该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；

若是该参数为null或者未提供，则对象全部的属性都会被序列化；

关于该参数更详细的解释和示例，请参考使用原生的 JSON 对象一文。

space 可选指定缩进用的空白字符串，用于美化输出（pretty-print）；

若是参数是个数字，它表明有多少的空格；上限为10。改值若小于1，则意味着没有空格；

若是该参数为字符串(字符串的前十个字母)，该字符串将被做为空格；

若是该参数没有提供（或者为null）将没有空格。

关于序列化，有下面五点注意事项：

非数组对象的属性不能保证以特定的顺序出如今序列化后的字符串中。
布尔值、数字、字符串的包装对象在序列化过程当中会自动转换成对应的原始值。
undefined、任意的函数以及 symbol 值，在序列化过程当中会被忽略（出如今非数组对象的属性值中时）或者被转换成 null（出如今数组中时）。
全部以 symbol 为属性键的属性都会被彻底忽略掉，即使 replacer 参数中强制指定包含了它们。
不可枚举的属性会被忽略

例子：

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}' 或者 '{"y":6,"x":5}' 均可能

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";

}

});

// '{}'

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

JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );

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

replacer参数

replacer参数能够是一个函数或者一个数组。做为函数，它有两个参数，键(key)值(value)都会被序列化。

若是返回一个 Number, 转换成相应的字符串被添加入JSON字符串。
若是返回一个 String, 该字符串做为属性值被添加入JSON。
若是返回一个 Boolean, "true" 或者 "false"被做为属性值被添加入JSON字符串。
若是返回任何其余对象，该对象递归地序列化成JSON字符串，对每一个属性调用replaceer方法。除非该对象是一个函数，这种状况将不会被序列化成JSON字符串。
若是返回undefined，该属性值不会被宰JSON字符串中输出。

注意: 不能用replacer方法，从数组中移除值(values)，如若返回undefined或者一个函数，将会被null取代。

例子1(function)

function replacer(key, value) {

if (typeof value === "string") {

return undefined;

}

return value;

}

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};

var jsonString = JSON.stringify(foo, replacer);

JSON序列化结果为 {"week":45,"month":7}.

例子2(array)

若是replacer是一个数组，数组的值表明将被序列化成JSON字符串的属性名。

JSON.stringify(foo, ['week', 'month']);

// '{"week":45,"month":7}', 只保留“week”和“month”属性值。

space 参数

space 参数用来控制结果字符串里面的间距。若是是一个数字, 则在字符串化时每一级别会比上一级别缩进多这个数字值的空格（最多10个空格）；若是是一个字符串，则每一级别会比上一级别多缩进用该字符串（或该字符串的前十个字符）。

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

使用制表符（\t）来缩进：

JSON.stringify({ uno: 1, dos : 2 }, null, '\t')

// '{ \

// "uno": 1, \

// "dos": 2 \

// }'

toJSON 方法

若是一个被序列化的对象拥有 toJSON 方法，那么该 toJSON 方法就会覆盖该对象默认的序列化行为：不是那个对象被序列化，而是调用 toJSON 方法后的返回值会被序列化，例如：

var obj = {

foo: 'foo',

toJSON: function () {

return 'bar';

}

};

JSON.stringify(obj); // '"bar"'

JSON.stringify({x: obj}); // '{"x":"bar"}'

JSON.stringify用做 JavaScript

注意JSON不是javascript严格意义上的子集，在JSON中不须要省略两条终线(Line separator和Paragraph separator)但在JavaScript中须要被省略。所以，若是JSON被用做JSONP时，下面方法可使用：

function jsFriendlyJSONStringify (s) {

return JSON.stringify(s).

replace(/\u2028/g, '\\u2028').

replace(/\u2029/g, '\\u2029');

}

var s = {

a: String.fromCharCode(0x2028),

b: String.fromCharCode(0x2029)

};

try {

eval('(' + JSON.stringify(s) + ')');

} catch (e) {

console.log(e); // "SyntaxError: unterminated string literal"

}

// No need for a catch

eval('(' + jsFriendlyJSONStringify(s) + ')');

// console.log in Firefox unescapes the Unicode if

// logged to console, so we use alert

alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}

使用 JSON.stringify 结合 localStorage 的例子

一些时候，你想存储用户建立的一个对象，而且，即便在浏览器被关闭后仍能恢复该对象。下面的例子是 JSON.stringify 适用于这种情形的一个样板：

// 建立一个示例数据

var session = {

'screens' : [],

'state' : true

};

session.screens.push({"name":"screenA", "width":450, "height":250});

session.screens.push({"name":"screenB", "width":650, "height":350});

session.screens.push({"name":"screenC", "width":750, "height":120});

session.screens.push({"name":"screenD", "width":250, "height":60});

session.screens.push({"name":"screenE", "width":390, "height":120});

session.screens.push({"name":"screenF", "width":1240, "height":650});

// 使用 JSON.stringify 转换为 JSON 字符串

// 而后使用 localStorage 保存在 session 名称里

localStorage.setItem('session', JSON.stringify(session));

// 而后是如何转换经过 JSON.stringify 生成的字符串，该字符串以 JSON 格式保存在 localStorage 里

var restoredSession = JSON.parse(localStorage.getItem('session'));

// 如今 restoredSession 包含了保存在 localStorage 里的对象

console.log(restoredSession);

Polyfill

JSON 对象不被旧版本浏览器支持。你能够把下面代码放到脚本的开始位置，这样就能够在那些没有原生支持 JSON 对象的浏览器（好比IE6）中使用 JSON 对象。关于 JSON 对象更复杂且有名的 polyfills 是 JSON2 和 JSON3。

下面的算法用来模拟原生 JSON 对象：

if (!window.JSON) {

window.JSON = {

parse: function(sJSON) { return eval('(' + sJSON + ')'); },

stringify: (function () {

var toString = Object.prototype.toString;

var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; };

var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'};

var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); };

var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;

return function stringify(value) {

if (value == null) {

return 'null';

} else if (typeof value === 'number') {

return isFinite(value) ? value.toString() : 'null';

} else if (typeof value === 'boolean') {

return value.toString();

} else if (typeof value === 'object') {

if (typeof value.toJSON === 'function') {

return stringify(value.toJSON());

} else if (isArray(value)) {

var res = '[';

for (var i = 0; i < value.length; i++)

res += (i ? ', ' : '') + stringify(value[i]);

return res + ']';

} else if (toString.call(value) === '[object Object]') {

var tmp = [];

for (var k in value) {

if (value.hasOwnProperty(k))

tmp.push(stringify(k) + ': ' + stringify(value[k]));

}

return '{' + tmp.join(', ') + '}';

}

return '"' + value.toString().replace(escRE, escFunc) + '"';

};

})()

};

}