小技巧之JSON.stringify()/parse()

CNZPH 發(fā)布于2019-08-20 17:06 / 1059人閱讀

摘要：它基于制定的規(guī)范的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數(shù)據(jù)。簡潔和清晰的層次結構使得成為理想的數(shù)據(jù)交換語言。用于把一個對象恩，中萬物皆對象，轉化為一個字符串?？梢圆榭吹絹碜杂凇?/p>

JSON

JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數(shù)據(jù)交換格式。它基于 ECMAScript (w3c制定的js規(guī)范)的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數(shù)據(jù)。簡潔和清晰的層次結構使得 JSON 成為理想的數(shù)據(jù)交換語言。 易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率。

JSON.stringify()

用于把一個JSON對象（恩，javascript中萬物皆對象），轉化為一個字符串。

JSON._proto_可以查看到JSON來自于Object。

直接使用

    var obj = [
        {
            name:"Jansen1",
            age:18,
            sex:"boy"
        },
        {
            name:"Jansen2",
            age:18,
            sex:"boy"
        },
        {
            name:"Jansen3",
            age:18,
            sex:"boy"
        },
        {
            name:"Jansen4",
            age:18,
            sex:"boy"
        }
    ];
   var myStringObj = JSON.stringify(obj);

可以看到，通過該操作就可以把obj轉化為字符串啦。

第二個參數(shù)replacer

JSON.stringify呢不僅僅可以直接轉化字符串，還能有條件的轉化字符串，這個時候就要用到第二個參數(shù)了.

當參數(shù)為一個數(shù)組的時候，可以通過key來篩選最終要轉化的字符串JSON.stringify(obj,["name","age"])

當參數(shù)為一個函數(shù)的時候，轉化的結果，全依賴于函數(shù)的返回值。處理順序是如果是個數(shù)組，處理到數(shù)組第一號元素發(fā)現(xiàn)還是數(shù)組或是對象的時候就進去循環(huán)，直到所有的能遍歷的都被處理到再進行下一個運算。JSON.stringify(obj,(key,val)=>{if(key!="sex")return val})

第三個參數(shù)-space格式化參數(shù)

文本添加縮進、空格和換行符,如果space是個數(shù)字的化，最大值是10，過10為10

JSON.stringify(obj,null,4)

可以看到，在控制臺輸出的代碼變的很規(guī)整了。

JSON.parse()

JSON.parse只擁有兩個參數(shù)，第一個就是把這個字符串轉換為JSON對象，第二個就是篩選對象
那么現(xiàn)在如果再有這樣的需求，把一個JSON對象下的所有屬性為sex中的boy，替換為male，girl替換為female，age大于20的age條目不顯示，只要20以下的小鮮肉，那么就很好處理啦

    var testJSON = [
    {
        "name": "Jansen1",
        "age": 18,
        "sex": "boy"
    },
    {
        "name": "Jansen2",
        "age": 2,
        "sex": "girl"
    },
    {
        "name": "Jansen3",
        "age": 19,
        "sex": "girl"
    },
    {
        "name": "Jansen4",
        "age": 22,
        "sex": "boy"
    },
    {
        "name": "Jansen5",
        "age": 22,
        "sex": "boy"
    },
    {
        "name": "Jansen6",
        "age": 22,
        "sex": "girl"
    },
    {
        "name": "Jansen7",
        "age": 19,
        "sex": "boy"
    },
    {
        "name": "Jansen8",
        "age": 19,
        "sex": "boy"
    }
];

var newJSON = JSON.parse(JSON.stringify(testJSON,(key,val)=>{
  if(key === "sex"){
    return val === "boy" ? "male" : "female";
  }
  if(key === "age" && val < 20){
    return val
  }
  else if(key !== "age"){
    return val;
  }
},4))

是不是很容易呢

兼容性

這兩個方法在IE8級以上都能夠實用，需要兼容低版本的瀏覽器，可以在代碼里引用json2.js

