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

CNZPH 發布于2019-08-20 17:06 / 1062人閱讀

摘要：它基于制定的規范的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得成為理想的數據交換語言。用于把一個對象恩，中萬物皆對象，轉化為一個字符串。可以查看到來自于。

JSON

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

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轉化為字符串啦。

第二個參數replacer

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

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

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

第三個參數-space格式化參數

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

JSON.stringify(obj,null,4)

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

JSON.parse()

JSON.parse只擁有兩個參數，第一個就是把這個字符串轉換為JSON對象，第二個就是篩選對象
那么現在如果再有這樣的需求，把一個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

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

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

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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

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

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

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

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

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

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

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

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