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

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

答：

//array.find(function(currentValue, index, arr),thisValue)
//currentValue    必需。当前元素
//index    可选。当前元素的索引值
//arr    可选。当前元素所属的数组对象
//thisValue可选。 传递给函数的值一般用 "this" 值。
//如果这个参数为空， "undefined" 会传递给 "this" 值
//返回值：    返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined。
var numbers = [4, 12, 16, 20];
function    checknum(num){
 if(num>16){
   return  true;
 }
}
numbers.find(checknum);//20
//array.findIndex(function(currentValue, index, arr), thisValue)
//参数说明同上
//返回值：    返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。
//findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
var numbers = [4, 12, 16, 20];
function    checknum(num){
 if(num>16){
   return  true;
 }
}
numbers.findIndex(checknum);//3
//Array.from(object, mapFunction, thisValue)
//object    必需，要转换为数组的对象。
//mapFunction    可选，数组中每个元素要调用的函数。
//thisValue    可选，映射函数(mapFunction)中的 this 对象。
//from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返   回一个数组。
//如果对象是数组返回 true，否则返回 false。
var setObj = new Set(["a", "b", "c"]);
var objArr = Array.from(setObj);
console.log(objArr);//集合转化成数组
var myr = Array.from("PHP&js");//['P','H','P','&','j','s']
 //Array.of()//把一列值转化成数组
const a = Array.of(2,4,6,8);
Array.isArray(obj)//判断一个对象是不是数组
//indexOf() 方法可返回数组中某个指定的元素位置。
//array.indexOf(item,start)方法可返回数组中某个指定的元素位置。
let  fr=['name','age','sex','tel','email']
fr.indexOf('tel',2);//3
fr.indexOf('tel',4);//-1
//array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
//total初始值，或者计算后的结果。initialValue初始值
var numbers = [1,2,3,4,5];
function getSum(total, num) {
console.log(total+'---------'+num)
    return total - num;
}
numbers.reduceRight(getSum)//从后往前执行的
//reverse() 方法用于颠倒数组中元素的顺序。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
//Mango,Apple,Orange,Banana
//toString()数组转化字符串
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
//"Banana,Orange,Apple,Mango"
//splice(开始删除的位置，删除长度(为0时是添加)，替换删除长度(不为0时是添加)或添加值（删除长度(为0时是添加)）)
//添加
let  x=[1,2,3,4,5];
rs=x.splice(1,0,'xx');//rs=[],x=[1,'xx',2,3,4,5]
let  xx=[];
rs=xx.splice(1,0,'xx');//rs=[],x=['xx']
//删除
let  y=[1,2,3,4,5];
rs=y.splice(1,3);//rs=[2,3,4],y=[1,5]
//修改
let  yy=[1,2,3,4,5];
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。

console.log(JSON.stringify(3),typeof JSON.stringify(3))
//3  string
console.log(JSON.stringify(true),typeof JSON.stringify(true))
//true  string
console.log(JSON.stringify(null),typeof JSON.stringify(3))
//null  string
console.log(JSON.stringify('demo'),typeof JSON.stringify("demo"))
//"demo"  string
//JSON不支持undefined
//属性名称必须包含在字符串中
//第二个参数：array 或function
//数组：
console.log(JSON.stringify(｛a:'10',b:'20',c:'30'｝,['a','b']))//{"a":"10","b":"20"}
//函数：实现过滤，把要排除的结果return  undefined即可
//必须是undefined才行
console.log(JSON.stringify({a:1,b:2,c:3,d:4,e:5,f:6,g:7,h:8,i:9},(k,v)=>{
 if(v>2){   return  undefined;} else  {   return v;}
}))
//第三个参数是用来控制格式输出

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

参数说明
- text:必需，一个有效的 JSON 字符串。
- reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。
  json.parse解析时候是从内向外解析的
  最后一次的键值为空

rs=JSON.parse('{"a":1,"b":2,"c":3}',(k,v)=>{    if(k==="")  return  v;  else    return  v*2 });

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

