文章目录
JS函数和对象封装数据
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ES5没有类这个概念：函数、对象 ES6:class
// 函数来封装数据
function Student(name, age) {
this.name = name;
this.age = age;
this.eat = function() {
console.log("吃饭");
}
}
var stu = new Student("张三", 23);
console.log(stu.name); //张三
console.log(stu.age); //23
stu.eat(); //吃饭
var stu2 = new Student("李四", 24);
console.log(stu2.name); //李四
console.log(stu2.age); //24
stu2.eat(); //吃饭
console.log("--------------------");
var obj = new Object();
obj.num = 20;
obj.name = "张三";
obj.test = function () {
console.log("test");
}
console.log(obj.num); //20
console.log(obj.name); //张三
obj.test(); //test
</script>
</body>
</html>
对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var person = {
name: '张三',
age: 23,
gender: '男',
flag: true,
eat: function() {
console.log("吃饭");
}
}
var name = person.name;
var age = person.age;
console.log(name); //张三
console.log(age); //23
person.eat(); //吃饭
</script>
</body>
</html>
JSON
JSON简介
JSON: JavaScript Object Notation（JavaScript 对象标记法）。
JSON 是一种存储和交换数据的语法。
交换数据
当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。
JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。
我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。
以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。
发送数据
如果您的数据存储在 JavaScript 对象中，您可以把该对象转换为 JSON，然后将其发送到服务器。
接收数据
如果您以 JSON 格式接收到数据，您能够将其转换为 JavaScript 对象。
存储数据
在存储数据时，数据必须是某种具体的格式，并且无论您选择在何处存储它，文本永远是合法格式之一。
JSON 让 JavaScript 对象存储为文本成为可能。
什么是 JSON？
- JSON 指的是 JavaScript 对象标记法（JavaScript Object Notation）
- JSON 是一种轻量级的数据交换格式
- JSON 具有自我描述性且易于理解
- JSON 独立于语言
JSON 使用 JavaScript 语法，但是 JSON 格式是纯文本的。
文本可被任何编程语言作为数据来读取和使用。
JSON语法
JSON 语法衍生于 JavaScript 对象标记法语法：
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号容纳对象
- 方括号容纳数组
JSON 名称需要双引号。而 JavaScript 名称不需要。
在 JSON 中，键必须是字符串，由双引号包围：
JSON
{"name": "John"}
JavaScript
{name: "John"}
在 JSON 中，字符串值必须由双引号编写：
JSON
{"name": "Bill"}
在 JavaScript 中，您可以书写使用双引号或单引号的字符串值：
JavaScript
{name: 'Bill'}
JSON文件
- JSON 文件的文件类型是
.json - JSON 文本的 MIME 类型是
application/json
JSON VS XML
下面的 JSON 和 XML 实例都定义了雇员对象，包含了由 3 个雇员构成的数组：
JSON
{"employees":[
{ "firstName":"Bill", "lastName":"Gates" },
{ "firstName":"Steve", "lastName":"Jobs" },
{ "firstName":"Elon", "lastName":"Musk" }
]}
XML
<employees>
<employee>
<firstName>Bill</firstName>
<lastName>Gates</lastName>
</employee>
<employee>
<firstName>Steve</firstName>
<lastName>Jobs</lastName>
</employee>
<employee>
<firstName>Elon</firstName>
<lastName>Musk</lastName>
</employee>
</employees>
最大的不同在于：
XML 必须使用 XML 解析器进行解析。而 JSON 可通过标准的 JavaScript 函数进行解析。
为什么JSON比XML更好？
- XML 比 JSON 更难解析。
- JSON 被解析为可供使用的 JavaScript 对象。
JSON数据类型
在 JSON 中，值必须是以下数据类型之一：
- 字符串
- 数字
- 对象（JSON 对象）
- 数组
- 布尔
- Null
JSON 的值不可以是以下数据类型之一：
- 函数
- 日期
- undefined
具体地：
-
JSON 中的字符串必须用双引号包围
-
JSON 中的数字必须是整数或浮点数
-
JSON 中的值可以是对象
-
{ "employee":{ "name":"Bill Gates", "age":62, "city":"Seattle" } }
-
-
JSON 中的值可以是数组
-
{ "employees":[ "Bill", "Steve", "David" ] }
-
-
JSON 中的值可以是
true/false -
JSON 中的值可以是
null。
JSON.parse()
JSON 的常规用途是同 web 服务器进行数据传输。
在从 web 服务器接收数据时，数据永远是字符串。
通过 JSON.parse() 解析数据，这些数据会成为 JavaScript 对象。
var str = '{"name": "Bill Gates", "age": "33", "city": "Seattle"}';
// JSON字符串里面必须是双引号，外面必须是单引号
var obj = JSON.parse(str);
console.log(obj.name + ":" + obj.age);
// Bill Gates:33
解析日期
JSON 中不允许日期对象。
如果您需要包含日期，请写为字符串。
之后您可以将其转换回日期对象：
var str2 = '{"name": "John", "birth": "1999-9-9"}';
var obj2 = JSON.parse(str2);
var birth = new Date(obj2.birth);
console.log(typeof birth + ":" + birth);
// object:Thu Sep 09 1999 00:00:00 GMT+0800 (中国标准时间)
解析函数
JSON 中不允许函数。
如果您需要包含函数，请把它写作字符串。
稍后您可以把它转换回函数：
您应该避免在 JSON 中使用函数，函数会丢失它们的作用域，而且您还需要使用 eval() 把它们转换回函数。
JSON.stringify()
JSON 的常规用途是同 web 服务器进行数据交换。
在向 web 服务器发送数据时，数据必须是字符串。
通过 JSON.stringify() 把 JavaScript 对象转换为字符串。
var obj = {
name: '张三',
age: 23,
married: false
};
//JavaScript对象转换为JSON字符串
var str = JSON.stringify(obj);
console.log(str);
//{"name":"张三","age":23,"married":false}
JSON对象
对象语法：
JSON 对象被花括号 {} 包围。
JSON 对象以键/值对书写。
键必须是字符串，值必须是有效的 JSON 数据类型（字符串、数字、对象、数组、布尔或 null）。
键和值由冒号分隔。
每个键/值对由逗号分隔。
{ "name":"Bill Gates", "age":62, "car":null }
访问对象值
您可以通过使用点号.来访问对象值：
myObj = { "name":"Bill Gates", "age":62, "car":null };
x = myObj.name;
您也可以使用方括号[]来访问对象值：
myObj = { "name":"Bill Gates", "age":62, "car":null };
x = myObj["name"];
遍历对象
您能够通过使用 for-in 遍历对象属性；
在 for-in 循环中，请使用括号标记法来访问属性值：
var obj = {
name: '张三',
age: 23,
married: false
};
// 遍历JSON对象
for (key in obj) {
console.log(key);
}
/* name age married */
for (key in obj) {
console.log(obj[key]);
}
/* 张三 23 false */
嵌套的JSON对象
var person = {
"name": "张三",
"age": 20,
"car": {
"color": "白色",
"price": 2000
},
"arr": [20, 30, 60, 100]
}
// 您能够通过使用点号和括号访问嵌套的 JSON 对象
console.log(person.car.color);
// 白色
console.log(person["arr"][1]);
// 30
JSON数组
JSON 中的数组几乎与 JavaScript 中的数组相同。
在 JSON 中，数组值的类型必须属于字符串、数字、对象、数组、布尔或 null。
数组可以是对象属性的值：
{
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ]
}
数组中的值也可以另一个数组，或者甚至另一个 JSON 对象：
myObj = {
"name":"Bill Gates",
"age":62,
"cars": [
{ "name":"Porsche", "models":[ "911", "Taycan" ] },
{ "name":"BMW", "models":[ "M5", "M3", "X5" ] },
{ "name":"Volvo", "models":[ "XC60", "V60" ] }
]
}
JSONArray
//JSON数组
var jsonArr=[
{
"name":"张三",
"age":20,
"car":{
"color":"白色",
"price":2000
},
"arr":[20,30,60,100]
},
{
"name":"张三",
"age":20,
"car":{
"color":"白色",
"price":2000
},
"arr":[20,30,60,100]
},
{
"name":"张三",
"age":20,
"car":{
"color":"白色",
"price":2000
},
"arr":[20,30,60,1000000]
}];