search

博客列表 >常用数组函数的应用、ajax和json的认识

常用数组函数的应用、ajax和json的认识

残破的蛋蛋
残破的蛋蛋原创
2021年01月22日 17:42:04513浏览

常用数组函数的应用、ajax和json的认识

一、常用的数组函数

1.push()方法在数组尾部添加一个新的元素，需要注意的是，该方法返回值是得到的新数组的长度。

  • 语法

arr.push(element1, element2, element3,…)

  1. console.log(arr.push(1, 2, 3)); // 3
  2. console.log(arr); // [1, 2, 3]

2.pop()方法从数组中删除最后一个元素。

  • 语法

arr.pop()

  1. console.log(arr.pop()); // 3

3.unshift()方法向数组的头部添加一个或多个元素，并返回新的数组长度。

  • 语法

arr.unshift(element1, element2, element3,…)

  1. arr.unshift(1, 2, 3); // 3
  2. console.log(arr); // [1, 2, 3]

unshift方法不会创建新的数组，而是改变原来的数组。

4.join()按照指定分隔符将所有数组元素组合成为一个字符串。

  • 语法

arr.join(separator)

其中，separator为分隔符，默认是使用逗号作为分隔符的，同时，该方法返回的是一个字符串，通过分隔符把arr中的每个元素连接起来。

  1. arr = ["电脑", "手机", "相册"];
  2. let res = arr.join('-');
  3. console.log(res); // 电脑-手机-相册

在JS中，字符串也可以当做数组来操作：

  1. let str = "Hello";
  2. console.log(str[0], str[1], str[2], str[3], str[4]); // H e l l o

5.concat()通过合并现有数组来创建一个新的数组。

  • 语法

arr.concat(array1,array2,…,arrayX)

  1. console.log("hello ".concat("world")); // hello world
  2. console.log([1, 2, 3].concat([4, 5], [6, 7])); // [ 1, 2, 3, 4, 5, 6, 7 ]
  3. console.log([1, 2, 3].concat(123, ["php", true], { x: 1, y: 2 })); // [ 1, 2, 3, 123, "php", true, {x: 1,y: 2} ]

6.slice()从已有的数组中选定元素并返回一个新数组。

  • 语法

arr.slice(start, end)

  • 参数说明：
参数 说明
start 必填参数，规定从什么地方开始取。若是负数，将从数组尾部开始计算，-1表示数组的最后一个元素，-2表示数组的倒数第二个元素，以此类推。
end 这是一个可选参数，规定了从何处结束取值，并且取的位置不包含该值，如果没有指定该参数，则从start一直取到末尾。 
  1. arr = [1, 2, 3, 4, 5];
  2. console.log(arr.slice(0, 3)); //[ 1, 2, 3 ]
  3. console.log(arr.slice(3)); // [4, 5]
  4. console.log(arr.slice(-2)); // [4, 5]

7.splice()方法可以从数组添加/删除指定的元素，并且返回的是一个存储了被删除项目的数组。

  • 语法

arr.splice(index, num, item1,item2,…,itemX)

  • 参数说明
参数 说明
index 必填参数，规定了从何处添加/删除数组，若是负数，将从数组尾部开始计算，-1表示数组的最后一个元素，-2表示数组的倒数第二个元素，以此类推。
num 必填参数，规定了要删除的项目数量，如果为0，则表示不删除项目。
item1,item2,…,itemX 向数组中添加的新项目，该参数为可选参数

splice()方法的返回值是一个数组，里面包含了被删除的元素。

  1. arr = [1, 2, 3, 4, 5];
  2. res = arr.splice(2); // [ 3, 4, 5 ]

可以利用该方法更新一个数组里面的元素，例如：

  1. arr = [1, 2, 3, 4, 5];
  2. res = arr.splice(1, 2, 88, 99);
  3. console.log(res); // [2, 3]

从上面代码可以获取res的值为一个数组，就是被删掉的元素2,3，同时原来的数组arr被修改成了[1, 88, 99, 4, 5]

8.sort()可以对数组元素进行排序。

arr.sort(orderby)

参数 说明
orderby 可选参数，规定了排序方式，注意：该参数必须是一个函数。
  • 解释：

sort()方法在参数留空的时候，默认是按照字母表的顺序排序的，如果要说的更准确的话，应该说它是按照元素的字符编码的顺序进行排序的。

如果是按照其他方法排序的话，就需要传一个函数进行比较了，该函数有两个参数a和b，然后我们比较这两个参数的差值即可得到排序：

  • 当a - b < 0时，则a应该出现在b的前面，返回一个小于0的值；

  • 当a - b = 0时，则返回0；

  • 当a - b > 0时，则返回一个大于0的值

  1. arr = ["p", "b", "a"];
  2. // 默认按照字符表顺序排序
  3. console.log(arr.sort()); // [ "a", "b", "p" ]

