search

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

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

后网络时代
后网络时代原创
2021年01月13日 15:19:19722浏览

1. 自选10个数组函数进行练习

答：

  1. //array.find(function(currentValue, index, arr),thisValue)
  2. //currentValue    必需。当前元素
  3. //index    可选。当前元素的索引值
  4. //arr    可选。当前元素所属的数组对象
  5. //thisValue可选。 传递给函数的值一般用 "this" 值。
  6. //如果这个参数为空， "undefined" 会传递给 "this" 值
  7. //返回值：    返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined。
  8. var numbers = [4, 12, 16, 20];
  9. function    checknum(num){
  10.  if(num>16){
  11.    return  true;
  12.  }
  14. }
  15. numbers.find(checknum);//20
  16. //array.findIndex(function(currentValue, index, arr), thisValue)
  17. //参数说明同上
  18. //返回值：    返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。
  19. //findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
  20. var numbers = [4, 12, 16, 20];
  21. function    checknum(num){
  22.  if(num>16){
  23.    return  true;
  24.  }
  25. }
  26. numbers.findIndex(checknum);//3
  27. //Array.from(object, mapFunction, thisValue)
  28. //object    必需，要转换为数组的对象。
  29. //mapFunction    可选，数组中每个元素要调用的函数。
  30. //thisValue    可选，映射函数(mapFunction)中的 this 对象。
  31. //from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返   回一个数组。
  32. //如果对象是数组返回 true，否则返回 false。
  33. var setObj = new Set(["a", "b", "c"]);
  34. var objArr = Array.from(setObj);
  35. console.log(objArr);//集合转化成数组
  36. var myr = Array.from("PHP&js");//['P','H','P','&','j','s']
  37.  //Array.of()//把一列值转化成数组
  38. const a = Array.of(2,4,6,8);
  39. Array.isArray(obj)//判断一个对象是不是数组
  40. //indexOf() 方法可返回数组中某个指定的元素位置。
  41. //array.indexOf(item,start)方法可返回数组中某个指定的元素位置。
  42. let  fr=['name','age','sex','tel','email']
  43. fr.indexOf('tel',2);//3
  44. fr.indexOf('tel',4);//-1
  45. //array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
  46. //total初始值，或者计算后的结果。initialValue初始值
  47. var numbers = [1,2,3,4,5];
  49. function getSum(total, num) {
  50. console.log(total+'---------'+num)
  51.     return total - num;
  52. }
  53. numbers.reduceRight(getSum)//从后往前执行的
  54. //reverse() 方法用于颠倒数组中元素的顺序。
  55. var fruits = ["Banana", "Orange", "Apple", "Mango"];
  56. fruits.reverse();
  57. //Mango,Apple,Orange,Banana
  58. //toString()数组转化字符串
  59. var fruits = ["Banana", "Orange", "Apple", "Mango"];
  60. fruits.toString();
  61. //"Banana,Orange,Apple,Mango"
  62. //splice(开始删除的位置，删除长度(为0时是添加)，替换删除长度(不为0时是添加)或添加值（删除长度(为0时是添加)）)
  63. //添加
  64. let  x=[1,2,3,4,5];
  65. rs=x.splice(1,0,'xx');//rs=[],x=[1,'xx',2,3,4,5]
  66. let  xx=[];
  67. rs=xx.splice(1,0,'xx');//rs=[],x=['xx']
  68. //删除
  69. let  y=[1,2,3,4,5];
  70. rs=y.splice(1,3);//rs=[2,3,4],y=[1,5]
  71. //修改
  72. let  yy=[1,2,3,4,5];
  73. rs=yy.splice(1,3,88,99);//rs=[2,3,4],y=[1,88,99,5]

2. 实例演示JSON二个函数,以及所有参数的功能