答：

<button>get&post</button>
<p></p>
<script>
//GET方式：
const   bt=document.querySelector('button');
bt.onclick=function(){
//创建xhr对象
const xhr=new  XMLHttpRequest();
//xhr参数配置
xhr.open("get","test.php?id=1");
xhr.responsetype="json";
//处理xhr相应：
xhr.onload=()=>{
console.log(xhr.response);
let  user=xhr.response.name;
document.querySelector('p').innerHTML=user;
}
xhr.onerror=()=>{
console.log(object);
}
//发送xhr请求
xhr.send(null);
}
</script>

服务器端：

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

结果：

POST&表单：

 <form  action="">
        <input   type="email"   name="email"   id="email" />
        <input   type="password"   name="password"   id="password" />
        <button>提交</button>
        <span  class="tips"></span>
        </form>
 <script>
            const   form=document.querySelector('form');
            const   tips=document.querySelector('.tips');
            const   button=document.querySelector('button');
            button.onclick=function(ev){
            ev.preventDefault();
            //或者let  data=new  FormData(form);
            let  data=new  FormData();
            data.append('email',form.email.value);
            data.get('email');
            //与new  FormData(form)等价
            //创建xhr对象
            const xhr=new  XMLHttpRequest();
            //xhr参数配置
            xhr.open("post","test.php");
            xhr.responseType="json";
            //处理xhr相应：
            xhr.onload=()=>{
            document.querySelector('.tips').innerHTML=xhr.response.email+'-----'+xhr.response.password;
            console.log(xhr.response);
            }
            xhr.onerror=()=>{
            console.log(object);
            }
            //发送xhr请求
            xhr.send(new  FormData(form));
            }
            </script>

服务器端：

<?php
print_r(json_encode($_POST));
?>

结果：

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

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

<button>跨域请求</button>
<p></p>
<script>
//跨域方式一：php版本
//header("Access-Control-Allow-Origin:http://hello.io");
//GET方式：
const   bt=document.querySelector('button');
bt.onclick=function(){
//创建xhr对象
const xhr=new  XMLHttpRequest();
//xhr参数配置
xhr.open("get","http://word.io/cors1.php");
xhr.responsetype="json";
//处理xhr相应：
xhr.onload()=>{
console.log(xhr.response);
document.querySelector('p').innerHTML=xhr.response;
}
xhr.onerror=()=>{
console.log(object);
}
//发送xhr请求
xhr.send(null);
}
</script>

get方式的跨域请求:

POST:

<button>跨域请求</button>
<p   class="tips"></p>
<script>
//跨域方式一：php版本
//header("Access-Control-Allow-Origin:http://hello.io");
//GET方式：
const   bt=document.querySelector('button');
bt.onclick=function(){
//创建xhr对象
const xhr=new  XMLHttpRequest();
//xhr参数配置
xhr.open("get","http://word.io/cors1.php");
xhr.responsetype="json";
//处理xhr相应：
xhr.onload=()=>{
document.querySelector('.tips').innerHTML=xhr.response;
}
xhr.onerror=()=>{
console.log(object);
}
//发送xhr请求
let  form=new   FormData();
form.append('email','1232@php.cn');
form.append('password','123456');
xhr.send(form);
}
</script>

服务器端：

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

结果：

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

<button>jsonp</button>
<p></p>
//json原理：
<script>
function  getUser(data){
console.log(data);
let  user=data.name+":"+data.email;
document.querySelector("p").innerHTML=user;
}
const   bt=document.querySelector('button');
bt.onclick=function(){
//1.动态生成一个跨域的script标签
let  script=document.createElement('script');
script.src="http://word.io/cors2.php?callback=getUser";
document.body.insertBefore(script,document.body.firstElementChild);
}
</script>

服务器端：

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

结果：

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

结果：

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

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

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

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

5. 预习jQuery和Vue知识

相关文章