现在我们新创建一个数组并对其进行排序：

  1. arr = [10, 9, 22, 4];
  2. console.log(arr.sort);

通过测试，可以发现，数组内部的元素并没有按照数值大小从小到大的顺序排列，结果如图：

sort()

要实现这个功能，就必须在sort()方法内部传一个函数：

  1. function sortArray(a, b) {
  2.     return a - b;
  3. }
  4. console.log(arr.sort(sortArray));

以上方法可以使用箭头函数直接写在sort()方法内部：

  1. console.log(arr.sort((a, b) => a - b));

这样就实现了排序，结果如图：

sort()

9.forEach()方法可以遍历数组。

  • 语法

arr.forEach(function (item, index, array), this)

参数 说明
function (item, index, array) 必填参数，每个元素调用的函数。item 当前遍历的元素；index 当前元素的索引；array 当前遍历的数组。
thisValue 可选参数，传递给函数的值使用this的值。

10.filter()方法可以过滤出符合指定条件的元素，兵返回一个新的数组，该方法不会改变原始数组，而是创建一个新的数组。

arr.filter(function (item, index, array), thisValue)

参数 说明
function (item, index, array) 必填参数，每个元素调用的函数。item 当前遍历的元素；index 当前元素的索引；array 当前遍历的数组。
thisValue 可选参数，传递给函数的值使用this的值。
  • 案例：获取数组里面的所有偶数值：
  1. arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
  2. res = arr.filter(item => !(item % 2));
  3. console.log(res); // [ 2, 4, 6, 8, 10, 12 ]

二、json的认识

JSON是什么？

  • JSON: JavaScript Object Notation(JS 对象表示法)
  • JSON 独立于任何编程语言, 几乎所有编程语言都提供了访问 JSON 数据的 API 接口
  • JSON 是一种语法,用来序列化其它语言创建的数据类型
  • JSON 仅支持 6 种数据类型:对象,数组,数值,字符串,布尔值,null
  • JSON 只是借用了 JS 中的一些数据表示语法,与 JS 并无关系

2.1 JSON.stringify()

JSON.stringify()方法将一个JavaScript对象或值转换为JSON字符串，如果指定了一个replacer函数，则可以选择性地替换值，或者指定的replacer是数组，则可选择性地仅包含数组指定的属性。

  • 语法

JSON.stringify(value[, replacer [, space]])

  • 参数说明
参数 说明
value 需要转为JSON字符串的值
replacer 可选参数。如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
space 可选参数。指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。
  • 只传一个参数：
  1. console.log(JSON.stringify(3.14), typeof JSON.stringify(3.14)); // 3.14 string
  2. console.log(JSON.stringify("php.cn")); // "php.cn"
  3. console.log(JSON.stringify({ x: 5, y: 6 })); // {"x":5,"y":6}
  4. console.log(JSON.stringify(true), typeof JSON.stringify(true)); // true string
  5. console.log(JSON.stringify(null), typeof JSON.stringify(null)); // null stringtrue string
  • 传两个参数：

replacer参数可以是一个函数，也可以是一个数组。如果传入的是一个函数，那么这个函数有两个参数，key（键）和value（值）。

  • 案例
  1. console.log(
  2.     JSON.stringify({a: 1, b: 2, c: 3}, (key, value) => {
  3.         if (value < 2) {
  4.             return undefined;
  5.         }
  7.         return value;
  8.     })
  9. );
  • 效果图：

JSON.stringify()

在开始时, replacer函数会被传入一个空字符串作为 key 值，代表着要被stringify的这个对象。随后每个对象或数组上的属性会被依次传入。

函数应当返回JSON字符串中的value, 如下所示:

  • 如果返回一个 Number, 转换成相应的字符串作为属性值被添加入 JSON 字符串。
  • 如果返回一个 String, 该字符串作为属性值被添加入 JSON 字符串。
  • 如果返回一个 Boolean, “true” 或者 “false” 作为属性值被添加入 JSON 字符串。
  • 如果返回任何其他对象，该对象递归地序列化成 JSON 字符串，对每个属性调用 replacer方法。除非该对象是一个函数，这种情况将不会被序列化成JSON字符串。
    如果返回 undefined，该属性值不会在 JSON 字符串中输出。

如果 replacer 是一个数组，数组的值代表将被序列化成 JSON 字符串的属性名。

  1. console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, ["a", "b"])); // {"a":1,"b":2}
  • 传入第三个参数
  1. console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, null, 2));
  2. console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, null, "****"));
  • 效果图

