1、stringify的作用
将数据转换成字符串
let obj1 = {
name: '友前Web',
like: ['唱歌', '排球'],
year: 2022
};
console.log(JSON.stringify(obj1));
// {"name":"半晨友前","like":["唱歌","排球"],"year":2022}
2、特殊属性的处理
const obj2 = {
name: '友前Web',
like: ['唱歌', '排球'],
year: 2022,
fn: function () {
},
reg: new RegExp(),
u: undefined,
n: null,
a: NaN,
b: Infinity,
c: -Infinity,
d: new Date()
};
console.log(JSON.stringify(obj2));
// {"name":"友前Web","like":["唱歌","排球"],"year":2022,"reg":{},"n":null,"a":null,"b":null,"c":null,"d":"2022-08-28T00:11:22.525Z"}
function Person(name) {
this.name = name;
}
Person.prototype.age = 24;
let p = new Person('友前Web');
console.log(p);
// Person {name: '友前Web'}
console.log(p.age);
// 24
console.log(JSON.stringify(p));
// {"name":"友前Web"}
函数：忽略，不处理
原型属性：不处理原型上的属性，只处理实例的自身属性
RegExp：空对象 {}
undefined：忽略，不处理
null：null
NaN、Infinity和-Infinity：null
Date：特定的字符串时间格式
3、stringify的第二个参数
数组
const obj3 = {
name: '友前Web',
like: ['唱歌', '排球'],
year: 2022,
address: '深圳',
students: [
{
id: 1, name: '张三', score: 100, },
{
id: 2, name: '李四', score: 60, },
{
id: 3, name: '王五', score: 90 }
]
};
function parse(key, value) {
if (key === 'score') {
if (value === 100) {
return 'S';
} else if (value >= 90) {
return 'A';
} else if (value >= 80) {
return 'B';
} else if (value >= 70) {
return 'C';
} else if (value >= 60) {
return 'D';
} else {
return 'E';
}
}
return value;
}
数组
console.log(JSON.stringify(obj3, ['name', 'address']));
// {"name":"友前Web","address":"深圳"}
函数
console.log(JSON.stringify(obj3.students, parse));
// [{"id":1,"name":"张三","score":"S"},{"id":2,"name":"李四","score":"D"},{"id":3,"name":"王五","score":"A"}]
4、stringify的第三个参数
const obj4 = {
name: '友前Web',
like: ['唱歌', '排球'],
year: 2022,
address: '深圳'
};
console.log(JSON.stringify(obj4, null, 2));
// {
// "name": "友前Web",
// "like": [
// "唱歌",
// "排球"
// ],
// "year": 2022,
// "address": "深圳"
// }
5、自定义JSON序列化
const obj5 = {
name: '友前Web',
like: ['唱歌', '排球'],
year: 2022,
address: '深圳',
toJSON: function () {
return `${
this.name},${
this.like}`;
}
};
console.log(JSON.stringify(obj5));
// "友前Web,唱歌,排球"
6、使用场景
配合localStorage使用
const obj6 = {
name: '友前Web'
};
window.localStorage.setItem('obj', JSON.stringify(obj6));
console.log(JSON.parse(window.localStorage.getItem('obj')));
// {name: '友前Web'}
深拷贝
注意：不能拷贝特殊对象，比如函数等
const obj7 = {
name: '友前Web',
like: ['唱歌', '排球'],
year: 2022,
address: {
name: '深圳',
postcode: '528000'
},
fun: function () {
}
};
let c = JSON.parse(JSON.stringify(obj7));
c.address.name = '北京';
console.log(obj7);
// {name: '友前Web', like: Array(2), year: 2022, address: {…}, fun: ƒ}
console.log(c);
// {name: '友前Web', like: Array(2), year: 2022, address: {…}}
console.log(obj7.address.name);
// 深圳
console.log(c.address.name);
// 北京
循环引用
const obj8 = {
name: '1'
};
obj8.obj8 = obj8;
JSON.stringify(obj8);
报错：
Uncaught TypeError: Converting circular structure to JSON（循环引用不能转换成JSON）