js.jpg
在我们的日常开发中，JSON.stringify()是一个很常用的函数，它的作用就是将对象转换成字符串
打印日志
当我们需要打印的东西是一个数组且里面有很多属性，但是我们只想要其中一个属性的时候。console.log()无法满足我们的要求
var person = [{
name: 'zhangsan',
age: 25,
hobby: 'basketball'
},{
name: 'lisi',
age: 20,
hobby: 'swiming'
},{
name: 'wanger',
age: 35,
hobby: 'make money'
}]
console.log(JSON.stringify(person,['age'])) // [{"age":25},{"age":20},{"age":35}]
还可以传入函数,不满足条件的将不打印相应的键值对
var b = {
name: 'wanger',
age: 35,
hobby: 'make money'
}
var aa = JSON.stringify(b, (key, value) => {
if (value > 26) {
return undefined
}
return value
})
console.log(aa) // {"name":"wanger","hobby":"make money"}
有三个参数
1. 参数是数字
var b = {
name: 'wanger',
age: 35,
hobby: 'make money'
}
var aa = JSON.stringify(b, null , 5)
console.log(aa)
// 输出结果
{
"name": "wanger",
"age": 35,
"hobby": "make money"
}
如上，数字表示对象缩进的几个数量的空字符串，开发中应用实则鸡肋
2.参数是string
var b = {
name: 'wanger',
age: 35,
hobby: 'make money'
}
var aa = JSON.stringify(b, null , '***')
console.log(aa)
// 输出
{
***"name": "wanger",
***"age": 35,
***"hobby": "make money"
}
嘿嘿，也是鸡肋
toJSON 方法
toJSON()可作为任意对象的的属性，JSON.stringify会返回这个函数的结果并对其进行序列化
var getFullName = {
firsrName: 'chris',
lastName: 'Bryant',
age: 25,
toJSON() {
return {
fullName: `${this.firsrName} ${this.lastName}`
}
}
}
console.log(JSON.stringify(getFullName))
// {"fullName":"chris Bryant"}
深拷贝
在我们的日常开发中，我们更多的引用其实是结合JSON.parse()来对对象进行深拷贝，避免赋值对象改变了原有的对象属性
var b = {
name: 'wanger',
age: 35,
hobby: 'make money'
}
var aa = b
aa.name = 'lisi'
console.log(b)
console.log(aa)
// { name: 'lisi', age: 35, hobby: 'make money' }
//{ name: 'lisi', age: 35, hobby: 'make money' }
可以看到变量aa的赋值改变了变量b里的相同属性,这样的情况是我们不愿意看到的，改造一下喽。
var b = {
name: 'wanger',
age: 35,
hobby: 'make money'
}
var aa = JSON.parse(JSON.stringify(b))
aa.name = 'lisi'
console.log(b)
console.log(aa)
// { name: 'wanger', age: 35, hobby: 'make money' }
// { name: 'lisi', age: 35, hobby: 'make money' }
如上，可满足我们的需求
JSON.stringify深拷贝坑
当我们的对象中有时间对象,函数，undefined，NaN这些的时候，JSON.stringify + JSON.parse并不能满足我们的需求，如：
var b = {
name: 'wanger',
age: 35,
hobby: 'make money',
func: function(){
return 2
},
num: NaN,
unde: undefined
}
var aa = JSON.parse(JSON.stringify(b))
console.log(aa)
// { name: 'wanger', age: 35, hobby: 'make money', num: null }
这时，可参考我们需要
function deepClone(origin,target){
var target = target || {},
toStr = Object.prototype.toString,
arrStr = "[object Array]";
for(var prop in origin){
if(origin.hasOwnProperty(prop)){
if (origin[prop] !== "null" && typeof(origin[prop]) == "object") {
if (toStr.call(origin[prop]) == arrStr) {
target[prop] = [];
}else{
target[prop] = {};
}
deepClone(origin[prop],target[prop]);
}else{
target[prop] = origin[prop]
}
}
}
return target;
}
var obj1 = {
name:'zhang',
age:25,
hobit:{
sport:["basketball","football","run"],
learn:{
name:"xxxx",
catgory:["123",456]
}
}
}
var obj = {};
deepClone(obj1,obj)
ps: 基本数据类型不存在深浅拷贝的说法
