stringify的妙用JSONRegExpundefinednullNaNInfinityDatelocalStorageparsesetItemgetItem

Posted 2022-08-30 web半晨

文章目录

• 1、stringify的作用
• 2、特殊属性的处理
• 3、stringify的第二个参数
• 4、stringify的第三个参数
• 5、自定义JSON序列化
• 6、使用场景

---

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）