JSON是JavaScript Object Notation的简称,是一种轻量级的数据交换格式。

JSON使用JS的语法,但其格式只是一个文本,可以被任何编程语言读取病作为数据格式传递。

JSON以JS中对象的形式存储数据,允许数据结构、字符串、数字、boolean和对象的任意组合。

 {"employees":[ 
//对象employees中有三个员工记录,以数组的形式存储
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}

JSON语法规则:

(1)数据为 键/值 对的形式

(2)数据由逗号分隔

(3)大括号保存对象

(4)方括号保存数组

数据(一个名称对应一个值):键/值 对包括字段名称,用双引号包起来,后面一个冒号,然后是值,ex:"firstName":"John"

对象:保存在大括号中,对象内部也可以保存多个 键/值 对。

ex:{"firstName":"John", "lastName":"Doe"}

数组:保存在中括号内,数组中也可以包含对象,

ex:"employees":[
    {"firstName":"John", "lastName":"Doe"},

    {"firstName":"Anna", "lastName":"Smith"},

    {"firstName":"Peter", "lastName":"Jones"}

]

JSON字符串转化为JS对象:

通常我们从服务器中读取JSON数据并在网页上显示。简单起见,在网页中设置JSON字符串。

(1)创建JavaScript字符串,字符串为JSON格式的数据。

 var text = '{ "employees" : [' +
//将各个部分用单引号包起来变成字符串,用+号进行字符串连接
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

(2)使用JS的内置函数JSON.parse( )将字符串转化为JS对象:

var obj = JSON.parse(text);

(3)最后在页面中使用新的JS对象:

 <p id="demo"></p>

 <script>
document.getElementById("demo").innerHTML = obj.employees[1].firstname + " " + obj.employees[1].lastname;
//访问对象obj中employees中第二个元素对象的firstname和lastname属性值
//employees在创建时是一数组的形式创建的,所以employees[1]表示取数组中的第二个值
</script>

获取JSON属性值:

 var myStorage = {
"car": {
"inside": {
"glove box": "maps",
"passenger seat": "crumbs"
},
"outside": {
"trunk": "jack"
}
}
}; var gloveBoxContents = myStorage.car.inside["glove box"];
//对于单词的可以用点操作直接获取,遇到多个单词和空格组合的属性名使用方括号

JSON集合操作:

 var collection = {
2548: {
album: "Slippery When Wet",
artist: "Bon Jovi",
tracks: [
"Let It Rock",
"You Give Love a Bad Name"
]
},
2468: {
album: "1999",
artist: "Prince",
tracks: [
"1999",
"Little Red Corvette"
]
},
1245: {
artist: "Robert Palmer",
tracks: [ ]
},
5439: {
album: "ABBA Gold"
}
}; var collectionCopy = JSON.parse(JSON.stringify(collection)); function update(id, prop, value) { if (value !== '' && prop != 'tracks') {
collectionCopy[id][prop] = value;
} else if(value !== '' && prop == 'tracks'){
collectionCopy[id][prop].push(value);
} else {
delete collectionCopy[id][prop];
} return collection;
} update(5439, "artist", "ABBA");

demo

JavaScript入门学习笔记(JSON)的更多相关文章

  1. JavaScript入门-学习笔记(一)

    JavaScript入门(一) 学习js之前,我们先来了解一下,什么是JavaScript? JavaScript是一种解释型语言.在运行的时候,一边读一边编译一边执行.简单来说就是,在执行js代码时 ...

  2. javascript入门学习笔记2

    JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: 实例 var x // x 为 undefined var x = 6; // x 为数字 var x = "Bil ...

  3. javascript入门学习笔记

    <button type="button" onclick="alert('Welcome!')">点击这里</button>alert ...

  4. JavaScript入门学习笔记(异常处理)

    try:语句测试代码块的错误,当try中的代码块出错时执行catch中的代码块. catch:语句处理错误: throw:语句创建或抛出自定义异常. 三者一起使用可以控制程序流并生成自定义异常信息. ...

  5. JavaScript入门学习笔记(二)

    JavaScript运算符: 算术运算符.赋值运算符和字符串连接运算符. 算法运算符与复制运算符用法参照Java: 字符串运算符: +运算符用于把文本值或字符串变量连接起来,适用于两个或更多字符串变量 ...

  6. JavaScript入门学习笔记(一)

    W3cJavaScript教程 JS是JavaScript的缩写,而JSP是Java Server Page的缩写,后者是用于服务器的语言. JavaScript代码写在标签<script> ...

  7. JavaScript入门-学习笔记(二)

    关于js变量 变量,就是一个用来存储数据的容器 一般来说,我们的变量都是可以得先声明,再使用,就像是一个东西先必须存在,才能看得见摸得着.然而在js里(es5),可以先使用,后声明. a = 100; ...

  8. JavaScript入门学习笔记(表单验证)

    表单验证: 在数据被送到服务器之前对HTML表单中的输入数据进行验证,避免服务器频繁验证信息造成用户体验差. (1)表单数据是否为空 (2)输入的信息格式是否正确 (3)输入数据的类型是否正确 必填( ...

  9. Three入门学习笔记整理

    一.官方网站:https://threejs.org 二.关于Three.js 三.开始 四.实例 基本结构 结果 五.概念 坐标系 场景 相机 灯光 3D模型 六.简单动画 七.交互控制 结束 # ...

随机推荐

  1. JS 函数节流与防抖

    前言 事件的触发权很多时候属于用户,可能会出现下列问题: 向后台发送数据,用户频繁触发,对服务器造成压力: 一些浏览器事件,如window.onresize,window.mousemove等,触发的 ...

  2. python线程join方法

    转载:http://www.cnblogs.com/cnkai/p/7504980.html Python多线程与多进程中join()方法的效果是相同的. 下面仅以多线程为例: 首先需要明确几个概念: ...

  3. 面试题(一GC)

    参考https://blog.csdn.net/m0_38110132/article/details/74542143 6.详谈一下Java内存模型以及GC算法: (1). jvm结构 JVM的内部 ...

  4. Ajax提交表单初接触

    <!doctype html> <html class="no-js"> <head> <meta charset="utf-8 ...

  5. SQL Data Discovery and Classification

    The new version of SQL Server Management Studio (v17.5) brings with it a new feature: SQL Data Disco ...

  6. MySQL索引管理

    一.索引介绍 1.什么是索引 1.索引好比一本书的目录,它能让你更快的找到自己想要的内容. 2.让获取的数据更有目的性,从而提高数据库索引数据的性能. 2.索引类型介绍 1.BTREE:B+树索引 2 ...

  7. windows 8.1 cmd命名提示符全屏

    在 C:\Users\wy\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\System Tools 目录下,右键命令提示符-属性中修改:

  8. P4783 【模板】矩阵求逆

    原题链接 https://www.luogu.org/problemnew/show/P4783 一道模板题,更重要的省选难度..... 题目要求的是一个n*n的逆矩阵,还要对大数取膜. 普通高中生: ...

  9. 【并发编程】【JDK源码】JDK的(J.U.C)java.util.concurrent包结构

    本文从JDK源码包中截取出concurrent包的所有类,对该包整体结构进行一个概述. 在JDK1.5之前,Java中要进行并发编程时,通常需要由程序员独立完成代码实现.当然也有一些开源的框架提供了这 ...

  10. [powershell] 批量重命名,修改文件名中的部分字符串

    实例:替换一个目录下所有的字幕文件从720p到1080p ls $Path -Recurse |ForEach-Object{Rename-Item $_.FullName $_.FullName.R ...