Web前端之JavaScript的stringify的妙用、stringify的参数、JSON

务连往

已于 2024-09-16 14:23:48 修改

阅读量5.2k

点赞数 7

分类专栏： JavaScript Web前端文章标签： javascript 前端 web web前端

于 2022-08-28 09:36:23 首次发布

本文链接：https://blog.csdn.net/weixin_51157081/article/details/126565816

版权

Web前端同时被 2 个专栏收录

377 篇文章

订阅专栏

JavaScript

225 篇文章

订阅专栏

本文详细介绍了JavaScript中JSON.stringify方法的功能及用法，包括其如何将数据转换为字符串、处理特殊属性、使用第二个和第三个参数进行定制化操作，以及如何实现自定义序列化。此外，还列举了JSON.stringify的常见应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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）