JSON.parse()與JSON.stringify()高階用法
JSON.parse()與JSON.stringify是將JSON物件與字串互相轉換的方法,它們還有一些引數可以讓我們在實際應用中更加方便,現在介紹一下它們的高階用法
JSON.parse()
JSON.parse(jsonString, (key, value) => {}) 可以接受兩個引數,第一個就是我們已經熟悉的json字串,第二個是一個回撥函式,我們可以對返回的每一個value做處理,然後返回對應的value
const testJSON = {
name: 'test',
value: 7,
};
const jsonStr = JSON.stringify(testJSON);
JSON.parse(jsonStr, (key, value) => {
if (typeof value === 'string') {
return value.toUpperCase();
}
return value;
});
// {
name: 'TEST',
value: 7,
}
JSON.stringify()
JSON.stringify(jsonObject, replace, space) 可以接受三個引數,第一個是json物件,第二個在轉成字串前處理屬性值,第三個在字串中插入空白符增強可讀性
replace: 傳入的引數可以是一個數組,也可以是一個回撥函式,作用都是用於處理屬性值;當是一個數組時,只有在陣列中存在的屬性,才會出現在最終轉成的字串中;當是一個回撥函式時,可以處理每一個屬性值,然後返回經過處理的值,若返回值是undefined ,則該屬性值會被忽略,將不會出現在最終的字串中。
(注意: 當relace為陣列,過濾屬性時,巢狀屬性同樣會被過濾掉)
const testJSON = {
name: 'test',
cities: {
shanghai: 1,
},
};
JSON.stringify(testJSON, [ 'name']);
// "{"name": 'test'}"
JSON.stringify(testJSON, ['name', 'cities']);
// "{"name": 'test', "cities": {}}"
JSON.stringify(testJSON, ['name', 'cities', 'shanghai']);
// "{"name": 'test', "cities": {"shanghai": 1}}"
JSON.stringify(testJSON, (key, value) => {
if (key === 'cities') {
return 'cities';
}
return value;
});
// "{"name": 'test', "cities": 'cities'}"
JSON.stringify(testJSON, (key, value) => {
if (key === 'shanghai') {
return 9;
}
return value;
});
// "{"name": 'test', "cities": {"shanghai": 9}}"
space: 傳入的引數可以是String或Number的值,如果是String值,則該字串會作為空白符,字串最長可為10個字元,如果超過了10個字元,那麼會擷取前10個字元,若是undefined或null,則會被忽略,不會顯示空白符;如果是Number的值,表示會有多少個空格作為空白符,最大數值為10,超過10也會被當做10來處理,最小為1,小於1則無效,不會顯示空格
const testJSON = {
name: 'test',
city: 'shanghai',
};
JSON.stringify(testJSON, undefined, ' ');
// "{
"name": 'test',
"city": 'shanghai',
}"
JSON.stringify(testJSON, undefined, ' ');
// "{
"name": 'test',
"city": 'shanghai',
}"
JSON.stringify(testJSON, undefined, '\t');
// "{
"name": 'test',
"city": 'shanghai',
}"
JSON.stringify(testJSON, undefined, '...');
// "{
..."name": 'test',
..."city": 'shanghai',
}"
JSON.stringify(testJSON, undefined, 7);
// "{
"name": 'test',
"city": 'shanghai', // 縮排7個空格
}"
toJSON方法
如果一個被序列化的json物件擁有toJSON方法,那麼真正被序列化的值是toJSON方法返回的值,而不是本身的物件
const testJSON = {
name: 'test',
toJSON: () => {
return { toJson: 'testJson' },
},
};
JSON.stringify(testJSON);
// "{"toJson": 'testJson'}"
JSON.stringify()序列化複雜的json物件
有的json物件中包含函式,那麼序列化是會忽略掉函式,當我們想保留函式時,可以通過replace(回撥函式)來處理
const testJSON = {
name: 'test',
getName: () => {
return 'test';
},
};
JSON.stringify(kTextJson, (key, value) => {
if (typeof value === 'function') {
return Function.prototype.toString.call(value);
}
return value;
}, '\t'));
// {
"name": "test",
"getName": "function getName() {\n return 'test';\n }"
}