答案：
JSON.stringify()
语法:JSON.stringify(value[, replacer[, space]])

  • 参数说明：
    • value:
      必需， 要转换的 JavaScript 值（通常为对象或数组）
    • replacer:可选。用于转换结果的函数或数组。
      如果 replacer 为函数，则 JSON.stringify 将调用该 函数，并传入每个成员的键和值。使用返回值而不是原始 值。如果此函数返回 undefined，则排除成员。根对象的 键是一个空字符串：””。
      如果 replacer 是一个数组，则仅转换该数组中具有键值 的成员。成员的转换顺序与键在组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
    • space:可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空 格，如果 space 大于 10，则文本缩进 10 个空格。 space 也可以使用非数字，如：\t。
  1. console.log(JSON.stringify(3),typeof JSON.stringify(3))
  2. //3  string
  3. console.log(JSON.stringify(true),typeof JSON.stringify(true))
  4. //true  string
  5. console.log(JSON.stringify(null),typeof JSON.stringify(3))
  6. //null  string
  7. console.log(JSON.stringify('demo'),typeof JSON.stringify("demo"))
  8. //"demo"  string
  9. //JSON不支持undefined
  10. //属性名称必须包含在字符串中
  11. //第二个参数：array 或function
  12. //数组：
  13. console.log(JSON.stringify(｛a:'10',b:'20',c:'30'｝,['a','b']))//{"a":"10","b":"20"}
  14. //函数：实现过滤，把要排除的结果return  undefined即可
  15. //必须是undefined才行
  16. console.log(JSON.stringify({a:1,b:2,c:3,d:4,e:5,f:6,g:7,h:8,i:9},(k,v)=>{
  17.  if(v>2){   return  undefined;} else  {   return v;}
  18. }))
  19. //第三个参数是用来控制格式输出

JSON.parse()函数
JSON.parse(text[, reviver]) 方法将数据转换为 JavaScript 对象。

  • 参数说明
    • text:必需， 一个有效的 JSON 字符串。
    • reviver: 可选，一个转换结果的函数， 将为对象的每个 成员调用此函数。
      json.parse解析时候是从内向外解析的
      最后一次的键值为空
  1. rs=JSON.parse('{"a":1,"b":2,"c":3}',(k,v)=>{    if(k==="")  return  v;  else    return  v*2 });

3. 熟练使用get,post发起ajax请求

答：

  1. <button>get&post</button>
  2. <p></p>
  3. <script>
  4. //GET方式：
  5. const   bt=document.querySelector('button');
  6. bt.onclick=function(){
  7. //创建xhr对象
  8. const xhr=new  XMLHttpRequest();
  9. //xhr参数配置
  10. xhr.open("get","test.php?id=1");
  11. xhr.responsetype="json";
  12. //处理xhr相应：
  13. xhr.onload=()=>{
  14. console.log(xhr.response);
  15. let  user=xhr.response.name;
  16. document.querySelector('p').innerHTML=user;
  17. }
  18. xhr.onerror=()=>{
  19. console.log(object);
  20. }
  21. //发送xhr请求
  22. xhr.send(null);
  23. }
  24. </script>

服务器端：

  1. <?php
  2. $json=array(
  3. array("id"=>1,"name"=>"test","email"=>"shuju@qq.com"),
  4. array("id"=>2,"name"=>"wangliang","email"=>"wangliang@qq.com")
  5. );
  6. $id=$_GET['id'];
  7. echo   json_encode($json[$id]);
  8. ?>

结果：

POST&表单：

  1.  <form  action="">
  2.         <input   type="email"   name="email"   id="email" />
  3.         <input   type="password"   name="password"   id="password" />
  4.         <button>提交</button>
  5.         <span  class="tips"></span>
  6.         </form>
  8.  <script>
  9.             const   form=document.querySelector('form');
  10.             const   tips=document.querySelector('.tips');
  11.             const   button=document.querySelector('button');
  12.             button.onclick=function(ev){
  13.             ev.preventDefault();
  14.             //或者let  data=new  FormData(form);
  15.             let  data=new  FormData();
  16.             data.append('email',form.email.value);
  17.             data.get('email');
  18.             //与new  FormData(form)等价
  19.             //创建xhr对象
  20.             const xhr=new  XMLHttpRequest();
  21.             //xhr参数配置
  22.             xhr.open("post","test.php");
  23.             xhr.responseType="json";
  24.             //处理xhr相应：
  25.             xhr.onload=()=>{
  26.             document.querySelector('.tips').innerHTML=xhr.response.email+'-----'+xhr.response.password;
  27.             console.log(xhr.response);
  28.             }
  29.             xhr.onerror=()=>{
  30.             console.log(object);
  31.             }
  32.             //发送xhr请求
  33.             xhr.send(new  FormData(form));
  34.             }
  35.             </script>

