携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第3天,点击查看活动详情
是个前端就离不开JSON,之前一直使用各种站长工具,然后天天看广告,然后自己萌生了自己写JSON格式化工具的想法,于是自己撸了一个轮子。废话不多说,我们手写一个格式化json工具。。 干货从第四步开始,着急的同学直接看第三步,不影响阅读。
let stringJson = JSON.stringify({ editor: { editor: { editor: { editor: 'aa' } } } });
function Editor() {
// fetch('/tripdocs/test/api', { method: 'POST' });
// 这里写一个可以格式化的json
let stringJson = JSON.stringify({ editor: { editor: { editor: { editor: 'aa' } } } });
return <textarea className="editor" defaultValue={stringJson}></textarea>;
}
function Editor() {
// fetch('/tripdocs/test/api', { method: 'POST' });
// 这里写一个可以格式化的json
let stringJson = JSON.stringify({ editor: { editor: { editor: { editor: 'aa' } } } });
stringJson = stringJson.replace(/\{/gi, '{\n');
stringJson = stringJson.replace(/\}/gi, '\n}');
return <textarea className="editor" defaultValue={stringJson}></textarea>;
}
效果图如下
这一步,说明一下,json其实是一个树形结构。需要按照深度优先进行遍历。每深入一层就需要多加2个空格。
这时候需要树形结构,所以我放弃了直接用正则,转而使用递归的方式。
直接上方法
首先需要一个方法打印空格,这里利用数组进行操作
function printSpace(num: number) {
return new Array(num).fill(' ').join('');
}
接下来,我们需要处理传入的对象,但是我不知道,他是否合法是否有循环引用
这里利用JSON携带的函数取巧处理
function printJson(tObj: Object, i: number = 1) {
const count = i || 1;
// TODO 判断是不是纯净的object,这里先当纯净的处理 利用JSON parse
const obj = JSON.parse(JSON.stringify(tObj));
}
这里我们一共会遇到三类情况,纯净的Object、数组、其他基础类型的值。
其他基础类型:Number、String、Boolean、object、Null ps:不包含 undefined、Symbol(),会被 JSON.stringify 过滤
伪代码
if (obj && Array.isArray(obj)) {
} else if (obj && typeof obj === 'object') {
} else {
}
重要的步骤来了,深度遍历。这里先只考虑纯净的object和其他基础类型的值
function printJson(tObj: Object, i: number = 0) {
const count = i || 0;
// TODO 判断是不是纯净的object,这里先当纯净的处理 利用JSON parse
const obj = JSON.parse(JSON.stringify(tObj));
if (obj && Array.isArray(obj)) {
} else if (obj && typeof obj === 'object') {
let str = '';
// 遍历object
Object.keys(obj).forEach(key => {
// 换行 加空格 给key加双引号 递归处理子对象
str += '\n' + printSpace(count + 1) + '"' + key + '"' + ' : ' + printJson(obj[key], count + 1);
// 最后加,
str += ',';
});
// 首部{不加空格,尾部}加空格
return `{${str}\n${printSpace(count)}}`;
} else {
// string 类型加双引号
if (typeof obj === 'string') {
return '"' + obj + '"';
}
return obj;
}
}
function printSpace(num: number) {
return new Array(num).fill(' ').join('');
}
数组最大的不同是,数组没有key
以下是完整代码
function printJson(tObj: Object, i: number = 0) {
const count = i || 0;
// TODO 判断是不是纯净的object,这里先当纯净的处理 利用JSON parse
const obj = JSON.parse(JSON.stringify(tObj));
if (obj && Array.isArray(obj)) {
let str = '';
Object.keys(obj).forEach(key => {
str += '\n' + printSpace(count + 1) + printJson(obj[key], count + 1);
str += ',';
});
return `[${str}\n${printSpace(count)}]`;
} else if (obj && typeof obj === 'object') {
let str = '';
Object.keys(obj).forEach(key => {
str += '\n' + printSpace(count + 1) + '"' + key + '"' + ' : ' + printJson(obj[key], count + 1);
str += ',';
});
return `{${str}\n${printSpace(count)}}`;
} else {
if (typeof obj === 'string') {
return '"' + obj + '"';
}
return obj;
}
}
function printSpace(num: number) {
return new Array(num).fill(' ').join('');
}
function Editor() {
let stringJson = printJson({
type: 'table',
row: 5,
column: 6,
isShow: null,
isDrag: undefined,
isDrag2: Symbol('ss'),
hwEach: [
['109px', '109px', '109px', '109px', '109px', '109px'],
['109px', '109px', '109px', '109px', '109px', '109px'],
],
});
// stringJson = stringJson.replace(/\{/gi, '{\n');
// stringJson = stringJson.replace(/\}/gi, '\n}');
return (
<textarea
className="editor"
defaultValue={stringJson}
onContextMenu={e => {
e.preventDefault();
}}
></textarea>
);
}
此时效果如下