首页 > 其他分享 >【面试题】JSON.stringify()妙用，你真的知道吗？

【面试题】JSON.stringify()妙用，你真的知道吗？

时间：2022-08-19 23:36:30浏览次数：83  
标签：面试题 obj name age list stringify JSON

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 = {};
          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>

效果：

在这里插入图片描述

标签：面试题,obj,name,age,list,stringify,JSON
From： https://www.cnblogs.com/mochenxiya/p/16606886.html

相关文章

  • 前端面试题
    1.函数柯里化柯里化就是将一个接收多个参数的函数转化为一系列使用一个参数的函数的技术。实现的效果就是：constfun=(a,b,c)=>{return[a,b,c]};//上述函数经......
  • sql-面试题
    TopN问题需要确定使用什么排名函数，包含三种函数：row_number()、rank()、dense_rank()每个班级的分数为前3名的学生--建表语句createtablescore(sidstring,classstr......
  • 面试题-三个与SQL相关的问题
    一、SQL语法总结（面试：你能记得有多少种SQL的语法）？ 二、select语句的顺序。 三、多表关联中，on与where的区别。 四、左连接、右连接、内连接、交叉连接有什么区别，你在......
  • python JSON.parse
    一、JSON的解析方法有两种：eval()和JSON.parse()varjsonstr='{"str1":"Hello,","str2":"world!"}';varevalJson=eval('('+jsonstr+')');varjsonParseJson=JSON.parse......
  • Vue面试题05：Vue中如何扩展一个组件（应用题）
    Vue中如何扩展一个组件按照逻辑扩展和内容扩展来列举逻辑扩展的方法：mixins、extends、compositionapi内容扩展的方法：slots使用方法、使用场景和问题混入：mixi......
  • go json文件的序列化和反序列化
    gojson文件的序列化和反序列化packagemainimport( "encoding/json" "fmt")typev40struct{ V41int V42string}typejsonFilestruct{ V1string......
  • Vue面试题04：双向数据绑定相关
    双向数据绑定使用和原理定义：vue中双向绑定就是指v-model指令，可以绑定一个响应式数据到视图，同时视图中变化能同步改变该值。v-model是语法糖，作用在表单项和自定义组件......
  • SpringMvc 如何同时支持 Jsp 和 Json 接口？
    后端同学基本都会见过这种场景：在同一个工程中，有些页面使用jsp模版渲染，同时还有其他接口提供Json格式的返回值。为了同时支持这两种场景，我们一般是如何处理的呢？ 其实非常......
  • Springboot 通过FastJson实现bean对象和Json字符串互转
    Json格式在后台服务中的重要性就不多说了，直入正题。首先引入pom文件，这里使用的是1.2.83版本1<dependency>2<groupId>com.alibaba</groupId>3......
  • 计算机网络常见面试题
    一、计算机网络分层体系结构（五层举例）应用层：为应用程序提供交互服务。在互联网中的应用层协议很多，如域名系统DNS、HTTP协议、SMTP协议等。传输层：负责向两台主机进程之间的......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99