服务器端：

  1. <?php
  2. print_r(json_encode($_POST));
  3. ?>

结果：

4. 理解跨域的原理，并写出cors,jonp的源码并做出总结

答：
cors：跨域资源共享
同源策略：为了请求安全，浏览器禁止通过脚本发起一个跨域的请求，只允许发起同源请求
同源：协议，主机名/域名，端口(有些浏览器允许端口不一样)

  1. <button>跨域请求</button>
  2. <p></p>
  3. <script>
  4. //跨域方式一：php版本
  5. //header("Access-Control-Allow-Origin:http://hello.io");
  6. //GET方式：
  7. const   bt=document.querySelector('button');
  8. bt.onclick=function(){
  9. //创建xhr对象
  10. const xhr=new  XMLHttpRequest();
  11. //xhr参数配置
  12. xhr.open("get","http://word.io/cors1.php");
  13. xhr.responsetype="json";
  14. //处理xhr相应：
  15. xhr.onload()=>{
  16. console.log(xhr.response);
  17. document.querySelector('p').innerHTML=xhr.response;
  18. }
  19. xhr.onerror=()=>{
  20. console.log(object);
  21. }
  22. //发送xhr请求
  23. xhr.send(null);
  24. }
  25. </script>

get方式的跨域请求:

POST:

  1. <button>跨域请求</button>
  2. <p   class="tips"></p>
  3. <script>
  4. //跨域方式一：php版本
  5. //header("Access-Control-Allow-Origin:http://hello.io");
  6. //GET方式：
  7. const   bt=document.querySelector('button');
  8. bt.onclick=function(){
  9. //创建xhr对象
  10. const xhr=new  XMLHttpRequest();
  11. //xhr参数配置
  12. xhr.open("get","http://word.io/cors1.php");
  13. xhr.responsetype="json";
  14. //处理xhr相应：
  15. xhr.onload=()=>{
  16. document.querySelector('.tips').innerHTML=xhr.response;
  17. }
  18. xhr.onerror=()=>{
  19. console.log(object);
  20. }
  21. //发送xhr请求
  22. let  form=new   FormData();
  23. form.append('email','1232@php.cn');
  24. form.append('password','123456');
  25. xhr.send(form);
  26. }
  27. </script>

服务器端：

  1. <?php
  2. header("Access-Control-Allow-Origin:http://hello.io");//开启跨域请求
  3.     print_r($_POST);
  4. ?>

结果：

jsonp:
jsonp:json with padding (将json填充进来的)
jsonp:念 json padding,把数据包含在一个函数调用中，包含两部分：回调函数+json，回调函数请求收到响应时回调的函数，可以动态设置,回调参数：作为参数传递给函数的数据，jsop是利用可以跨域标签来进行跨域操作的，一边使用的是script标签进行的，jsonp只能完成get请求

  1. <button>jsonp</button>
  2. <p></p>
  3. //json原理：
  4. <script>
  5. function  getUser(data){
  6. console.log(data);
  7. let  user=data.name+":"+data.email;
  8. document.querySelector("p").innerHTML=user;
  9. }
  10. const   bt=document.querySelector('button');
  11. bt.onclick=function(){
  12. //1.动态生成一个跨域的script标签
  13. let  script=document.createElement('script');
  14. script.src="http://word.io/cors2.php?callback=getUser";
  15. document.body.insertBefore(script,document.body.firstElementChild);
  16. }
  17. </script>

服务器端：

  1. <?php
  2. header("Access-Control-Allow-Origin:http://hello.io");
  3. echo  "get方式的跨域请求";
  4. ?>

结果：

  1. <?php
  2. $callback=$_GET['callback'];
  3. $data='{"name":"张三","email":"123456@qq.com"}';
  4. echo  $callback.'('.$data.')';//生成回调函数和参数返回
  5. ?>

结果：

5. 预习jQuery和Vue知识

上一条：变量.常量与函数的基础认知!下一条：Vue自学：v-on常用的修饰符使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
后网络时代2021-01-11 15:57:251楼
合适明白了，感谢老师！

相关文章

查看更多