JSON.stringify()

JSON对象属性必须加双引号，字符串也必须加双引号。

2.2 JSON.parse()

  • 语法

JSON.parse(text[, reviver])

参数 说明
text 必填参数。将要被转换成JS对象的字符串
reviver 可选参数。转换器, 如果传入该参数(函数)，可以用来修改解析生成的原始值，调用时机在 parse 函数返回之前。 
  1. let obj = JSON.parse(`{"a":1,"b":2,"c":3}`);
  2. console.log(typeof obj); // object
  3. console.log(obj.a); // 1

如果指定了reviver函数，则解析出的 JavaScript 值（解析值）会经过一次转换后才将被最终返回（返回值）。JSON对象是由内向外解析的。

  1. obj = JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
  2.     // 打印k（属性）值，可以发现它的值以此为：1 2 4 6 5 3，
  3.     // 从而得知遍历顺序是从内向外的，直到最后一个是空字符串
  4.     console.log(k);
  5.     // 返回原始属性值，相当于没有传递revier参数。
  6.     return v;
  7. });
  8. console.log(obj);
  • 效果图

obj

三、ajax的请求

3.1 什么是同步和异步请求

同步请求：就是在发送一个请求之后，需要等待服务器响应返回，才能够发送下一个请求。

异步请求：和同步请求相对，异步不需要等待响应，随时可以发送下一次请求。+

3.2 什么是AJAX

AJAX（全称：Asynchronous JavaScript and XML，异步JavaScript和XML） 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

3.3 AJAX请求步骤

  1. 创建 xhr 对象: const xhr = new XMLHttpRequest()
  2. 配置 xhr 参数: xhr.open(type, url)
  3. 处理 xhr 响应: xhr.onload = (...) => {...}
  4. 发送 xhr 请求: xhr.send(...)

xhr对象常用方法：

方法 说明
open(method,url,async) 规定请求类型，url以及是否异步处理请求。 <br> - method：请求的类型；GET 或 POST <br > url：文件在服务器上的位置 <br >async：true（异步）或 false（同步）
send(string) 将请求发送到服务器。 <br> **string：仅用于POST请求。

以下是一个GET请求的案例：

  1. <button>ajax-get</button>
  2. <p></p>
  3. <script>
  4.     btn = document.querySelector('button');
  5.     // xhr 请求步骤
  6.     btn.onclick = () => {
  7.         // 1. 创建xhr对象：
  8.         let xhr = new XMLHttpRequest();
  9.         console.log(xhr);
  10.         // 2.配置xhr参数：
  11.         xhr.open("get", "test1.php?id=2");
  12.         xhr.responseType = "json";
  13.         // 3.处理xhr响应：
  14.         xhr.onload = () => {
  15.             console.log(xhr.response);
  16.             // 将dom响应渲染到页面中
  17.             let user = `${xhr.response.user}: ${xhr.response.email}`;
  18.             document.querySelector("p").innerText = user;
  19.         };
  20.         xhr.onerror = () => {
  21.             console.log(xhr.);
  22.         };
  23.         // 4.发送xhr请求：
  24.         xhr.send(null);
  25.     }
  26. </script>
  • 效果图：

get请求案例

以下方法是一个POST请求的案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>AJAX-POST请求</title>
  7. </head>
  8. <style>
  9.     .login {
  10.         width: 20em;
  11.         border: 1px solid;
  12.         padding: 0 1em 1em;
  13.         background-color: lightcyan;
  14.         margin: 2em auto;
  15.         display: grid;
  16.         place-items: center;
  17.     }
  19.     .login form {
  20.         display: grid;
  21.         grid-template-columns: 3em 1fr;
  22.         gap: 1em 0;
  23.     }
  25.     /* 按钮与提示信息显示在第二列 */
  26.     .login form button,
  27.     .tips {
  28.         grid-area: auto / 2;
  29.     }
  30. </style>
  31. <body>
  32.     <div class="login">
  33.         <h3>用户登录</h3>
  34.         <form action="" onsubmit="return false">
  35.             <label for="email">邮箱:</label>
  36.             <input type="email" name="email" id="email" />
  37.             <label for="password">密码:</label>
  38.             <input type="password" name="password" id="password" />
  39.             <button>提交</button>
  40.             <span class="tips"></span>
  41.         </form>
  42.     </div>
  43.     <script>
  44.         const form = document.forms[0];
  45.         console.log(form);
  46.         const btn = document.querySelector(".login button");
  47.         const tips = document.querySelector(".tips");
  49.         // let formData = new FormData(form);
  50.         // formData.append("email", form.email.value);
  51.         // formData.append("password", form.password.value);
  52.         // console.log(formData.get("email"), formData.get("password"));
  54.         console.log(new FormData(form))
  55.         btn.onclick = ev => {
  56.             // 1.创建xhr对象：
  57.             const xhr = new XMLHttpRequest();
  58.             // 2.配置xhr参数：
  59.             xhr.open('post', 'test2.php');
  60.             // 3.处理xhr响应：
  61.             xhr.onload = () => tips.innerHTML = xhr.response;
  62.             xhr.onerror = () => console.log("Error");
  63.             // 4.发送xhr请求
  64.             xhr.send(new FormData(form));
  65.         }
  66.     </script>
  67. </body>
  68. </html>
  • 效果图：