鏈接里的代碼就是自己實現(xiàn)的一個JSON，當瀏覽器能檢測到有JSON的時候，就會用現(xiàn)在的，如果檢測不到，才會執(zhí)行代碼。
有興趣的可以先想想不帶參數(shù)的JSON.stringify如何實現(xiàn)再去看看這個鏈接里的寫法

云服務器 GPU云服務器小技巧全集 PowerShell小技巧 ios小技巧 jquery小技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/83406.html

JS使用技巧1——使用fast-json-stringify代替JSON.stringify

摘要：使用的思考使用過對象的程序員最常做的一項工作便是，將對象轉化為字符串。該字符串的用途很多，例如可以使用在的中，在多個頁面間進行傳遞。因為模式是固定的，那么定義模式的空間開銷一定比使用該模式生成字符串的時間開銷代價要小很多。使用JSON.stringify的思考使用過JSON對象的程序員最常做的一項工作便是，將JSON對象轉化為字符串。該字符串的用途很多，例如可以使用在WEB的URL...

cnTomato 2019-08-23 14:00 評論0 收藏0
原生javascript的一些好用的小技巧1

摘要：以下我經常用，又總是記不住的幾個方法轉成數(shù)組形式獲取中的內容關鍵在頁面標簽加載完成事件關鍵在阻止瀏覽器事件默認行為關鍵，記憶方法阻止事件冒泡關鍵，記憶方法數(shù)組的幾個常用方法是數(shù)組的每一項如的下標，每一個元素的順序等同于一個單純的循環(huán)可以對進以下我經常用，又總是記不住的幾個方法 document.querySelectorAll 轉成數(shù)組形式； [].slice.call(docume...

qujian 2019-08-21 17:47 評論0 收藏0
JavaScript專題之深淺拷貝

摘要：專題系列第六篇，講解深淺拷貝的技巧和以及實現(xiàn)深淺拷貝的思路前言拷貝也是面試經典吶數(shù)組的淺拷貝如果是數(shù)組，我們可以利用數(shù)組的一些方法比如返回一個新數(shù)組的特性來實現(xiàn)拷貝。所以我們可以看出使用和是一種淺拷貝。 JavaScript 專題系列第六篇，講解深淺拷貝的技巧和以及實現(xiàn)深淺拷貝的思路前言拷貝也是面試經典吶！數(shù)組的淺拷貝如果是數(shù)組，我們可以利用數(shù)組的一些方法比如：slice、co...

RancherLabs 2019-08-21 11:47 評論0 收藏0
工作中的小技巧整理

摘要：一控制臺輸出數(shù)據(jù)轉換二用法常規(guī)用法情況執(zhí)行邏輯情況執(zhí)行邏輯情況執(zhí)行邏輯執(zhí)行邏輯多種情況共用一套邏輯寫法情況情況這樣為情況或者情況時都是走執(zhí)行邏輯執(zhí)行邏輯情況執(zhí)行邏輯執(zhí)行邏輯三在線編輯軟件四時間格式轉換特殊時間格式轉換為標準時間方法轉換為某天一、控制臺輸出json數(shù)據(jù)轉換 console.info(JSON.stringify(provinceList).replace(/,/g, ,...

zgbgx 2019-08-26 13:27 評論0 收藏0
關于JSON.parse()和JSON.stringify()的性能小測試

摘要：我們一般用來深拷貝，其過程說白了，就是利用將對象序列化字符串，再使用來反序列化還原對象。至于這行代碼為什么能實現(xiàn)深拷貝，以及它有什么局限性等等，不是本文要介紹的。小結論能不用和就不用，采用替代方案且性能更優(yōu)的。 JSON.parse(JSON.stringify(obj))我們一般用來深拷貝，其過程說白了，就是利用 JSON.stringify 將js對象序列化（JSON字符串），再使...

oogh 2019-08-26 13:37 評論0 收藏0