码迷,mamicode.com
首页 > Web开发 > 详细

18 Vue-Json

时间:2020-12-18 12:31:31      阅读:3      评论:0      收藏:0      [点我收藏+]

标签:obj   字符   参数表   对象   pre   相同   网站   语法   object   

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对象与数组详解



18 Vue-Json

标签:obj   字符   参数表   对象   pre   相同   网站   语法   object   

原文地址:https://www.cnblogs.com/rango0550/p/14128109.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!