免费网站推广app,河北石家庄地图,php网站后台无法上传图片,福州关键词seo#x1f60a;JSON详细教程 #x1f6a9;JSON简介☃️JSON语法规则#x1f50a;JSON和JavaScript对象的区别 ☃️JSON数据类型字符串#x1f50a;数字#x1f50a;布尔值#x1f50a;数组#x1f50a;对象#x1f50a;Null ☃️JSON对象#x1f50a;访问JSON对象的值JSON详细教程 JSON简介☃️JSON语法规则JSON和JavaScript对象的区别 ☃️JSON数据类型字符串数字布尔值数组对象Null ☃️JSON对象访问JSON对象的值循环对象修改JSON对象的值的方法删除JSON对象属性 ☃️JSON数组访问JSON数组里的值修改JSON数组里的值删除JSON数组元素 ☃️JSON的使用JSON.parse()JSON.stringify()JSON5 总结 各位小伙伴们新文章出炉了 JSON简介 JSON 是 JavaScript 对象表示法JavaScript Object Notation的缩写它是一种轻量级的数据交换格式数据交换是指两设备之间建立连接并互相传递数据的过程。类似XML但比XML更流行它易于阅读和编写并且易于解析和生成。JSON在Web开发领域有着举足轻重的地位。并且大多数编程语言都支持JSON一些本身不支持的语言也可以通过集成第三方库使用JSON。
JSON是基于ECMAScriptEuropean Computer Manufactures Association欧洲计算机协会制定的JS规范的一个子集完全采用独立于编程语言的文本格式来存储和表示数据。JSON易于计算机解析和生成通常用于Web客户端浏览器与Web服务器之间传递数据。
JSON与XML相对比既有优点也有不足。与XML相同的是JSON是纯文本其本身具有“自我描述性人类可读”和XML一样都具有层级结构值中存在值都可以被JavaScript进行解析同时也可以使用AJAX进行传输。与XML不同的是JSON没有结束标签语法格式上相对于XML更简洁且读写速度更快能够使用内建的JavaScript eval()方法进行解析省略了保留字。
之所以使用JSON最主要的原因是JavaScriptJavaScript是Web开发中不可或缺的技术之一而JSON是基于JavaScript的一个子集JavaScript默认就支持JSONJSON被广泛应用于Web开发、移动应用、API接口设计等领域。例如在前后端交互中使用JSON作为数据传输格式可以方便地实现数据的序列化和反序列化。 ☃️JSON语法规则
JSON中的键值对是由一个键和一个值组成它们之间用冒号:分割多个键值对之间用逗号,分割。键必须为字符串类型值可以是字符串、数字、布尔值、对象、数组或null。键和字符串都必须使用双引号括起来。
语法格式
key:value
名称/值对包括字段名称在双引号中后面写一个冒号然后是值
name:学习JSON需要注意的是JSON语法中不能出现单引号和结束分号;因为它是一种纯数据格式不是语句。另外JSON语法还可以使用反斜线\进行转义用于表示一些特殊字符和字符集。
JSON和JavaScript对象的区别
JSON和JavaScript对象有很多相似之处比如它们都可以表示键值对形式的数据都可以通过点运算符访问成员等但在很多方面也有重要的区别 JSON是一种数据格式主要用于在不同编程语言之间传输和共享数据而JavaScript对象则是JavaScript程序中的一个基本概念用于封装数据和行为。 JSON只能包含六种数据类型字符串、数字、布尔值、数组、对象和null而JavaScript对象除了这些之外还可以包含函数和其他类型的值。 JSON中的键必须用双引号包裹而JavaScript对象的键既可以使用单引号也可以使用双引号或不使用引号。 JSON不能包含注释而JavaScript对象则可以包含注释。 JSON是一种纯文本格式可以直接在网络上传输和存储而JavaScript对象则需要被序列化成JSON格式才能在网络上传输和存储。 ☃️JSON数据类型
字符串
JSON中的字符串需要使用双引号定义字符串必须使用双引号不能使用单引号例如hello word字符串中可以包含零个或多个Unicode字符。另外JSON的字符串中也可以包含一些转义字符。
{name:John,sex:男,address:中国
}数字
JSON中的数字既可以是整数也可以是浮点数。但是JSON中不能使用八进制和十六进制表示数字但可以使用e或E来表示10的指数。
{number1:1,number2:2,number3:3
}布尔值
JSON中的布尔值只有两个即true和false。
{value1:true,value2:false
}数组
JSON中的数组是一组有序的值的集合每个值都用逗号分隔例如[1, 2, 3]。
{array:[{name:张三,age:18},{name:李四,age:19},{name:王五,age:20}]
}对象
JSON中的对象是一组键值对的集合每个键值对都用逗号分隔值书写在{}中。JSON对象可以包含多个名称/值对。例如{“name”: “John”, “age”: 30}。
{name:John,age:18,city:New York
}Null
JSON中的null表示没有任何值。 ☃️JSON对象
JSON 对象是由键值对组成的无序集合键和值使用冒号:分隔每个键值对之间使用逗号 ,分隔。键必须是字符串类型值可以是合法的 JSON 数据类型字符串, 数字, 对象, 数组, 布尔值或 nullJSON对象使用在大括号{...}中书写。例如{name: Alice, age: 25}。
实例
{name:张三,age:18,sex:男...
}访问JSON对象的值
点运算符.如果知道键的名称可以使用点运算符直接访问对象中的值。语法格式为 对象.键。例如假设有一个 JSON 对象 person包含键值对 { name: Alice, age: 25 }可以通过 person.name 来访问 name 的值通过 person.age 来访问 age 的值。 运行结果如下 方括号运算符[ ]如果不知道键的名称或者键的名称包含特殊字符可以使用方括号运算符来访问 JSON 对象中的值。语法格式为 对象[键]。例如假设有一个 JSON 对象 person包含键值对 { name: Alice, age: 25 }可以通过 person[name] 来访问 name 的值通过 person[age] 来访问 age 的值。 运行结果如下 假设有一个 JSON 对象 person包含嵌套的键值对
var person {name: Alice,age: 25,address: {street: 123 Main St,city: New York,country: USA}
};要访问嵌套对象中的值可以使用连续的点运算或方括号运算符。例如要访问地址的城市可以使用 person.address.city 或 person[address][city]
var city person.address.city; // New York
var city person[address][city]; // New York运行结果如下 总之使用点运算符或方括号运算符可以根据键的名称或索引值来访问 JSON 对象中的值无论是在一级还是多级嵌套的情况下。
循环对象
在JavaScript中有两种主要的方法可以用来循环JSON对象的属性。
可以使用for-in来循环对象的属性
var jsonObject { name: John, age: 30, city: New York };
for (var key in jsonObject) {if (jsonObject.hasOwnProperty(key)) {console.log(Key: key);console.log(Value: jsonObject[key]);}
}运行结果如下 在使用for...in语句时需要检查对象是否拥有该属性因为某些内置属性也可能被包含在for…in循环中。如果你只想遍历自己的自定义属性可以使用hasOwnProperty()方法。
修改JSON对象的值的方法
要修改JSON对象的值首先需要将JSON字符串转换为JavaScript对象然后再对其中的属性进行修改。以下是具体的步骤
1.将JSON字符串转换为JavaScript对象可以使用JSON.parse()函数将JSON字符串转换为JavaScript对象。
let jsonStr {name:John, age:30, city:New York};
let jsonObj JSON.parse(jsonStr);2.修改JavaScript对象的值可以使用点运算符或方括号运算符来修改JavaScript对象的属性值。
// 使用点运算符
jsonObj.name Mike;// 使用方括号运算符
jsonObj[age] 45;3.将JavaScript对象转换回JSON字符串可以使用JSON.stringify()函数将JavaScript对象转换回JSON字符串。
let updatedJsonStr JSON.stringify(jsonObj);
console.log(updatedJsonStr); // 输出 {name:Mike,age:45,city:New York}运行结果如下 注意在使用JSON.parse()和JSON.stringify()函数时需要确保字符串的内容符合JSON规范否则可能会抛出错误。另外使用方括号运算符可以更灵活地操作属性特别是当不确定属性名称或者属性名称来自变量时。
删除JSON对象属性
要删除JSON对象中的某个属性可以使用JavaScript的delete运算符。
delete jsonObj.age;
//或者使用中括号([])来删除 JSON 对象的属性
delete myObj.sites[age]检查该属性是否已被成功删除
console.log(jsonObj.age); // 输出 undefined运行结果如下 注意在使用delete运算符时如果该属性存在则会被成功删除并且返回true如果该属性不存在则不会报错并且返回false。此外删除了某属性后该属性的值变为undefined但其键仍存在于对象中只是值为空。因此如果想彻底删除某个属性还需要将其从对象中移除。
☃️JSON数组
JSON 数组是有序的值的集合用方括号 [] 表示每个值之间使用逗号 , 分隔。值可以是任意类型包括字符串、数值、布尔值、对象或其他数组。例如[apple, banana, orange]。
实例
{name:网站,num:3,sites:[google,taobao,baidu]
}访问JSON数组里的值
1.索引访问JSON 数组中的值按照索引顺序排列索引从 0 开始。你可以使用方括号运算符 [] 结合索引来访问数组中的值。语法格式为 数组[索引]。例如假设有一个 JSON 数组 fruits包含多个水果
var fruits [apple, banana, orange];可以通过索引访问数组中的值。例如使用 fruits[0] 可以访问数组中的第一个元素使用 fruits[1] 可以访问数组中的第二个元素以此类推。
var firstFruit fruits[0]; // apple
var secondFruit fruits[1]; // banana运行结果如下 2.循环遍历如果想遍历整个 JSON 数组并访问其中的每个值可以使用循环如 for 循环或 forEach 循环来实现。例如使用 for 循环来遍历 fruits 数组
var fruits [apple, banana, orange];for (var i 0; i fruits.length; i) {console.log(fruits[i]);
}运行结果如下 要访问嵌套 JSON 数组中的值可以结合点运算符和方括号运算符。使用点运算符可以直接访问到数组对象在这之上再使用索引或键来访问特定的属性。同时可以使用循环来遍历整个 JSON 数组。
假设有一个 JSON 对象 data包含嵌套的数组
var data {students: [{ name: Alice, age: 20 },{ name: Bob, age: 25 },{ name: Charlie, age: 22 }]
};要访问学生数组中的第一个学生的姓名可以使用 data.students[0].name 或 data[students][0][name]
var name data.students[0].name; // Alice
var name data[students][0][name]; // Alice运行结果如下
修改JSON数组里的值
要修改JSON数组中的值可以先使用JSON.parse()函数将JSON字符串转换为JavaScript数组然后按照以下步骤进行修改
1.通过索引访问数组元素
let jsonArray JSON.parse([{name:John, age:30}, {name:Jane, age:20}]);
let obj jsonArray[0];2.要修改数组元素中的属性可以直接使用点运算符或方括号运算符
obj.name Mike; // 直接使用点运算符
obj[age] 45; // 使用方括号运算符3.修改完对象属性后需要再次将整个数组转换回JSON格式
jsonArray JSON.stringify(jsonArray);
console.log(jsonArray); // 输出 [{name:Mike,age:45},{name:Jane,age:20}]代码运行如下 需要注意的是如果JSON数组中的元素本身也是一个对象那么还需要先将其转换为JavaScript对象才能进行修改。此外修改后的JSON字符串需要再次使用JSON.stringify()函数转换为JSON格式。
删除JSON数组元素
要删除JSON数组中的值可以先使用JSON.parse()函数将JSON字符串转换为JavaScript数组然后按照以下步骤进行删除
1.使用标准的JavaScript数组方法删除元素
let jsonArray JSON.parse([{name:John, age:30}, {name:Jane, age:20}]);// 删除第一个元素
jsonArray.splice(0, 1);console.log(JSON.stringify(jsonArray)); // 输出 [{name:Jane,age:20}]运行结果如下 2.如果想更精确地指定要删除哪个元素也可以通过索引来查找并删除它
let jsonArray JSON.parse([{name:John, age:30}, {name:Jane, age:20}]);// 删除“John”对象
for(let i0; ijsonArray.length; i) {if(jsonArray[i].name John) {jsonArray.splice(i, 1);break;}
}console.log(JSON.stringify(jsonArray)); // 输出 [{name:Jane,age:20}]运行结果如下 需要注意的是这些方法只能删除整个元素而不能删除单个属性。如果要删除属性需要先将元素转换为对象再使用delete运算符删除相应的属性然后将整个数组转换回JSON格式。
☃️JSON的使用
JSON.parse()
JSON.parse() 是一个内置于所有现代浏览器和Node.js中的JavaScript函数用于将符合JSON格式的字符串解码为JavaScript对象。以下是关于JSON.parse()的一些重要细节 语法JSON.parse(text[, reviver]) text必需参数表示要被解析成JavaScript值的字符串。reviver可选参数表示转换器函数它可以处理每个属性。在将属性添加到新创建的对象之前会对每个属性应用此函数。 返回值如果输入的是有效的JSON文本那么JSON.parse()函数将返回一个新的JavaScript对象。如果输入的是无效的JSON文本则会抛出一个SyntaxError异常。 示例 let jsonString {name:John, age:30, city:New York};let obj JSON.parse(jsonString);console.log(obj); // 输出{ name: John, age: 30, city: New York }注意事项 在使用JSON.parse()函数时需要注意输入的字符串必须是有效的JSON格式否则会导致解析失败并抛出错误。如果在解析过程中遇到未知字符或非法语法则会导致JSON.parse()函数停止解析并抛出错误。如果想要更全面地控制解析过程可以提供一个可选的转换器函数作为第二个参数以便在将属性添加到新创建的对象之前对其进行处理。
运行结果如下
JSON.stringify()
JSON.stringify() 是一个内置于所有现代浏览器和Node.js中的JavaScript函数用于将JavaScript值转换为符合JSON格式的字符串。以下是关于JSON.stringify()的一些重要细节 语法JSON.stringify(value[, replacer[, space]]) value必需参数表示要被转换成JSON字符串的JavaScript值。replacer可选参数表示转换器函数或数组它可以决定哪些值应该被包含在最终的JSON字符串中以及它们应如何被转换。space可选参数表示要在输出的JSON字符串中的每个级别前插入多少个空格以提高可读性。 返回值如果输入的值可以被安全地转换为JSON格式那么JSON.stringify()函数将返回一个新的JSON字符串。如果输入的值不能被安全地转换为JSON格式则会抛出一个TypeError异常。 示例 let obj { name: John, age: 30, city: New York };let jsonString JSON.stringify(obj);console.log(jsonString); // 输出{ name: John, age: 30, city: New York }注意事项 在使用JSON.stringify()函数时需要注意JavaScript对象中的函数、RegExp对象、Date对象、DOM节点等特殊类型的值无法被安全地转换为JSON格式因此在转换过程中会被忽略。如果提供的可选参数replacer是一个数组那么只有那些在数组中存在的属性才会被包含在最终的JSON字符串中。如果提供了可选参数space那么在输出的JSON字符串中的每个级别前都会插入相应数量的空格以提高可读性。
运行结果如下
JSON5
JSON5是一种扩展的JSON语法它允许使用一些额外的特性如
多行注释// 和 /* … */)字面量NaN和Infinity布尔值true和false的大写形式函数表达式箭头函数Set和Map结构引用类型类导出和导入字符串模板等等。
JSON5并不直接支持JavaScript的所有功能而是只支持一些常用的特性。这使得它可以在跨平台的环境中更好地工作并且具有更好的兼容性。
注意尽管许多现代浏览器都支持JSON5但并不是所有的环境都支持。因此在实际使用中建议先使用JSON.parse()和JSON.stringify()函数将JSON5转换为标准的JSON然后再进行处理。
总结
总的来说JSON 是一种简洁、易于理解和跨平台的数据格式常用于前后端数据传输和存储。通过学习 JSON我们可以更好地处理和操作数据。 觉得不错的话记得点赞收藏呀
别忘了给我关注~~
