# JSON ## 简介 JSON（JavaScript Object Notation，JavaScript 对象表示法）是一种由道格拉斯·克罗克福特构想和设计、轻量级的数据交换语言，该语言以易于让人阅读的文字为基础，用来传输由属性值或者序列性的值组成的数据对象。尽管 JSON 是 JavaScript 的一个子集，但 JSON 是独立于语言的文本格式，并且采用了类似于 C 语言家族的一些习惯。 JSON 数据格式与语言无关，脱胎于 JavaScript，但当前很多编程语言都支持 JSON 格式数据的生成和解析。JSON 的官方 MIME 类型是 application/json，文件扩展名是 .json。 ### 简单示例 ```json { "name": "zhangsan", "age": 18, "gender": "male" } { "students": [ { "firstName": "san", "lastName": "zhang" }, { "firstName": "si", "lastName": "li" }, { "firstName": "wu", "lastName": "wang" } ] } ``` * JSON 是一种纯数据格式,它只包含属性，没有方法。 * JSON 的属性必须通过双引号引起来。 * JSON 要求两头有 {} 来使其合法。 * 可以把 JavaScript 对象原原本本的写入 JSON 数据，比如：字符串，数字，数组，布尔还有其它的字面值对象。 ## 常用内置对象介绍 ### Array 对象 1. Array 对象的常用属性：length，获取数组的长度。 2. Array 对象的常用方法 * concat() 方法用于连接两个或多个数组，并返回结果。语法为： ``` arrayObject.concat(arrayX, arrayX, ..., arrayX); ``` 示例： ```js var a = [1, 2, 3]; var b = [4, 5, 6]; var c = ["one", "two", "three"]; console.log(a.concat(b, c)); // 打印结果为：[1, 2, 3, 4, 5, 6, "one", "two", "three"] ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591517863152) * join() 方法，将**数组**转换成**字符串**。 ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591517992269) * pop() 方法，删除并返回**数组的最后一个元素**。 ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591518077287) * push() 方法，向数组的**末尾**添加一个或更多元素，并返回新的长度。 ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591518148867) * reverse() 方法，**颠倒**数组的顺序。比如： ```js var a = [1, 2, 3, 4]; a.reverse(); console.log(a); // a 数组变成：[4, 3, 2, 1]。 ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591518217937) * shift() 方法，删除并返回数组的第一个元素。 ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591518270062) * unshift() 方法，向数组的开头添加一个或更多元素，并返回新的长度。 ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591518317579) * slice() 方法，从某个已有的数组返回选定的元素。语法为： ```js arrayObject.slice(start, end); // strat 值是必需的，规定从何处开始选取 // end 值可选，规定从何处结束选取，如果没有设置，默认为从 start 开始选取到数组后面的所有元素 ``` 在控制台中输入以下代码： ```js var a = [1, 2, 3, 4, 5, 6]; a.slice(2, 5); // 结果为[3, 4, 5]，另外需要注意的是该方法不会修改数组，只是返回一个子数组，a 数组还是 [1, 2, 3, 4, 5, 6] ``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591517614910) * splice() 方法，删除或替换当前数组的某些项目。语法为： ```js arrayObject.splice(start, deleteCount, options); // start 值是必需的，规定删除或替换项目的位置 // deleteCount 值是必需的，规定要删除的项目数量，如果设置为 0，则不会删除项目 // options 值是可选的，规定要替换的新项目 // 和 slice() 方法不同的是 splice() 方法会修改数组 ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591518909137) * sort() 方法，将数组进行排序。语法为： ```js arrayObject.sort(sortby); // sortby 是可选的，规定排序顺序，必需是函数。如果没有参数的话，将会按照字母顺序进行排序，更准确的说是按照字符编码（可自行百度了解）的顺序进行排序。如果想按照其他标准进行排序，则需要提供比较函数 ``` ```html ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591519104738) * toString() 方法，把数组转换为字符串，并返回结果。 #### String 对象 1. String 对象的常用属性：length，获取字符串的长度。 2. String 对象的常用方法： * charAt() 方法，获取指定位置处字符。语法为： ```js stringObject.charAt(index); // 字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串 ``` 例子： ```js var str = "Hello world!"; document.write(str.charAt(2)); // 以上代码输出为 l ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591519418549) * charCodeAt() 方法，获取指定位置处字符的 Unicode 编码。语法为: ```js stringObject.charCodeAt(index); // 字符串中第一个字符的下标是 0。如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN ``` 例子: ```js var str = "Hello world!"; document.write(str.charCodeAt(2)); // 以上代码输出为 108 ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591519523810) * concat() 方法，连接字符串，等效于 “+”，“+” 更常用。与数组中的 concat() 方法相似。 * slice() 方法，提取字符串的片断，并在新的字符串中返回被提取的部分（字符串章节有详细介绍，这里不过多的赘述，下面的类似情况同样处理）。 * indexOf() 方法，检索字符串。 * toString() 方法，返回字符串。 * toLowerCase() 方法，把字符串转换为小写。 * toUpperCase() 方法，把字符串转换为大写。 * replace() 方法，替换字符串中的某部分。 * split() 方法，把字符串分割为字符串数组 #### Date 对象 Date 对象方法： Date()：返回当日的日期和时间（输出的是中国标准时间）。 getDate()：从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay()：从 Date 对象返回一周中的某一天 (0 ~ 6)。 getMonth()：从 Date 对象返回月份 (0 ~ 11)。 getFullYear()：从 Date 对象以四位数字返回年份。 getHours()：返回 Date 对象的小时 (0 ~ 23)。 getMinutes()：返回 Date 对象的分钟 (0 ~ 59)。 getSeconds()：返回 Date 对象的秒数 (0 ~ 59)。 getMilliseconds()：返回 Date 对象的毫秒(0 ~ 999)。 Math 对象 Math 对象的常用属性： E ：返回常数 e (2.718281828...)。 LN2 ：返回 2 的自然对数 (ln 2)。 LN10 ：返回 10 的自然对数 (ln 10)。 LOG2E ：返回以 2 为底的 e 的对数 (log2e)。 LOG10E ：返回以 10 为底的 e 的对数 (log10e)。 PI ：返回 π（3.1415926535...)。 SQRT1_2 ：返回 1/2 的平方根。 SQRT2 ：返回 2 的平方根。 Math 对象的常用方法： abs(x) ：返回 x 的绝对值。 round(x) ：返回 x 四舍五入后的值。 sqrt(x) ：返回 x 的平方根。 ceil(x) ：返回大于等于 x 的最小整数。 floor(x) ：返回小于等于 x 的最大整数。 sin(x) ：返回 x 的正弦。 cos(x) ：返回 x 的余弦。 tan(x) ：返回 x 的正切。 acos(x) ：返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。 asin(x) ：返回 x 的反正弦值。 atan(x) ：返回 x 的反正切值。 exp(x) ：返回 e 的 x 次幂 (e^x)。 pow(n, m) ：返回 n 的 m 次幂 (nm)。 log(x) ：返回 x 的自然对数 (ln x)。 max(a, b) ：返回 a, b 中较大的数。 min(a, b) ：返回 a, b 中较小的数。 random() ：返回大于 0 小于 1 的一个随机数。 # 创建对象和访问对象 ## 通过对象字面量来创建 ```js var student = { name: "zhangsan", age: 18, gender: "male", sayHi: function() { console.log("hi,my name is " + this.name); } }; ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591519922913) 通过 new Object() 创建对象 ```js var student = new Object(); (student.name = "zhangsan"), (student.age = 18), (student.gender = "male"), (student.sayHi = function() { console.log("hi,my name is " + this.name); }); ``` 通过工厂函数创建对象 ```js function createStudent(name, age, gender) { var student = new Object(); student.name = name; student.age = age; student.gender = gender; student.sayHi = function() { console.log("hi,my name is " + this.name); }; return student; } var s1 = createStudent("zhangsan", 18, "male"); ``` 自定义构造函数： ```js function Student(name, age, gender) { this.name = name; this.age = age; this.gender = gender; this.sayHi = function() { console.log("hi,my name is " + this.name); }; } var s1 = new Student("zhangsan", 18, "male"); ``` 遍历对象的属性通过 for...in 语句用于遍历数组或者对象的属性，对数组或者对象的属性进行循环操作。比如： ```html ``` 运行截图: ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591521020514) 删除对象的属性 ```js var student = { name: "zhangsan", age: 18, gender: "male" }; student.name; // zhangsan delete student.name; student.name; // undefined ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591521174764) # 内置对象使用案例 1. 写一个函数，格式化日期对象，最终输入形式为：yyyy/MM/dd HH:mm:ss ```html ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591521341981) 2. 写一个函数去掉数组中的重复元素。比如有一个数组 array = ["x", "c", "a", "b", "c", "b", "c"]。 ```html ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591521416094) 3. 写一个函数判断一个字符串中出现次数最多的字符，并统计这个字符出现的次数。比如有这样一个字符串："daskljahiagnaknscsjdwfanalvnahdpwod"。 ```html ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200607-1591521638731) # 总结：在本节中，我们学习了与 JavaScript 相辅相成的数据格式 JSON 和对象的相关操作。主要内容如下： * 常用内置对象：Array 对象、String 对象、Date 对象、Math 对象 * 创建对象和访问对象

“Web开发基础”实验报告