Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS数组函数|JSON函数|get,post发起ajax请求|跨域原理
Blogger Information
Blog 41
fans 0
comment 0
visits 40995
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS数组函数|JSON函数|get,post发起ajax请求|跨域原理
幸福敲门的博客
Original
1234 people have browsed it

自选10个数组函数进行练习;
实例演示JSON二个函数,以及所有参数的功能;
熟练使用get,post发起ajax请求;
理解跨域的原理，并写出cors,jonp的源码并做出总结;
预习jQuery和Vue知识;

一、JS数组函数

栈方法：后进先出
队：先进先出
push 写进 pop()在数组的尾部进行增删
unshift() shift()在数组的头部进行增删
join(): 指定分割符返回字符串 与split()相反
concat() 数组合并
slice() 返回数组中的部分成员 创建数组副本
splice(开始索引，删除的数量，插入的数据。。) 数组的增删改，它的本职工作时删除元素
排序 sort()
map()
过滤 filter()
reduce(callback(perv,curr),0)

声明空数组：

  1. let arr = [];

1.1push(),pop()在数组的尾部进行增删

  1. <script>
  2. let arr = [10,20,30,40,50,60,77,88];
  3. let pusha= arr.push(99,100);
  4. console.log(arr,pusha);
  5. //  "10,20,30,40,50,60,77,88"
  7. let arr1 = [10,20,30,40,50,60,77,88];
  8. let popc= arr1.pop();
  9. console.log(arr1,popc);
  10. //[ 10,20,30,40,50,60,77,88 ] 被删除者：88
  11. </script>

图示：
push(),pop()在数组的尾部进行增删
1.2shift() 删除数组开头第一项

  1. <script>
  2.      let arr= [6,8,14,19,20];
  3.      let shifta= arr.shift();
  4.      console.log(arr,shifta);
  5. </script>

图示：
shift() 删除数组开头第一项
1.3unshift()数组的开头添加一个或多个元素

  1. <script>
  2. let arr = [1,2,3,4,5];
  3.    let unshfita=arr.unshift(9,23);
  4.    console.log(unshfita,arr);
  5. </script>

图示：
unshift()数组的开头添加一个或多个元素

1.4join(): 与字符串的split()相反,将数组转为字符串返回

  1. <script>
  2. arr = ["china", "girl", "beautifu"];
  3. let joina = arr.join("--");
  4. console.log(joina);
  5. //输出 china--girl--beautifu
  6. //可以把字符串用数组方式输出
  7. let str = "beautifu";
  8. console.log(str[0], str[1], str[2],str[3],str[4]);
  9. //输出 b e a u t
  10. </script>

图示：
join()字符串输出

1.5concat()数组合并

  1. <script>
  2. console.log("china".concat(" beautiful"));//输出 chinabeautiful
  3. console.log([1, 2, 3].concat("we").concat({ a: 1, b: 2,c:3 }));
  4. //输出[1, 2, 3, "we", {…}]不论内容是什么，都会被合并成数组
  5. </script>

图示：
concat()数组合并

1.6slice(): 返回数组中的部分成员

  1. <script>
  2. arr = [1, 2, 3, 4, 5,6,7];
  3. console.log(arr.slice(0, 5));
  4. //输出[1,2,3,4,5]:从索引0位置开始，取5个元素
  5. console.log(arr.slice(-4));
  6. //输出[4,5,6,7]:从结尾位置开始，取4个元素
  7. </script>

图示：
返回数组中的部分成员

1.7splice(开始索引,删除的数量,插入的数据…): 数组的增删改

  1. <script>
  2. arr = [10, 20, 30, 40, 50];
  3. console.log(arr.splice(4));
  4. //4从索引4的位置开始，后边的都删除
  5. console.log([10, 20, 60, 70, 80]);
  6. //4从索引2的位置开始，后边的都删除
  7. res = arr.splice(2, 2, ...[66, 120]);
  8. console.log(arr);
  9. //第一个2表示从索引2位置开始，第二个2表示替换几个元素
  10. res = arr.splice(1, 0, ...[72, 39]);
  11. //第二个数字为0表示不替换，只新增
  12. </script>

图示：
splice增改查

