100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html5 json.stringify JSON.stringify()妙用

html5 json.stringify JSON.stringify()妙用

时间:2019-04-19 01:37:34

相关推荐

html5 json.stringify JSON.stringify()妙用

JSON对象在所有现代浏览器中都可以使用,它有两个非常有用的方法来处理JSON格式化的内容:解析和字符串化。JSON.parse() 取一个JSON字符串并将其转换为JavaScript对象。JSON.stringify() 取一个JSON对象,并将其转换为JSON字符串。

代码使用const myObj = {

name: 'Skip',

age: 2,

favoriteFood: 'Steak'

};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);

// "{"name":"Skip","age":2,"favoriteFood":"Steak"}"

console.log(JSON.parse(myObjStr));

// Object {name:"Skip",age:2,favoriteFood:"Steak"}

而且虽然这些方法通常用于对象,但也可以用于数组。

const myArr = ['bacon', 'letuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);

// "["bacon","letuce","tomatoes"]"

console.log(JSON.parse(myArrStr));

// ["bacon","letuce","tomatoes"]

妙用功能

1.用来调试对象

我们先来看看下面这个代码在控制台中输出什么

//Initialize a User object

const user = {

"name" : "蔡生",

"age" : 26

}

console.log(user);RESULT

// [object Object]

看!console.log()没有输出我们想要的结果。它输出了[object Object],因为从对象到字符串的默认转换是“[objectObject]”。因此,我们使用JSON.stringify()先将对象转换为字符串,然后把结果输入console控制台,如下所示。

const user = {

"name" : "蔡生",

"age" : 26

}

console.log(JSON.stringify(user));RESULT

// "{ "name" : "蔡生", "age" :26 }"

通常,开发人员使用这个stringify函数的方式很简单,像上面那样操作就可以。

2.存储localStorage对象

一些时候,你想存储用户创建的一个对象,并且,即使在浏览器被关闭后仍能恢复该对象。下面的例子是JSON.stringify适用于这种情形的一个样板:

3.数组去重

有人把这个用在数组对象去重上,下面我举一个例子。

function unique(arr){

let unique = {};

arr.forEach(function(item){

unique[JSON.stringify(item)]=item;//键名不会重复

})

arr = Object.keys(unique).map(function(u){

//Object.keys()返回对象的所有键值组成的数组,map方法是一个遍历方法,返回遍历结果组成的数组.将unique对象的键名还原成对象数组

return JSON.parse(u);

})

return arr;

}

存在的问题:{x:1,y:2}与{y:2,x:1}通过JSON.stringify字符串化值不同,但显然他们是重复的对象。

看起来只要把里面的属性排序一下,然后再进行下一步就可以了,我调整了一下,代码如下:

function unique(arr) {

let unique = {};

arr.forEach(function(item) {

//调整属性顺序

var newData = {};

Object.keys(item).sort().map(key = >{

newData[key] = item[key]

})

unique[JSON.stringify(newData)] = item; //键名不会重复

})

arr = Object.keys(unique).map(function(u) {

//Object.keys()返回对象的所有键值组成的数组,map方法是一个遍历方法,返回遍历结果组成的数组.将unique对象的键名还原成对象数组

return JSON.parse(u);

})

return arr;

}

4.stringify 函数第二个参数的妙用

还是上面这道题,我们可以在第二个参数上解决对象属性的顺序问题,给它加上一个数组['name','author'],代码改为下面这个就没问题了。

function unique(arr) {

let unique = {};

arr.forEach(function(item) {

unique[JSON.stringify(item,['name','author'])] = item;

})

arr = Object.keys(unique).map(function(u) {

//Object.keys()返回对象的所有键值组成的数组,map方法是一个遍历方法,返回遍历结果组成的数组.将unique对象的键名还原成对象数组

return JSON.parse(u);

})

return arr;

}

正如你所知,第二个参数可以决定筛选出来的内容,当然它还有第三个参数,这里不展开了,有兴趣看MDN。

5.实现深拷贝

实际开发中,如果怕影响原数据,我们常深拷贝出一份数据做任意操作,其实使用JSON.stringify()与JSON.parse()来实现深拷贝是很不错的选择。

//深拷贝

function deepClone(data) {

let _data = JSON.stringify(data),

dataClone = JSON.parse(_data);

return dataClone;

};

//测试

let arr = [1,2,3],

_arr = deepClone(arr);

arr[0] = 2;

console.log(arr,_arr)//[2,2,3] [1,2,3]

6.判断数组是否包含某对象,或者判断对象是否相等。

//判断数组是否包含某对象

let data = [

{name:'echo'},

{name:'前端开发博客'},

{name:'蔡生'},

],

val = {name:'蔡生'};

JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true

//判断两数组/对象是否相等

let a = [1,2,3],

b = [1,2,3];

JSON.stringify(a,a.sort()) === JSON.stringify(b,b.sort());//true

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。