JSON.stringify() 和 JSON.parse()
JSON
JSON,即 JavaScript 对象表示法,是一种用于在系统之间存储和传输复杂数据的文本格式。 Javascript 包含将 JSON 文本转换为对象以及将 JSON 对象转换为文本的简单方法。
这在以下情况下很有用
JSON.stringify() 和 JSON.parse() 是内置函数,可用于 JavaScript 对象和字符串来来回转换它们。
这里,我有一个名为 albums 的专辑对象数组,每个对象包含两个键:“artist”和“title”。
let albums = [ { "artist" : "Herbie Hancock", "title" : "Head Hunters", }, { "artist" : "Beastie Boys", "title" : "Pauls Boutique" }, { "artist" : "The Cramps", "title" : "Bad Music for Bad People" } ]; console.log(albums);
记录此代码将给出以下输出:
// [object Array] (3) [// [object Object] { "artist": "Herbie Hancock", "title": "Head Hunters" },// [object Object] { "artist": "Beastie Boys", "title": "Pauls Boutique" },// [object Object] { "artist": "The Cramps", "title": "Bad Music for Bad People" }]
当调用console.log(albums);时,控制台看到albums是一个数组。它将数组总结为 [object Array],并将其中的每个项目总结为 [object Object],而不是默认展开每个细节。这是控制台的内置简写,表示每个元素都是一个对象。
JSON.stringify()
JSON.stringify() 将 JavaScript 中的复杂数组或对象转换为 JSON 字符串。
在这里,我通过调用专辑上的 JSON.stringify() 方法将专辑数组转换为 JSON 字符串:
let albumStrings = JSON.stringify(albums); console.log(albumStrings);
记录此代码将给出以下输出:
"[{'artist':'Herbie Hancock','title':'Head Hunters'},{'artist':'Beastie Boys','title':'Pauls Boutique'},{'artist':'The Cramps','title':'Bad Music for Bad People'}]"
这给了我们一个由三个对象组成的数组,每个对象都有两个属性。
但是如果我想怎么办..
JSON.stringify() 函数最多接受三个参数:
值:要转换为 JSON 字符串(专辑)的值
Replacer(可选):一个可让您修改每个键值对的函数(空)
空格(可选):每级使用的空格数 (4)
let albumStringsFormat = JSON.stringify(albums, null, 4); console.log(albumStringsFormat);
记录此代码将给出以下输出:
"[ { 'artist': 'Herbie Hancock', 'title': 'Head Hunters' }, { 'artist': 'Beastie Boys', 'title': 'Pauls Boutique' }, { 'artist': 'The Cramps', 'title': 'Bad Music for Bad People' } ]"
在这里,您现在可以看到每个对象
JSON.parse()
接下来,我创建了一个字符串
let albumsString = '[{"artist": "Bad Brains", "title": "Bad Brains"}, {"artist": "A Tribe Called Quest", "title": "Low End Theory"}, {"artist": "Nina Simone", "title": "Wild is the Wind"}]' console.log(albumsString);
记录此代码将给出以下输出:
"[{'artist': 'Bad Brains', 'title': 'Bad Brains'}, {'artist': 'A Tribe Called Quest', 'title': 'Low End Theory'}, {'artist': 'Nina Simone', 'title': 'Wild is the Wind'}]"
如果我记录长度
console.log(albumsString.length); // length of string 162
如果给我的长度是 162,因为。
接下来,如果我解析
let albumsObject = JSON.parse(albumsString); console.log(albumsObject);
记录此代码将给出以下输出:
// [object Array] (3) [// [object Object] { "artist": "Bad Brains", "title": "Bad Brains" },// [object Object] { "artist": "A Tribe Called Quest", "title": "Low End Theory" },// [object Object] { "artist": "Nina Simone", "title": "Wild is the Wind" }]
现在,当我记录对象的长度时
console.log(albumsObject.length); // length of object 3
记录此
console.log(JSON.stringify(albumsObject, null, 4));
记录此代码将给出以下输出:
"[ { 'artist': 'Bad Brains', 'title': 'Bad Brains' }, { 'artist': 'A Tribe Called Quest', 'title': 'Low End Theory' }, { 'artist': 'Nina Simone', 'title': 'Wild is the Wind' } ]"
以上是JSON.stringify() 和 JSON.parse()的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中,如何实现类似于VSCode...
