一篇文章带你了解JavaScript json 对象
前端进阶学习交流
共 2618字,需浏览 6分钟
· 2022-04-20
回复“前端”即可获赠前端相关学习资料
一、对象的语法
JSON 对象被大括号环绕 {},JSON 对象被写成key/value。
{ "name":"John", "age":30, "car":null }
key必须是字符串,并且value必须是一个有效的JSON数据类型(字符串、数字、对象、数组、布尔值或空),Keys 和 values 由冒号分隔,每个key/value对被逗号分隔。
二、访问对象的值
可以使用点(.)访问对象值。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>项目title>
head>
<body style="background-color: aqua;">
<p>Access a JSON object using dot notation:p>
<p id="demo">p>
<script>
var myObj, x;
myObj = {
"name": "John",
"age": 30,
"car": null
};
x = myObj.name;
document.getElementById("demo").innerHTML = x;
script>
body>
html>
还可以使用方括号([])访问对象值:
<script>
var myObj, x;
myObj = {
"name": "John",
"age": 30,
"car": null
};
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
script>
三、循环一个对象
可以使用for-in循环,遍历一个对象。
<script>
var myObj = {
"name": "John",
"age": 30,
"car": null
};
for (x in myObj) {
document.getElementById("demo").innerHTML += x + "
";}
script>
使用括号表示法访问属性值:
<script>
var myObj, x;
myObj = {
"name": "John",
"age": 30,
"car": null
};
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
script>
四、嵌套的 JSON 对象
JSON的值可以是另外一个JSON对象。
myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
}
}
您可以访问嵌套的JSON对象使用点符号或括号:
x = myObj.cars.car2;
//or:
x = myObj.cars["car2"];
1. 修改值
你可以使用点表示法修改JSON对象的任何值:
myObj.cars.car2 = "Mercedes";
js完整代码:
<script>
var myObj, i, x = "";
myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
}
}
myObj.cars.car2 = "Mercedes";
for (i in myObj.cars) {
x += myObj.cars[i] + "
";}
document.getElementById("demo").innerHTML = x;
script>
你也可以使用方括号来修改一个JSON对象值:
myObj.cars["car2"] = "Mercedes";
js完整代码:
<script>
var myObj, i, x = "";
myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
}
}
myObj.cars["car2"] = "Mercedes";
for (i in myObj.cars) {
x += myObj.cars[i] + "
";}
document.getElementById("demo").innerHTML = x;
script>
2. 删除对象的属性
使用delete关键字从JSON对象删除一个属性:
delete myObj.cars.car2;
完整代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>项目title>
head>
<body style="background-color: aqua;">
<p>How to delete properties of a JSON object.p>
<p id="demo">p>
<script>
var myObj, i, x = "";
myObj = {
"name": "John",
"age": 30,
"cars": {
"car1": "Ford",
"car2": "BMW",
"car3": "Fiat"
}
}
delete myObj.cars.car2; //通过语句删除内容。
for (i in myObj.cars) {
x += myObj.cars[i] + "
";}
document.getElementById("demo").innerHTML = x;
script>
body>
html>
五、总结
本文基于JavaScript基础,介绍了json 对象中,语法的使用,如何去访问对中的值,如何去循环对象。如何去嵌套JSON 对象。对象中如何去嵌套数组,常见的修改,删除数组,都做了详细的讲解。
通过丰富的案例分析,效果图的展示,能够帮助你更好的理解。
代码很简单,希望能够帮助你。
------------------- End -------------------
往期精彩文章推荐:
欢迎大家点赞,留言,转发,转载,感谢大家的相伴与支持
想加入前端学习群请在后台回复【入群】
万水千山总是情,点个【在看】行不行
评论
JavaScript 可视化:Promise执行彻底搞懂
深入探讨了 JavaScript 中 Promise 的内部机制,解释了它们如何使异步任务以非阻塞方式执行,并展示了 Promise 的创建、状态变化以及与事件循环的关系。正文从这开始~~JavaScript 中的 Promise 一开始可能会让人感到有些难以理解,但是如果我们能够理解其内部的工作原
高级前端进阶
0
了解加密货币到加密货币的互换
1、什么是加密货币互换?加密货币到加密货币的互换是指以现行市场汇率将一种加密货币直接兑换为另一种加密货币。与需要法定货币存款和较长流程的传统交易所不同,加密货币到加密货币的互换可以无缝地促进交换。掉期在提高加密货币的流动性和效率方面发挥着重要作用。该功能使用户能够将他们的加密货币与钱包中的其他代币进
区块链头条
0
JavaScript 可视化:Promise执行彻底搞懂
大厂技术 高级前端 Node进阶点击上方 程序员成长指北,关注公众号回复1,加入高级Node交流群深入探讨了 JavaScript 中 Promise 的内部机制,解释了它们如何使异步任务以非阻塞方式执行,并展示了 Promise 的创建、状态变
程序员成长指北
2
PyPy为什么能让Python比C还快?一文了解内在机制
我的小册:(小白零基础用Python量化股票分析小册) ,原价299,限时特价2杯咖啡,满100人涨10元。来源:机器之心「如果想让代码运行得更快,您应该使用 PyPy。」—— Python 之父 Guido van Rossum对于研究人员来说,迅速把想法代码化并查看其是否行得通至关重要。Pyth
菜鸟学Python
0
每天骑的共享单车是什么通信原理,有人了解过吗?
转自:网络我们经常骑的共享单车到底是什么通信原理,有人了解过吗?现在就带大家了解下。一、智能车锁共享单车最核心的硬件是智能车锁,主要用于实现控制和定位功能。车锁内集成了嵌入式芯片(通信模块),GPS模块和物联网SIM卡。智能锁制造商通过在锁内集成带有独立号码的SIM卡,通过2G、3G、4G网络,与云
菜鸟学Python
1
面试官:你了解 QPS、TPS、RT、吞吐量 这些高并发性能指标吗?
大家好,我是路人,更多优质文章见个人博客:http://itsoku.com一、QPS,每秒查询QPS:Queries Per Second意思是“每秒查询率”,是一台服务器每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准。互联网中,作为域名系统服务器的机器的性能
路人甲Java
0
通过写作,我是如何靠一篇文章,实现被动收入3万的 ?
大家好, 我是刘志军,以前是一名996程序员,现在自由职业,做独立开发和自媒体。今天跟大家分享一个案例, 我是如何靠一篇文章变现3万的。文章是去年7月写的,截止目前带给我的总收益是4470美元,按当前的汇率来算是32000多一点。每天带来的佣金收益大概有20美元属于真正的被动收入,用来补贴奶粉钱完全
python之禅
0
带你玩转Linux系统之lscpu命令
链接:https://bbs.huaweicloud.com/blogs/422603一、lscpu命令介绍lscpu 是一个 Linux 命令,用于显示CPU架构的详细信息。它可以用来查看 CPU 的型号、主频、架构、虚拟化支持等。二、lscpu命令的使用帮助2.1 命令格式lscpu [选项]2
良许Linux
0