实现一个 JSON.stringify #39
Comments
|
JSON.stringify是浏览器高版本带的一个将JS的Objtect对象转换为JSON字符串的一个方法JSON.stringify 1.undefined,该类型使用JSON.stringify处理的时候，如果对象就是undefined,将会输出"undefined",如果 2.字符串在拼接的时候需要把内部的双引号处理掉 |
JSON.stringify(value[,replacer[,space]])：Boolean|Number|String 类型会自动转换成对应的原始值。undefined、任意函数以及 symbol，会被忽略（出现在非数组对象的属性值中时），或者被转换成 null（出现在数组中时）。不可枚举的属性会被忽略如果一个对象的属性值通过某种间接的方式指回该对象本身，即循环引用，属性也会被忽略。摘抄自 鱼头大佬的公众号 -- '鱼头的Web海洋'顺便抢沙发,哈哈沙发没了 - - |
今天的题目不现实。。。JS一共有284种标准内置对象。。。事实上它们stringify出来不都是一样的 Object.prototype.types = function () {
var toString = Object.prototype.toString
var map = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regExp',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Object]': 'object',
'[object Arguments]': 'arguments',
'[object Error]': 'error',
'[object Window]': 'window',
'[object HTMLDocument]': 'document',
};
var el = this instanceof Element ? 'element' : map[toString.call(this)];
return el
}
Object.prototype.stfy = function () {
const type = this.types()
const typeObj = {
'boolean': data => '' + !!data,
'number': data => data + '',
'string': data => `"${data}"`,
'function': data => undefined,
'array': data => {
let res = '['
for (let i = 0, len = data.length; i < len; ++i) {
let cur = data[i].stfy()
res += (cur)
}
res += ']'
return res
},
'date': data => data.toJSON(),
'regExp': data => '{}',
'undefined': data => 'undefined',
'null': data => 'null',
'object': data => {
let res = '{'
for (let key in data) {
if (data.hasOwnProperty(key)) {
let cur = data[key].stfy()
if (cur) {
res += `"${key}:${cur}"`
}
}
}
res += '}'
return res
},
'arguments': data => {
let res = '{'
for (let i = 0, len = data.length; i < len; ++i) {
let cur = `"${i}:${data[i]}${(i === len - 1) ? '' : ','}"`
}
res += '}'
return res
},
'error': data => '{}',
'window': data => new Error('Converting circular structure to JSON'),
'document': data => '{}',
}
if (typeObj[type]) {
return typeObj[type](this)
} else {
console.log('嘤嘤嘤，内置对象太多，写不过来')
return JSON.stringify(this)
}
} |
|
JSON.stringify会处理的几种类型： String, Number, Boolean, null, Array, Object replacer: 如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。 如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。 space: ----还是学习大佬们写的方法吧 |
|
JSON.stringify是浏览器高版本带的一个将JS的Objtect对象转换为JSON字符串的一个方法JSON.stringify 1.undefined,该类型使用JSON.stringify处理的时候，如果对象就是undefined,将会输出"undefined",如果 2.字符串在拼接的时候需要把内部的双引号处理掉 |
JSON.stringify 功能
模拟实现(待优化)function jsonStringify(data) {
let dataType = typeof data;
if (dataType !== 'object') {
let result = data;
//data 可能是 string/number/null/undefined/boolean
if (Number.isNaN(data) || data === Infinity) {
//NaN 和 Infinity 序列化返回 "null"
result = "null";
} else if (dataType === 'function' || dataType === 'undefined' || dataType === 'symbol') {
//function 、undefined 、symbol 序列化返回 undefined
return undefined;
} else if (dataType === 'string') {
result = '"' + data + '"';
}
//boolean 返回 String()
return String(result);
} else if (dataType === 'object') {
if (data === null) {
return "null"
} else if (data.toJSON && typeof data.toJSON === 'function') {
return jsonStringify(data.toJSON());
} else if (data instanceof Array) {
let result = [];
//如果是数组
//toJSON 方法可以存在于原型链中
data.forEach((item, index) => {
if (typeof item === 'undefined' || typeof item === 'function' || typeof item === 'symbol') {
result[index] = "null";
} else {
result[index] = jsonStringify(item);
}
});
result = "[" + result + "]";
return result.replace(/'/g, '"');
} else {
//普通对象
/**
* 循环引用抛错(暂未检测，循环引用时，堆栈溢出)
* symbol key 忽略
* undefined、函数、symbol 为属性值，被忽略
*/
let result = [];
Object.keys(data).forEach((item, index) => {
if (typeof item !== 'symbol') {
//key 如果是symbol对象，忽略
if (data[item] !== undefined && typeof data[item] !== 'function'
&& typeof data[item] !== 'symbol') {
//键值如果是 undefined、函数、symbol 为属性值，忽略
result.push('"' + item + '"' + ":" + jsonStringify(data[item]));
}
}
});
return ("{" + result + "}").replace(/'/g, '"');
}
}
}测试代码let sym = Symbol(10);
console.log(jsonStringify(sym) === JSON.stringify(sym));
let nul = null;
console.log(jsonStringify(nul) === JSON.stringify(nul));
let und = undefined;
console.log(jsonStringify(undefined) === JSON.stringify(undefined));
let boo = false;
console.log(jsonStringify(boo) === JSON.stringify(boo));
let nan = NaN;
console.log(jsonStringify(nan) === JSON.stringify(nan));
let inf = Infinity;
console.log(jsonStringify(Infinity) === JSON.stringify(Infinity));
let str = "hello";
console.log(jsonStringify(str) === JSON.stringify(str));
let reg = new RegExp("\w");
console.log(jsonStringify(reg) === JSON.stringify(reg));
let date = new Date();
console.log(jsonStringify(date) === JSON.stringify(date));
let obj = {
name: '刘小夕',
age: 22,
hobbie: ['coding', 'writing'],
date: new Date(),
unq: Symbol(10),
sayHello: function() {
console.log("hello")
},
more: {
brother: 'Star',
age: 20,
hobbie: [null],
info: {
money: undefined,
job: null,
others: []
}
}
}
console.log(jsonStringify(obj) === JSON.stringify(obj));
function SuperType(name, age) {
this.name = name;
this.age = age;
}
let per = new SuperType('小姐姐', 20);
console.log(jsonStringify(per) === JSON.stringify(per));
function SubType(info) {
this.info = info;
}
SubType.prototype.toJSON = function() {
return {
name: '钱钱钱',
mount: 'many',
say: function() {
console.log('我偏不说！');
},
more: null,
reg: new RegExp("\w")
}
}
let sub = new SubType('hi');
console.log(jsonStringify(sub) === JSON.stringify(sub));
let map = new Map();
map.set('name', '小姐姐');
console.log(jsonStringify(map) === JSON.stringify(map));
let set = new Set([1,2,3,4,5,1,2,3]);
console.log(jsonStringify(set) === JSON.stringify(set)); |
|
粗略的翻译了一下，实例参考小姐姐 下面是序列化一个对象的步骤 |
|
首先我们看看它的作用 作用
格式JSON.stringify(value[, replacer, [, space]]),value是必须的就不必说了；
JSON.stringify() 将值转化为相应的JSON格式
|
|
JSON.stringfy()的作用：将一个json对象转化为字符串。 使用JSON.stringfy传入不同参数 函数类型 对象类型 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No description provided.
The text was updated successfully, but these errors were encountered: