JSON.stringify()妙用

點擊打開視頻講解更加詳細

語法：JSON.stringify(value, replacer , space)

value：將要序列化成一個JSON 字串的值，
replacer（可選）：如果該引數是一個函式，則在序列化程序中，被序列化的值的每個屬性都會經過該函式的轉換和處理；如果該引數是一個陣列，則只有包含在這個陣列中的屬性名才會被序列化到最終的 JSON 字串中；如果該引數為null或者未提供，則物件所有的屬性都會被序列化，
space（可選）：指定縮進用的空白字串，用于美化輸出（pretty-print）；如果引數是個數字，它代表有多少的空格；上限為10，該值若小于1，則意味著沒有空格；如果該引數為字串(字串的前十個字母)，該字串將被作為空格；如果該引數沒有提供（或者為null）將沒有空格，

將JS物件轉換為JSON字串

案例：

const person = {
    name : "末晨曦吖",
    age : "18"
}
console.log(JSON.stringify(person));   {"name":"末晨曦吖","age":"18"}

轉為JSON字串的用處：

本地存盤的時候只能是存盤基本資料型別，陣列和物件等型別存入的話會是[object,object]，所以存陣列或物件型別時，我們就可以想把陣列或物件轉為JSON字串形式，就可以了，
向后端傳遞引數時，有時陣列或物件型別引數，后端接收的是字串格式，所以我們在向后端傳遞的時候，可以向用JSON.stringify()轉為字串格式就可以了，

存盤 localStorage 物件

案例：

person : {
    name : "末晨曦吖",
    age : "18"
}

// 使用 JSON.stringify 轉換為 JSON 字串
// 然后使用 localStorage 保存在 person 名稱里
localStorage.setItem('person', JSON.stringify(this.person));
//取person資料，JSON.parse()將字串轉為物件
JSON.parse(localStorage.getItem('person'))

陣列去重

案例：

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      list : [
        { name : "末晨曦吖",
          age : "18"
        },
        { name : "一笑而過",
          age : "20"
        },
        { name : "一笑而過",
          age : "20"
        },
      ]
    } 
  },
  mounted() {
    this.filter()
  },
  methods:{
    filter(){
      let obj = {};
      this.list.forEach(function(item){
          obj[JSON.stringify(item)] = item;//鍵名不會重復
      })
      this.list = Object.keys(obj).map(function(item){ 
          //Object.keys()回傳物件的所有鍵值組成的陣列，map方法是一個遍歷方法，回傳遍歷結果組成的陣列.將obj物件的鍵名還原成物件陣列
          return JSON.parse(item);
      })
      console.log(this.list)
    }
  }
}
</script>

<style scoped>
 
</style>

效果：
在這里插入圖片描述
存在的問題:{x:1,y:2}與{y:2,x:1}通過 JSON.stringify 字串轉化值不同，但顯然他們是重復的物件，

看起來只要把里面的屬性排序一下，然后再進行下一步就可以了，我調整了一下，代碼如下：

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      list : [
        { name : "末晨曦吖",
          age : "18"
        },
        { name : "一笑而過",
          age : "20"
        },
        { 
          age : "20",
          name : "一笑而過",
        },
      ]
    } 
  },
  mounted() {
    this.filter()
  },
  methods:{
    filter(){
      let obj = {};
      this.list.forEach(function(item){
          let newData = https://www.cnblogs.com/mochenxiya/archive/2022/08/19/{};
          Object.keys(item).sort().map(key => {  //調整屬性順序
            newData[key] = item[key]
          })
          obj[JSON.stringify(newData)] = item; //鍵名不會重復
      })
      this.list = Object.keys(obj).map(function(item){ 
          //Object.keys()回傳物件的所有鍵值組成的陣列，map方法是一個遍歷方法，回傳遍歷結果組成的陣列.將obj物件的鍵名還原成物件陣列
          return JSON.parse(item);
      })
      console.log(this.list)
    }
  }
}
</script>

<style scoped>
 
</style>

效果：
在這里插入圖片描述

實作深拷貝

實際開發中，如果怕影響原資料，我們常深拷貝出一份資料做任意操作

JSON.parse(JSON.stringify(obj))我們一般用來深拷貝，其程序就是利用JSON.stringify 將js物件序列化（JSON字串），再使用JSON.parse來反序列化(還原)js物件；

案例：

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      list : ['1','2','3']
    } 
  },
  mounted() {
    this.deepClone()
  },
  methods:{
    deepClone(){
      let arr = JSON.parse( JSON.stringify(this.list) ) 
      console.log(this.list,'查看兩個陣列是否相同',arr)
      this.list[0] = '2'
      console.log(this.list,'改變其中一個是否影響另個',arr)
    }
  }
}
</script>

<style scoped>
 
</style>

效果：
在這里插入圖片描述

判斷陣列是否包含某物件，或者判斷物件是否相等，

案例：

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      list : [
        { name : "末晨曦吖",
          age : "18"
        },
        { name : "一笑而過",
          age : "20"
        },
      ]
    } 
  },
  mounted() {
    this.handerData()
  },
  methods:{
    handerData(){
      //判斷陣列中是否包含某個物件
      let obj = { name : "末晨曦吖", age : "18" }
      if(JSON.stringify(this.list).indexOf(JSON.stringify(obj)) !== -1){
        console.log('陣列包含物件')
      }
      //判斷陣列是否相等
      let arr = [
        { name : "末晨曦吖",
          age : "18"
        },
        { name : "一笑而過",
          age : "20"
        }
      ]
      console.log('陣列是否相等',JSON.stringify(this.list) === JSON.stringify(arr))
    }
  }
}
</script>

<style scoped>
 
</style>

stringify 函式第二個引數的妙用

還是上面這道題，我們可以在第二個引數上解決物件屬性的順序問題，給它加上一個陣列['name','age']，代碼改為下面這個就沒問題了，適用于引數少的情況下，引數多的話，還是用上面是先排序最好，

案例：

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      list : [
        { name : "末晨曦吖",
          age : "18"
        },
        { name : "一笑而過",
          age : "20"
        },
        { 
          age : "20",
          name : "一笑而過",
        },
      ]
    } 
  },
  mounted() {
    this.filter()
  },
  methods:{
    filter(){
      let obj = {};
      this.list.forEach(function(item){
          obj[JSON.stringify(item,['name','age'])] = item; //鍵名不會重復
      })
      this.list = Object.keys(obj).map(function(item){ 
          //Object.keys()回傳物件的所有鍵值組成的陣列，map方法是一個遍歷方法，回傳遍歷結果組成的陣列.將obj物件的鍵名還原成物件陣列
          return JSON.parse(item);
      })
      console.log(this.list)
    }
  }
}
</script>

<style scoped>
 
</style>

比如說有一個物件{a:1,b:2,c:3,d:4,e:5},現在我們只需要b屬性和e屬性，可以這樣來操作

案例：

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      obj:{ 
        name : "末晨曦吖",
        age : "18",
        hobby:1
      }
    } 
  },
  mounted() {
    this.handerData()
  },
  methods:{
    handerData(){
      let arr = JSON.stringify(this.obj,['name','age'])
      console.log(arr)    //{"name":"末晨曦吖","age":"18"}
    }
  }
}
</script>

<style scoped>
 
</style>

我們給stringify的第一引數傳入json物件，第二引數定義一個陣列，寫下需要留下的屬性即可，

如果是一個陣列物件，也是可以的

案例：

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      list : [
        { name : "末晨曦吖",
          age : "18",
          hobby: 1
        },
        { name : "一笑而過",
          age : "20",
          hobby: 1
        },
      ]
    } 
  },
  mounted() {
    this.handerData()
  },
  methods:{
    handerData(){
      let arr = JSON.stringify(this.list,['name','age'])
      console.log(arr)    //[{"name":"末晨曦吖","age":"18"},{"name":"一笑而過","age":"20"}]
    }
  }
}
</script>

<style scoped>
 
</style>

JSON.stringify() 的第二個引數為一個函式

案例：

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
        obj : { 
          name : "末晨曦吖",
          age : 18,
        }
    } 
  },
  mounted() {
    this.handerData()
  },
  methods:{
    handerData(){
       const arr = JSON.stringify(this.obj, function (key, val) {
            console.log(key, val);
            if (typeof val === 'string') return undefined;
            return val;
        })
      console.log(arr)    //{"age":18}
    }
  }
}
</script>

<style scoped>
 
</style>

JSON.stringify() 的第三個引數

我們想讓stringify的格式更加好看點，我們可以把stringify的引數傳入json物件，第二個引數傳入null，第三個引數傳入‘\t’即可，這樣就會以制表符的形式輸入，就像這樣

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
        obj : { 
          name : "末晨曦吖",
          age : 18,
        }
    } 
  },
  mounted() {
    this.handerData()
  },
  methods:{
    handerData(){
      const arr = JSON.stringify(this.obj, null,'\t')   //換行符
      console.log(arr)    //{"age":18}不在是這樣
                          // {
                          //   "name": "末晨曦吖",
                          //   "age": 18
                          // }
    }
  }
}
</script>

<style scoped>
 
</style>

JSPN.stringify() 第三個引數為一個數字，添加縮進

案例：

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
        list : [
          { name : "末晨曦吖",
            age : "18",
            hobby: 1
          },
          { name : "一笑而過",
            age : "20",
            hobby: 1
          },
        ]
    } 
  },
  mounted() {
    this.handerData()
  },
  methods:{
    handerData(){
      const arr = JSON.stringify(this.list, null,4)   //縮進
      console.log(arr)    
    }
  }
}
</script>

<style scoped>
 
</style>

效果：

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502337.html

標籤：其他

上一篇：02 要想專案跑，輪子不可少

下一篇：事件回圈：微任務和宏任務在v8中實作的簡單理解

【面試題】JSON.stringify()妙用，你真的知道嗎？

JSON.stringify()妙用

將JS物件轉換為JSON字串

存盤 localStorage 物件

陣列去重

實作深拷貝

判斷陣列是否包含某物件，或者判斷物件是否相等，

stringify 函式第二個引數的妙用

JSON.stringify() 的第二個引數為一個函式

JSON.stringify() 的第三個引數