1.8排序 sort()

  1. <script>
  2.  arr = ["p", "b", "a"];
  3.       console.log(arr);
  4.       // 默认按字母表顺序
  5.       arr.sort();
  6.       console.log(arr);
  7.       arr = [10, 9, 22, 4];
  8.       console.log(arr);
  9.       //   arr.sort();
  10.       arr.sort((a, b) => a - b);
  11.       console.log(arr);
  13. </script>
  14. 图示：
  15. ![排序 sort()](https://img.php.cn/upload/image/389/561/127/1610347420104733.png "排序 sort()")

1.9遍历

  1. <script>
  2.    arr = [1, 2, 3, 4, 5];
  3.       // 没有返回值
  4.       arr.forEach(item => console.log(item));
  6.       // map对数组每个成员都调用回调进行处理并返回这个数组
  7.       res = arr.map(item => item * 2);
  8.       console.log(res);
  9. </script>

遍历
1.10过滤

  1. <script>
  2.  arr = [1, 2, 3, 4, 5];
  3.       res = arr.filter(item => !(item % 2));
  4.       console.log(res);
  5. </script>

过滤
1.11reduce归纳

  1. <script>
  2. arr = [1, 2, 3, 4, 5];
  3.       res = arr.reduce((prev, curr) => {
  4.         // console.log(prev, curr);
  5.         return prev + curr;
  6.       });
  8.       res = arr.reduce((prev, curr) => prev + curr);
  9.       // 第二个参数是累加的初始值
  10.       res = arr.reduce((prev, curr) => prev + curr, 5000);
  11.       console.log(res);
  13. </script>

归类

二、JSON二个函数以及所有参数的功能

2.1 JSON 是什么

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

2.2JSON 数据类型
| 序号 | 类型 | 描述 |
| 1 | 简单值 |数值,字符串,布尔,null |
| 1 |复合值 | 对象,数组 ||

注意: 不支持undefined(因为除 JS 外,其它语言中没有这个东西)
2.3JS 解析 JSON 的 API
| 序号 | 方法 | 描述 |
| —— | ————————— | ———————————————- |
| 1 | JSON.stringify() | 将 JS 对象,序列化为 JSON 字符串 |
| 2 | JSON.parse() | 将 JSON 字符串,解析为 JS 对象 |

  1. <script>
  2. //字符串 必须加引号
  3. console.log(JSON.stringify("china.girl"),typeof JSON.stringify("china.girl"))
  4. //true 不用加引号
  5. console.log(JSON.stringify(true),typeof JSON.stringify(true))
  6. //null 不用加引号
  7. console.log(JSON.stringify(null),typeof JSON.stringify(null))
  8. // object
  9. //JSON 对象的属性必须加双引号，字符串也必须加引号
  10. console.log(JSON.stringify({x:'a',y:'b'}))
  11. //arrat
  12. console.log(JSON.stringify([1,2,3]),typeof JSON.stringify([1,2,3]))
  13. </script>

图示：
JSON字符串

对json格式字符串的特殊操作,主要通过后面二个参数；第二个参数支持数组和函数

  1. <script>
  2. console.log(JSON.stringify({a:1,b:2,c:3}))
  3. console.log(JSON.stringify({a:1,b:2,c:3},['a','b']))
  4. //函数
  5. console.log(JSON.stringify({a:1,b:2,c:3},(k,v)=>{
  6.     // 将需要过滤掉的数据直接返回undefined
  7.     if(v<2) return undefined
  8.     return v
  9. }))
  10. console.log(JSON.stringify([1,2,3]),typeof JSON.stringify([1,2,3]))
  11. </script>

json支持数组函数

  1. <script>
  2. //数组
  3. console.log(JSON.stringify({ a: 2, b: 3, c: 4 ,d:5}, ["a", "b", "c"]));
  4. //输出{"a":2,"b":3,c:4}
  5. //Json 数组格式
  6. console.log(JSON.stringify({"a":2,"b":3,"c":4}));
  7. //输出{"a":2,"b":3,"c":4}
  8. //函数
  9. console.log(
  10. JSON.stringify({ a: 2, b: 3, c: 4 }, (k, v) => {
  11. // 将需要过滤掉的数据直接返回undefined
  12. if (v < 2) return undefined;
  13.     return v;
  14. })
  15. );
  16. //输出{"b":3,"c":4}
  18. </script>

图示：
函数数组1

第三个参数,用来格式化输出的json字符串

  1. <script>
  2. console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, null, "****"));
  3. </script>
  4. //第三个参数输出
  5. {
  6. ****"a": 1,
  7. ****"b": 2,
  8. ****"c": 3
  9. }

图示：
第三个参数
第二个参数可以对JSON的数据进行处理后再返回

  1. //第二个参数可以对JSON的数据进行处理后再返回
  2. obj = JSON.parse(`{"a":1,"b":2,"c":3}`,(k,v)=>{
  3.     //JSON 对象是由内向外解释
  4.     if(k==="") return v
  5.     return v*2
  6. })
  7. console.log(obj)

图示：

第二个参数转对象

三、get,post发起ajax请求

3.1ajax-get请求

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

php代码：

  1. <?php
  2. $users = [         // 以二维数组模拟数据表信息
  3.       ['id'=>1, 'name'=>'天蓬','email'=>'tp@php.cn','password' =>  md5('123456')],
  4.       ['id'=>2, 'name'=>'灭绝','email'=>'mj@php.cn','password' =>  md5('abc123')],
  5.       ['id'=>3, 'name'=>'西门','email'=>'xm@php.cn','password' => md5('abc888')],
  6. ];
  7. $id = $_GET['id'];        // 查询条件
  8. $key = array_search($id,array_column($users,'id'));   // 在id组成的数组中查询是否存在指定的id,并返回对应的键名
  9. echo json_encode($users[$key]);         // 根据键名返回指定的用户信息

