一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家:專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - json - json.stringify()與json.parse()的區別以及用處

json.stringify()與json.parse()的區別以及用處

2022-01-06 15:31Adelamm json

這篇文章主要介紹了json.stringify()與json.parse()的區別以及用處,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

一、JSON.stringify()和JSON.parse() 區別

我們都用過JSON.stringify()和JSON.parse() ,從名字上就能知道
JSON.stringify()的作用是將JavaScript對象轉換為JSON 字符串
JSON.parse()可以將JSON字符串轉為一個對象。

通俗易懂版:

  • JSON.stringify() 將對象a轉化成字符串s;
  • JSON.parse() 將字符串s轉化成對象a;

簡單點說,它們的作用是相對的,我用JSON.stringify()將對象a變成了字符串c,那么我就可以用JSON.parse()將字符串c還原成對象a。

?
1
2
3
4
5
6
7
let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
typeof JSON.stringify(arr);//string
 
let string = '[1,2,3]';
console.log(JSON.parse(string))//[1,2,3]
console.log(typeof JSON.parse(string))//object

在使用JSON.parse()需要注意一點,由于此方法是將JSON字符串轉換成對象,所以你的字符串必須符合JSON格式,即鍵值都必須使用雙引號包裹:

?
1
2
3
4
let a = '["1","2"]';
let b = "['1','2']";
console.log(JSON.parse(a));// Array [1,2]
console.log(JSON.parse(b));// 報錯

二、JSON.stringify()妙用

1.判斷數組是否包含某對象,或者判斷對象是否相等。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
//判斷數組是否包含某對象
let data = [
  {name:'掘金'},
  {name:'css學習'},
  {name:'js學習'},
  ],
  val = {name:'掘金'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1; // true
 
//判斷兩數組/對象是否相等
let a = [1,2,3],
  b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true

2.讓localStorage/sessionStorage可以存儲對象。

localStorage/sessionStorage默認只能存儲字符串,而實際開發中,我們往往需要存儲的數據多為對象類型,那么這里我們就可以在存儲時利用json.stringify()將對象轉為字符串,而在取緩存時,只需配合json.parse()轉回對象即可。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//存
function setLocalStorage(key,val){
  window.localStorage.setItem(key,JSON.stringify(val));
};
//取
function getLocalStorage(key){
  let val = JSON.parse(window.localStorage.getItem(key));
 window.localStorage.removeItem(key)
  return val;
};
//測試
let data = [
  {name:'掘金'},
  {name:'css學習'},
  {name:'js學習'},
  ];
setLocalStorage('STORAGEDATE',data);
let a = getLocalStorage('STORAGEDATE');

3.實現對象深拷貝

實際開發中,如果怕影響原數據,我們常深拷貝出一份數據做任意操作,其實使用JSON.stringify()與JSON.parse()來實現深拷貝是很不錯的選擇。

?
1
2
3
4
5
6
7
8
9
10
11
//深拷貝
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]

到此這篇關于json.stringify()與json.parse()的區別以及用處的文章就介紹到這了,更多相關json.stringify()與json.parse()內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家!

原文鏈接:https://juejin.cn/post/6920883049957687303

延伸 · 閱讀

精彩推薦
  • jsonjson.stringify()與json.parse()的區別以及用處

    json.stringify()與json.parse()的區別以及用處

    這篇文章主要介紹了json.stringify()與json.parse()的區別以及用處,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的...

    Adelamm4822022-01-06
  • json用 JSON 處理緩存

    用 JSON 處理緩存

    使用 JSON(即 JavaScript Object Notation),將以一種特定的字符串形式來表示 JavaScript 對象。如果將具有這樣一種形式的字符串賦給任意一個 JavaScript 變量,該...

    JSON教程網8982022-01-03
  • json詳解如何解決使用JSON.stringify時遇到的循環引用問題

    詳解如何解決使用JSON.stringify時遇到的循環引用問題

    這篇文章主要介紹了詳解如何解決使用JSON.stringify時遇到的循環引用問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習...

    汪子熙10972022-02-20
  • json看了就知道什么是JSON

    看了就知道什么是JSON

    JSON(Javascript Object Notation) 是一種輕量級的數據交換格式。易于人閱讀和編寫。同時也易于機器解析和生成。它基于Javascript Programming Language, Standard ECMA-262 ...

    JSON教程網6042022-01-03
  • json厲害了,ECMAScript 新提案:JSON模塊

    厲害了,ECMAScript 新提案:JSON模塊

    第三階段的一個名為JSON模塊的新提議,提出了一種將JSON導入到ES模塊的方法。現在,我們來看看JSON模塊是如何工作的。...

    大遷世界11342021-12-27
  • json告訴大家什么是JSON

    告訴大家什么是JSON

    JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。易于人閱讀和編寫。同時也易于機器解析和生成。...

    json教程網6622022-01-03
  • json使Ext的Template可以解析二層的json數據的方法

    使Ext的Template可以解析二層的json數據的方法

    使Ext的Template可以解析二層的json數據的方法...

    json教程網4982022-01-03
  • jsonJSON學習筆記

    JSON學習筆記

    JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式,易于閱讀和編寫,同時也易于機器解析和生成。它基于ECMA262語言規范(1999-12第三版)中JavaScript編...

    JSON教程網3642022-01-03
主站蜘蛛池模板: 香蕉免费看一区二区三区 | 娇小老少配xxxxx性视频 | 国产精品久久久久久久久久久久久久 | 校草让我脱了内裤给全班看 | 国产在线影院 | 国产男女乱淫真视频全程播放 | 插得好爽 | 美女扒开尿口让男生添 漫画 | 日本啊v在线观看 | 国产成年人网站 | 精品久久免费视频 | 忘忧草秋观看未满十八 | 亚洲精品国产在线网站 | 暖暖 免费 高清 中文 日本 | 波多野结衣亚洲一区 | 亚欧有色在线观看免费版高清 | 日韩免费一级片 | 免费观看视频在线 | 金莲一级淫片aaaaaa | 小黄文污到你湿 | 国产激情久久久久影院小草 | 电车痴汉中文字幕 | 奇米成人| 亚洲第一天堂网 | 日韩毛片高清在线看 | 日本老妇和子乱视频 | 亚洲日本中文字幕天天更新 | 欧美人与牲动交xxx 欧美人妖另类性hd 欧美人人干 | 2012年免费中文视频 | 京东热dj6666 | 草莓影音 | 扒开斗罗美女了的胸罩和内裤漫画 | 国产婷婷综合丁香亚洲欧洲 | 好男人社区www影院在线观看 | 二次元美女脱裤子让男人桶爽 | 7个黑人玩北条麻妃 | 国产伦精品一区二区三区免费观看 | 国产女主播在线播放一区二区 | 五月天精品视频在线观看 | 国产精品最新资源网 | 国自产精品手机在线视频 |