AJAX-POST

3.4 AJAX跨域请求

3.4.1 什么是cors

CORS（Cross-Origin Resource Sharing 跨源资源共享），当一个请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

同源策略: 为请求的安全，浏览器禁止通过脚本发起一个跨域的请求，只允许通过脚本发起基于同源的请求。

同源指: 协议相同,域名/主机名相同,端口相同。

  • 协议不同

http://www.abc.com http

https://www.abc.com https

  • 主机不同

https://www.a.com

https://www.b.com

  • 端口不同

https://a.cn:8080

https://a.cn:9090

  • 以下是一个基于GET请求的CORS请求的案例
  1. <button>ajax-get-cors</button>
  2. <p></p>
  3. <script>
  4.     const btn = document.querySelector("button");
  5.     btn.onclick = ev => {
  6.         // 1. 创建 xhr 对象:
  7.         const xhr = new XMLHttpRequest();
  8.         // 2. 配置 xhr 参数:
  9.         xhr.open("get", "http://localhost:8087/cors1.php");
  10.         // 3. 处理 xhr 响应:
  11.         xhr.onload = () =>
  12.             (document.querySelector("p").innerHTML = xhr.response);
  13.         // 4. 发送 xhr 请求:
  14.         xhr.send(null);
  15.     };
  16. </script>

以上案例，通过页面地址为：http://localhost:8086/hello/demo3.html请求了地址http://localhost:8087/cors1.php的数据，结果被拦截了：

cors

在服务器端开启跨域许可header('Access-Control-Allow-Origin: http://localhost:8086')即可允许跨域访问了。如果想让任何来源都允许访问，可以使用通配符“”，`header(‘Access-Control-Allow-Origin: ‘)`。

cors

3.4.2 JSONP跨域原理

JSONP（JSON with Padding），从另外一个域请求文件会引起跨域问题，但时请求一些标签内置的src属性却没有这个跨域问题，因此JSONP利用了这个优势，使用script标签替代XMLHttpRequest对象。

以下是一个利用JSONP进行跨域资源请求的实例：

  • 前端HTML代码：
  1. <button>JSONP</button>
  2. <p></p>
  3. <script>
  4.     const btn = document.querySelector('button');
  6.     function getUser(data) {
  7.         console.log(data);
  8.         let user = `${data.name}：${data.email}`;
  9.         document.querySelector('p').innerHTML = user;
  10.     }
  12.     // 正常情况下，我们这个data数据应该是从服务器获取的，但是如果出现了跨域问题就不好解决了，
  13.     // 因此我们可以通过把这个json格式的数据从前端将这个前端需要调用的函数名称告诉服务器上的php,
  14.     // 让php动态生成一个函数调用语句并返回从服务器返回函数调用语句: 
  15.     // getUser({ name: "残破的蛋蛋", email: "canpo@dandan.cn" });
  16.     btn.onclick = () => {
  17.         // 动态生成一个允许跨域请求的html元素
  18.         let script = document.createElement('script');
  19.         // 设置生成的script标签的src属性
  20.         script.src = 'http://localhost:8087/cors3.php?callback=getUser';
  21.         // 将生成的script标签挂在到页面中去
  22.         document.body.insertBefore(script, document.body.firstElementChild);
  23.     };
  24. </script>

后端PHP代码：

  1. // JSONP不需要授权给前端，只要返回一个使用json做为参数的函数调用语句就可以。将前端需要的数据以json格式放到这个函数的参数中就行了，必须要知道前端js要调用的函数名称。
  2. $callback = $_GET['callback'];
  3. // 服务器中需要返回的数据
  4. $data = '{ "name": "残破的蛋蛋", "email": "canpo@dandan.cn" }';
  5. // 在后端生成一条js函数调用语句: getUser({ name: "天蓬老师", email: "tp@php.cn" });
  6. echo $callback . '(' .$data. ')';
  • 效果图：

JSONP

JSONP

上一条：0121-仿电影网站用php动态填充数据下一条：PHP快速入门与常用语法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多