[武汉|结业弟子]JS-万晶|2020年04月03日的日报-技能树.IT修真院

发表于： 2020-04-03 23:53:16

1 1626

今天完成的事情：今天学习了js的JavaScript 对象标记法JSON
明天计划的事情：继续学习后续的内容
遇到的问题：实际操作还是不多需要加深angular的理解以及练习
收获：今天学了json

JSON 是一种存储和交换数据的语法。

JSON 是通过 JavaScript 对象标记法书写的文本。

交换数据

当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。

JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。

我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。

以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

发送数据

如果数据存储在 JavaScript 对象中，可以把该对象转换为 JSON，然后将其发送到服务器。

例如

<!DOCTYPE html>
<html>

<body>

  <h2>把 JavaScript 对象转换为 JSON 字符串，然后发送到服务器。</h2>

  <script>
    var myObj = { "name": "Bill Gates", "age": 62, "city": "Seattle" };
    var myJSON = JSON.stringify(myObj);
    window.location = "/demo/demo_json.php?x=" + myJSON;
  </script>

</body>

</html>

运行结果

接收数据

<!DOCTYPE html>
<html>

<body>

  <h1>把 JSON 格式的字符串，转换为 JavaScript 对象：</h1>

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

  <script>
    var myJSON = '{ "name":"Bill Gates",  "age":62, "city":"Seattle" }';
    var myObj = JSON.parse(myJSON);
    document.getElementById("demo").innerHTML = myObj.name;
  </script>

</body>

</html>

运行结果

存储数据

<!DOCTYPE html>
<html>

<body>

  <h1>通过 local storage 存储并取回数据：</h1>

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

  <script>
    var myObj, myJSON, text, obj;

    // 存储数据：
    myObj = { "name": "Bill Gates", "age": 62, "city": "Seattle" };
    myJSON = JSON.stringify(myObj);
    localStorage.setItem("testJSON", myJSON);

    // 取回数据：
    text = localStorage.getItem("testJSON");
    obj = JSON.parse(text);
    document.getElementById("demo").innerHTML = obj.name;
  </script>

</body>

</html>

运行结果

总结一下什么是 JSON？

JSON 指的是 JavaScript 对象标记法（JavaScript Object Notation）

JSON 是一种轻量级的数据交换格式

JSON 具有自我描述性且易于理解

JSON 独立于语言*

JSON 使用 JavaScript 语法，但是 JSON 格式是纯文本的。

文本可被任何编程语言作为数据来读取和使用。

JSON 格式最初由 Douglas Crockford 提出。

为什么使用 JSON？

因为 JSON 格式仅仅是文本，它能够轻松地在服务器浏览器之间传输，并用作任何编程语言的数据格式。

JavaScript 提供內建函数把以 JSON 格式写的字符串转换为原生 JavaScript 对象：

JSON.parse()

JSON 语法规则

JSON 语法衍生于 JavaScript 对象标记法语法：

数据在名称/值对中

数据由逗号分隔

花括号容纳对象

方括号容纳数组

JSON 数据- 名称和值

JSON 数据写为名称/值对。

名称/值由字段名称构成，后跟冒号和值：

实例

"name":"Bill Gates"

JSON 名称需要双引号。而 JavaScript 名称不需要。

JSON – 求值为 JavaScript 对象

JSON 格式几乎等同于 JavaScript 对象。

在 JSON 中，键必须是字符串，由双引号包围：

JSON

{ "name":"Bill Gates" }

在 JavaScript 中，键可以是字符串、数字或标识符名称：

JavaScript

{ name:"Bill Gates" }

JSON 值

在 JSON 中，值必须是以下数据类型之一：

字符串

数字

对象（JSON 对象）

数组

布尔

null

在 JavaScript 中，以上所列均可为值，外加其他有效的 JavaScript 表达式，包括：

函数

日期

undefined

在 JSON 中，字符串值必须由双引号编写：

JSON

{ "name":"Bill Gates" }

JSON 使用 JavaScript 语法

因为 JSON 语法由 JavaScript 对象标记法衍生而来，所以很少需要其他额外的软件来处理 JavaScript 中的 JSON。

例如

<!DOCTYPE html>
<html>

<body>

  <h1>访问 JavaScript 对象：</h1>

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

  <script>
    var myObj, x;
    myObj = { name: "Bill Gates", age: 62, city: "Seattle" };
    x = myObj.name;
    document.getElementById("demo").innerHTML = x;
  </script>

</body>

</html>

运行结果

或者

<!DOCTYPE html>
<html>

<body>

  <h1>使用括号表示法访问 JavaScript 对象：</h1>

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

  <script>
    var myObj, x;
    myObj = { name: "Bill Gates", age: 62, city: "Seattle" };
    x = myObj["name"];
    document.getElementById("demo").innerHTML = x;
  </script>

</body>

</html>