您现在的位置是:首页 > Javascript
当前栏目
一篇文章带你了解JavaScript json 数组
2023-03-14 09:36:09 时间
简单说,所谓对象,就是一种无序的数据集合,由若干个“键值对”(key-value)构成。
一、数组作为JSON对象
- [ "Ford", "BMW", "Fiat" ]
在JSON中的数组,几乎和在JavaScript中数组相同。
在JSON中,数组的值必须是字符串,数字、对象、数组、布尔值或空.
JavaScript中,数组的值可以是以上所有,再加上其他任何有效的JavaScript表达式,包括函数、日期、和undefined。
二、JSON对象中的数组
数组可以是对象属性的值:
- {
- "name":"John",
- "age":30,
- "cars":[ "Ford", "BMW", "Fiat" ]
- }
1. 访问数组的值
使用索引号访问数组值:
- x = myObj.cars[0];
完整代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>项目</title>
- </head>
- <body style="background-color: aqua;">
- <p id="demo"></p>
- <script>
- myObj = {
- "name": "John",
- "age": 30,
- "cars": ["Ford", "BMW", "Fiat"]
- }
- x = myObj.cars[0];
- document.getElementById("demo").innerHTML = x;
- </script>
- </body>
- </html>
2. 遍历数组
你可以使用for-in循环遍历数组:
- for (i in myObj.cars) {
- x += myObj.cars[i];
- }
或者可以使用for循环:
- for (i = 0; i < myObj.cars.length; i++) {
- x += myObj.cars[i];
- }
三、JSON对象中的嵌套数组
数组值也可以是另一个数组,甚至另一个JSON对象:
- myObj = {
- "name":"John",
- "age":30,
- "cars": [
- { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
- { "name":"BMW", "models":[ "320", "X3", "X5" ] },
- { "name":"Fiat", "models":[ "500", "Panda" ] }
- ]
- }
访问数组内部的数组, 使用for-in loop循环:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>项目</title>
- </head>
- <body style="background-color: aqua;">
- <p>Looping through arrays inside arrays.</p>
- <p id="demo"></p>
- <script>
- var myObj, i, j, x = "";
- myObj = {
- "name":"John",
- "age":30,
- "cars": [
- { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
- { "name":"BMW", "models":[ "320", "X3", "X5" ] },
- { "name":"Fiat", "models":[ "500", "Panda" ] }
- ]
- }
- /*访问数组内部的数组, 使用for-in loop循环*/
- for (i in myObj.cars) {
- x += "<h1>" + myObj.cars[i].name + "</h1>";
- for (j in myObj.cars[i].models) {
- x += myObj.cars[i].models[j] + "<br>";
- }
- }
- document.getElementById("demo").innerHTML = x;
- </script>
- </body>
- </html>
1. 修改数组值
使用索引号修改数组:
- myObj.cars[1] = "Mercedes";
完整代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>项目</title>
- </head>
- <body>
- <p id="demo"></p>
- <script>
- var myObj, i, x = "";
- myObj = {
- "name":"John",
- "age":30,
- "cars":[ "Ford", "BMW", "Fiat" ]
- };
- myObj.cars[1] = "Mercedes";
- for (i in myObj.cars) {
- x += myObj.cars[i] + "<br>";
- }
- document.getElementById("demo").innerHTML = x;
- </script>
- </body>
- </html>
2. 删除数组中的项目
使用delete关键字从数组中删除:
- delete myObj.cars[1];
四、总结
本文基于JavaScript基础,讲解了JSON数组中,如何以数组作为JSON的对象 ,对象中如何去嵌套数组,常见的修改,删除数组,都做了详细的讲解。
希望大家可以根据文章的内容,积极尝试,有时候看到别人实现起来很简单。但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。
代码很简单,希望能够帮助你。
本文转载自微信公众号「前端进阶学习交流」,可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?