【May Be DNK】JSON.parse() and JSON.stringify()的两个实用技巧

时间:2022-09-21 12:33:40

结论

一、数据深拷贝

使用方法:JSON.parse(JSON.stringify(param))

let o = {a: 1, b: 2}
let o1 = JSON.parse(JSON.stringify(o))
let o2 = o console.log(o === o2) // true
console.log(o === o1) // false

二、数据过滤

对一个对象中的数据进行处理,譬如过滤掉对象中值为null/undefined的键,我们通常会用Object.keys()逐个遍历key

现在,我们可以这样做:

let o = {
a: 1,
b: null,
c: 'hello'
} let replacer = (k, v) => {if (v) return v}) let s = JSON.stringify(o, replacer)
let res = JSON.parse(s) > res
< {a: 1, c: "hello"} // 或者
s = JSON.stringify(o)
res = JSON.parse(s, replacer) > res
< {a: 1, c: "hello"}

详细介绍

JSON,全称是JavaScript Object Notation(JavaScript 对象表示法),是一种轻量、可读性高的数据结构。

XML类似,它主要用于服务器和web应用之间的数据传输。

键值对(Keys and Values)

构成JSON的两个重要部分是键和值。它们一起组成一个键值对:

Key:一个键通常被一对双引号包裹住。

Value: 有效值是string, number, array, object, null, false, true中的一种(无undefined)。

Key/Value Pair:键值对遵循特定的语法,行如key: value,键值对以逗号分隔。

JavaScript 中的JSON对象有两个方法:parse、stringify,用来处理JSON格式的数据。

1.JSON.stringify(value[, replacer[, space]])

JSON.stringify() 将一个 JavaScript 对象转化成一个 JSON 字符串。

stringify 函数有两个可选参数:replacer and space.

// converting a simple javascript object to JSON object
let my_details = {
"name" : "John",
"age " : "31" ,
"photo" : "

【May Be DNK】JSON.parse() and JSON.stringify()的两个实用技巧的更多相关文章

  1. JSON&period;parse&lpar;&rpar; 和 JSON&period;stringify&lpar;&rpar;

    JSON.parse()和JSON.stringify()   1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf& ...

  2. arguments&period;callee 调用函数自身用法----JSON&period;parse&lpar;&rpar;和JSON&period;stringify&lpar;&rpar;前端js数据转换json格式

    arguments.callee 调用函数自身用法 arguments.callee 在哪一个函数中运行,它就代表哪个函数. 一般用在匿名函数中. 在匿名函数中有时会需要自己调用自己,但是由于是匿名函 ...

  3. 有关javascript中的JSON&period;parse和JSON&period;stringify的使用一二

    有没有想过,当我们的大后台只是扮演一个数据库的角色,json在前后台的数据交换中扮演极其重要的角色时,作为依托node的前端开发,其实相当多的时间都是在处理数据,准确地说就是在处理逻辑和数据(这周实习 ...

  4. JSON&period;parse和JSON&period;stringify 参数详解

    JSON.parse和JSON.stringify这两个浏览器自带(IE6/7除外)的方法平常我们经常用到,但是一般都只是用到了他们的第一个参数,比如字符串转对象:JSON.parse('{}')   ...

  5. Jquery里面种的 JSON&period;parse&lpar;&rpar; 与JSON&period;stringify&lpar;&rpar; 的区别

    JSON.parse()与JSON.stringify()的区别   JSON.parse()[从一个字符串中解析出json对象] Demo: //定义一个字符串 var data='{"N ...

  6. JSON&period;parse与JSON&period;stringify

    JSON:JavaScript Object Notation(JavaScript对象表示法):甚至我们就可以大致认为JSON就是Javascript的对象,只不过范围小上一些. JSON的MIME ...

  7. JSON&period;stringify&lpar;&rpar;方法是将一个javascript值&lpar;对象或者数组&rpar;转换成为一个JSON字符串;JSON&period;parse&lpar;&rpar;解析JSON字符串&comma;构造由字符串描述的javascript值或对象

    JSON.stringify()方法是将一个javascript值(对象或者数组)转换成为一个JSON字符串:JSON.parse()解析JSON字符串,构造由字符串描述的javascript值或对象

  8. JSON&period;parse&lpar;&rpar;和JSON&period;stringify&lpar;&rpar;的解析与用途

    JSON.parse()和JSON.stringify()的解析与用途 1.parse用于从一个字符串中解析出json对象 如: var str = '{"name":" ...

  9. JS之JSON&period;parse和JSON&period;stringify

    这两个函数有兼容性问题, 会报错JSON"未定义 解决方案, 引入json2.js,可以解决浏览器的兼容性 https://link.jianshu.com/?t=https://githu ...

随机推荐

  1. Python OpenCV —— geometric

    用OpenCV画几何图形. import numpy as np import cv2 # Create a black image img = np.zeros((521,512,3), np.ui ...

  2. svg&horbar;Raphael&period;js Library(一)

    Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图. ...

  3. WPF 绑定二&lpar;绑定指定的字符串&rpar;

    xaml: <Window x:Class="WpfApplication1.Window2" xmlns="http://schemas.microsoft.co ...

  4. getopt使用例子

    getopt是linux下获取程序启动参数的函数        #include <unistd.h> int getopt(int argc, char * const argv[], ...

  5. Intent简介

    1 Intent概念 1.1 Intent的作用 指明Intent所要启动的对象 提供将要启动对象组件运行需要的数据 组件类型 启动方法 Activity startActivity(Intent i ...

  6. Azure SQL 数据库的灵活缩放预览版简介

    Eron Kelly SQL Server 产品管理部门产品市场营销总经理 几天前,我们宣布了发布 Azure SQL 数据库的灵活缩放公共预览版.新增的灵活缩放功能通过简化开发和管理,简化了扩展和缩 ...

  7. Best Cow Line &lpar;POJ 3217&rpar;

    给定长度为N的字符串S,要构造一个长度为N的字符串T,起初,T是一个空串,随后反复进行下列任意操作. *从S的头部删除一个字符,加到T的尾部 *从S的尾部删除一个字符,加到T的尾部 目标是要构造字典序 ...

  8. EF Oracle:错误 175

    错误 1 错误 175: 具有固定名称“Oracle.DataAccess.Client”的 ADO.NET 提供程序未在计算机或应用程序配置文件中注册或无法加载.有关详细信息,请参阅内部异常. 安装 ...

  9. Vuex异步请求数据通过computed计算属性值

    问题描述: 使用Vuex管理数据时,在组件内使用$emit分发事件后,获取回来的数据要自动更新到该组件内,需要使用computed来计算更新. 一开始尝试使用赋值给data的方法,后来发现重新发起aj ...

  10. ghost之后仍然中病毒----与病毒的斗争

    ghost之后仍然中病毒----与病毒的斗争我的电脑系统是XP,从来都没有安装任何杀毒软件,所有的软件都是安装在C盘的,感觉系统卡顿就用Windows一键还原(基于DOS下的ghost)还原一下,一直 ...