IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JSON.stringify用法 -> 正文阅读

[JavaScript知识库]JSON.stringify用法

1、是什么
JSON.stringify 方法将某个对象转换成 JSON 字符串形式

const userInfo= {
    name: 'zs',
    age: 20
}
console.log(JSON.stringify(userInfo));
// {"name":"zs","age":20}

2、语法
语法: 可以有三个参数,第一个是传入要序列化的值,第二个为函数或者数组,第三个是文本添加缩进、空格和换行符

JSON.stringify(value[, replacer[, space]])
  • value:第一个参数,将要序列后成 JSON 字符串的值。
  • replacer:【可选】第二个参数
    (1) 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;
    (2) 如果参数是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
    (3) 如果该参数为未提供或者null ,则对象所有的属性都会被序列化。
  • space:【可选】第三个参数,美化文本格式,文本添加缩进、空格和换行符,
    (1) 如果 该参数 是一个数字,则返回值文本在每个级别缩进指定数目的空格
    (2) 该参数最大值为10,如果 该参数大于 10,则文本缩进 10 个空格。
    (3)该参数也可以使用非数字,如:\t。最大值为10

3、replacer用法

参数replacer: 为函数的时候

第一种情况为函数的时候,则它有两个参数,键(key) 和 值(value),并且两个参数都会被序列化。我们可以通过此函数过滤一些我们要操作的键值

 - 序列化传入为对象时,若 replacer 函数返回 undefined 或者函数,则值会被忽略
// repalcer 接受两个参数 key value
function replacer(key, value) {
// key value 分别为对象的每个键值对
 if (typeof value === "string") {
    return undefined ;
  }
  return value;
}
const userInfo= {
    name: 'zs',
    age: 20,
    sex: '男'
}
console.log(JSON.stringify(userInfo, replacer));
// {"age":20}
- 序列化传的是数组,若 replacer 函数返回 undefined ,当前值不会被忽略,而将会被 null 取代。
function replacer(key, value) {
// key value 分别为对象的每个键值对
 if (typeof value === "string") {
    return undefined ;
  }
  return value;
}
const foodList= ['苹果',1,'2',222]
console.log(JSON.stringify(foodList, replacer));
// [null,1,null,222]

参数replacer:为数组时

则仅转换该数组中具有键值的成员

const userInfo= {
    name: 'zs',
    age: 20,
    sex: '男'
}
console.log(JSON.stringify(userInfo, ['name','sex']));
//{"name":"zs","sex":"男"}

4、注意点

  • 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值
JSON.stringify([new Number(1), new String("String"), new Boolean(true)]);
// [1,"String",true]

  • 转换的值如果存在toJSON(),则toJSON() 方法返回什么值,序列化结果就返回什么值,其余值会被自动忽略
const userInfo= {
    name: 'zs',
    age: 20,
    sex: '男',
    toJSON(){
     return '我是toJSON方法的返回值'
  }
}
console.log(JSON.stringify(userInfo));
// "我是toJSON方法的返回值"
  • 出现Date 对象,则JSON.stringify() 会把Date 的值序列化 为时间格式字符串。
console.log(JSON.stringify(new Date()));
// '"2022-03-11T06:51:12.812Z"'
  • JSON.stringify()只能序列化可枚举属性,不可枚举的属性默认会被自动忽略
const userInfo= {}
Object.defineProperty(userInfo, "work", {
    content: '遛狗',
    adrress: '广州',
    enumerable: false
});
Object.defineProperty(userInfo, "time", {
    value: '11.am',
    enumerable: true
});
console.log(JSON.stringify(userInfo));
// {"time":"11.am"}
  • 出现Symbol值,则会被自动忽略
const userInfo= {
  name: 'zs',
  [Symbol('ageSymbol')]: 'ageSymbol'
}
console.log(JSON.stringify(userInfo));
// {"name":"zs"}

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-12 17:23:13  更:2022-03-12 17:26:30 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 6:58:44-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码