3.2ajax-post请求

  1. <body>
  2.     <div class="login">
  3.       <h3>用户登录</h3>
  4.       <form action="" onsubmit="return false">
  5.         <label for="email">邮箱:</label>
  6.         <input type="email" name="email" id="email" />
  7.         <label for="password">密码:</label>
  8.         <input type="password" name="password" id="password" />
  9.         <button>提交</button>
  10.         <span class="tips"></span>
  11.       </form>
  12.     </div>
  14.     <script>
  15.       const form = document.querySelector(".login form");
  16.       const btn = document.querySelector(".login button");
  17.       const tips = document.querySelector(".tips");
  19.       //   let data = new FormData();
  20.       //   data.append("email", form.email.value);
  21.       //   data.append("password", form.password.value);
  22.       //   console.log(data.get("email"), data.get("password"));
  24.       btn.onclick = ev => {
  25.         ev.preventDefault();
  26.         // 1. 创建 xhr 对象:
  27.         const xhr = new XMLHttpRequest();
  28.         // 2. 配置 xhr 参数:
  29.         xhr.open("post", "test2.php");
  30.         // 3. 处理 xhr 响应:
  31.         xhr.onload = () => (tips.innerHTML = xhr.response);
  32.         // 4. 发送 xhr 请求:
  33.         xhr.send(new FormData(form));
  34.       };
  35.     </script>
  36.   </body>

php代码：

  1. <?php
  2. $users = [        // 使用二维数组模拟用户数据表信息
  3.     ['id'=>1, 'name'=>'天蓬','email'=>'tp@php.cn','password' =>  md5('123456')],
  4.     ['id'=>2, 'name'=>'灭绝','email'=>'mj@php.cn','password' =>  md5('abc123')],
  5.     ['id'=>3, 'name'=>'西门','email'=>'xm@php.cn','password' => md5('abc888')],
  6. ];
  7. $email = $_POST['email'];    // 将通过post获取的数据保存到临时变量中
  8. $password = md5($_POST['password']);
  9. // 使用数组过滤器查询是否存在指定的用户并返回结果
  10. $res = array_filter($users,function($user) use ($email,$password){
  11.     return $user['email'] === $email && $user['password'] === $password;
  12. });
  13. echo count($res) === 1 ? '验证成功' : '验证失败';     // 将结果做为请求响应返回到前端

图示：

四、跨域

CORS ： 跨域资源共享
跨域请求可以是get,也可以是post ,只不过get 居多
cors-post 时，需要再服务器端进行头部设置
jsonp 只能时 get
cors ：跨域资源共享
同源策略：为请求安全，浏览器禁止通过脚本发起一个跨域的请求
只允许通过脚本发起基于同源的请求
同源指：协议相同，域名/主机名相同，端口相同

4.1ajax-get-cors跨域资源共享

  1. <body>
  2.     <button>ajax-get-cors</button>
  3.     <p></p>
  4.     <script>
  5.       // cors: 跨域资源共享
  6.       const btn = document.querySelector("button");
  7.       btn.onclick = ev => {
  8.         // 1. 创建 xhr 对象:
  9.         const xhr = new XMLHttpRequest();
  10.         // 2. 配置 xhr 参数:
  11.         xhr.open("get", "http://world.io/cors1.php");
  12.         // 3. 处理 xhr 响应:
  13.         xhr.onload = () =>
  14.           (document.querySelector("p").innerHTML = xhr.response);
  15.         // 4. 发送 xhr 请求:
  16.         xhr.send(null);
  17.       };
  18.     </script>
  19.   </body>

cors: 跨域资源共享
同源策略: 为请求的安全,浏览器禁止通过脚本发起一个跨域的请求
只允许通过脚本发起基于同源的请求
同源指: 协议相同,域名/主机名相同,端口相同
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
端口不同

4.2ajax-post-cors

  1. <button>ajax-post-cors</button>
  2. <p class="tips"></p>
  3. <script>
  4. // cors: 跨域资源共享
  5. const btn = document.querySelector("button");
  6. const tips = document.querySelector(".tips");
  7. btn.onclick = ev => {
  8. // 1. 创建 xhr 对象:
  9. const xhr = new XMLHttpRequest();
  10. // 2. 配置 xhr 参数:
  11. xhr.open("post", "http://world.io/cors2.php");
  12. // 3. 处理 xhr 响应:
  13. xhr.onload = () => (tips.innerHTML = xhr.response);
  14. // 4. 发送 xhr 请求:
  15. let formData = new FormData();
  16. formData.append("email", "admin@php.cn");
  17.  formData.append("password", "123456");
  18. xhr.send(formData);
  19. };
  20. </script>
  21. //跨域文件头设置 *为全部同意，可以设置单独的域名只允许这个域名
  22. header('Access-Control-Allow-Origin: *')
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post