18 Vue-Json

时间：2020-12-18 12:31:31 收藏：0 阅读：3

1. 认识Json

JSON: JavaScript Object Notation(JavaScript 对象表示法)；JSON 是存储和交换文本信息的语法，类似 XML。JSON 比 XML 更小、更快，更易解析

//这个 sites 对象是包含 3 个站点记录（对象）的数组。
{
    "sites": [
    { "name":"菜鸟教程" , "url":"www.runoob.com" },
    { "name":"google" , "url":"www.google.com" },
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}

JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON

总结：JSON - 转换为 JavaScript 对象----JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象

tips

eval() 是全局对象的一个函数属性。

eval() 的参数是一个字符串。如果字符串表示的是表达式，eval() 会对表达式进行求值。如果参数表示一个或多个 JavaScript 语句，那么eval() 就会执行这些语句。不需要用 eval() 来执行一个算术表达式：因为 JavaScript 可以自动为算术表达式求值。

如果你以字符串的形式构造了算术表达式，那么可以在后面用 eval()对它求值。例如，假设你有一个变量 x，您可以通过将表达式的字符串值（例如 3 * x + 2）赋值给一个变量，然后在你的代码后面的其他地方调用 eval()，来推迟涉及 x 的表达式的求值。

如果 eval() 的参数不是字符串， eval() 会将参数原封不动地返回。在下面的例子中，String 构造器被指定，而 eval() 返回了 String 对象而不是执行字符串。

1.1. JSON与XML区别

<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>
网站名称: <span id="jname"></span><br />
网站地址: <span id="jurl"></span><br />
网站 slogan: <span id="jslogan"></span><br />
</p>
<script>
var JSONObject= {
	"name":"菜鸟教程",
	"url":"www.runoob.com",
	"slogan":"学的不仅是技术，更是梦想！"
};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jurl").innerHTML=JSONObject.url
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script>

输出结果：

JavaScript 创建 JSON 对象

网站名称: 菜鸟教程
网站地址: www.runoob.com
网站 slogan: 学的不仅是技术，更是梦想！

<sites>
  <site>
    <name>菜鸟教程</name> <url>www.runoob.com</url>
  </site>
  <site>
    <name>google</name> <url>www.google.com</url>
  </site>
  <site>
    <name>微博</name> <url>www.weibo.com</url>
  </site>
</sites>

1.1.1与XML相同点与XML不同点

JSON 是纯文本 json没有结束标签、且更短
JSON 具有"自我描述性"（人类可读） json读写速度更快
JSON 具有层级结构（值中存在值） json能用javaScript内建方法来解析
JSON 可通过 JavaScript 进行解析可以使用数组
JSON 数据可使用 AJAX 进行传输不使用保留字

1.1.2对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

使用 XML

读取 XML 文档
使用 XML DOM 来循环遍历文档
读取值并存储在变量中

使用 JSON

读取 JSON 字符串
用 eval() 处理 JSON 字符串，JSON.Parse 解析 JSON 字符串

1.2 JSON语法

JSON 语法是 JavaScript 对象表示语法的子集。白话：参考javaScript对象表示

数据在名称/值对中
数据由逗号分隔
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象

格式 json示例 JavaScript·赋值

书写格式：key : value → "name" : "菜鸟教程" 不同于 name = "菜鸟教程"

1.2.1 JSON 数据类型

JSON 值可以是：

数字（整数或浮点数）→ {“age”：30}
字符串（在双引号中）→ {"name" : "菜鸟教程"}
逻辑值（true 或 false）→ { "flag": true}
数组（在中括号中）→ { sites:[{"name":"菜鸟教程" , "url":"www.runoob.com"},{"name":"google" , "url":"www.google.com"},{"name":"微博" , "url":"www.weibo.com"}] }
对象（在大括号中） → {"name":"菜鸟教程" , "url":"www.runoob.com"}
null → { "runoob":null }

1.2.2 JSON使用JavaScript语法：

var sites = [
    { "name":"runoob" , "url":"www.runoob.com" },
    { "name":"google" , "url":"www.google.com" },
    { "name":"微博" , "url":"www.weibo.com" }
];

sites[0].name;//runoob

例如以下修改数据：因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：实例

<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>第一个网站名称: <span id="name1"></span></p>
<p>第一个网站修改后的名称: <span id="name2"></span></p>

<script>
var sites = [
	{ "name":"runoob" , "url":"www.runoob.com" },
	{ "name":"google" , "url":"www.google.com" },
	{ "name":"微博" , "url":"www.weibo.com" }
];

document.getElementById("name1").innerHTML=sites[0].name;
// 修改网站名称
sites[0].name="菜鸟教程";
document.getElementById("name2").innerHTML=sites[0].name;
</script>

</body>

1.3 JSON对象与数组详解