stringify的妙用、JSON、RegExp、undefined、null、NaN、Infinity、Date、localStorage、parse、setItem、getItem

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）