数组操作函数
1.从尾部push()和pop()进出数据
2.unshift()和shift从头部进出数据
3.join(): 与字符串的split()相反,将数组转通过指定连接组成字符串返回
4.concat()数组合并
5.slice(start,end): 返回数组中的部分成员(创建副本)
6.splice(开始索引,删除的数量,插入的数据…): 数组的增删改,它的本职工作是删除元素
7.sort()数组排数默认（按字母排序),数值排序arr.sort((a,b)=>a-b);
8.map(callback)数组遍历并且有返回值
9.filter(callback)过滤数组
10.reduce((prev, curr) => prev + curr,prev初始值)数组累加操作
JSON语法
1.JSON数组类型：对象,数组,数值,字符串,布尔值,null
2.JSON语法相关函数：
- JSON.stringify(data,filter,format)
- JSON.parse(str,filter);
Ajax请求和跨域请求
1.请求分为两种：
- 同步: 前端发请求, 必须等到后端响应完成,才允许发送另一个请求
- 异步: 前端发请求后不等待后端响应结果继续执行,后端响应完成通过事件通知前端处理
2.Ajax属于异步请求；请求类型有 - get:把参数包含在URL中
- post:通过request body传递参数
3.Ajax请求的步骤：
- 1.创建XHR对象：
const xhr=new XMLHtppRequest(); - 2.配置参数
xhr.open("type",url); - 3.处理请求响应
xhr.onload=callback(); - 4.发送请求：
xhr.send();
4.跨域请求：
1.同源策略:同源指: 协议相同,域名/主机名相同,端口相同
- 为请求的安全,浏览器禁止通过脚本发起一个跨域的请求
- 只允许通过脚本发起基于同源的请求
2.CORS脚本跨域请求的目标允许访问设置:header('Access-Control-Allow-Origin:$url');$url有三种:网站名(协议域名端口)|*(允许任何跨域请求)|true(带cookie的跨域请求)
3.JSONP跨域请求:通过脚本生成一个带有src的script标签来访问跨域目标文件,目标文件返回信息,处理生成新的脚本(script)代码并执行生成新的页面内容;(一般是提前写一个函数,目标文件返回函数名调用函数,执行生成新的内容);
代码演练
1.字符串和数组常见函数演练
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>字符串和数组操作方法</title></head><body></body><script type="text/javascript">// 字符串操作函数let str="you are wold!";let chinastr="你好！";const lg=console.log;// 字符串长度lg(str);lg(str.length);lg(chinastr.length);// 拼接字符串等同于“+”lg(str.concat('hello'));// 把字母转换成大写lg(str.toUpperCase());//把字母转换成小写lg(str.toUpperCase().toLowerCase());// str.slice(start,end)let str1=str.slice(1,6);lg(str1);let str2=chinastr.slice(1,2);lg(str2);//str.substr(start,num)str1=str.substr(1,6);lg(str1);str2=chinastr.substr(1,2);lg(str2);//trim(),去除字符串两端空格，制表符tab 换行符；不支持自定义str=" you are word! ";lg(str.length);lg(str.trim().length);// lg(str);//返回匹配到的索引位置lg(str.indexOf("o"));lg(str.lastIndexOf("o"));//分割字符串，返回成数组形式lg(str.split(" "));//替换字符串replace(old,new);lg(str.replace("you","你"));// 数组字符串操作函数let arr=[];arr.push(1,2,3);//从尾部推入lg(arr);arr.unshift(4,5,6);//从头部推入// arr.unshift(4);// arr.unshift(5);// arr.unshift(6);lg(arr);lg(arr.pop());//从尾部删除lg(arr.shift());//从头不删除lg(arr.join("+"));//把数组拉平成一个字符串lg(arr);lg(arr.slice(1,3));//截取数组lg(arr);lg(arr.sort((a,b)=>a-b));//数组排序lg(arr.splice(1,1));//splice(start,del-num,new);lg(arr.splice(1,2,"10","20"));lg(arr);let arrs=[1,2,3,4,5,6,7,8];lg(arrs);arrs.forEach(item=>lg(item));lg(arrs.map(item=>{return item*2}));//遍历数组并且返回值lg(arrs);lg(arrs.filter(item=>{ return item%2}));//过滤数组lg(arrs);lg(arrs.reduce((prev,current)=>prev+current));</script></html>
代码运行结果
2.Ajax请求
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Ajax请求</title><style>body{height: 800px;background-color: deeppink;}</style></head><body><button type="button" id="btn">Ajax请求</button><form action="login.php" id="form"><label for="username">账户</label><input type="text" name="username" id="username"><label for="pwd">密码</label><input type="password" name="pwd" id="pwd"/><button type="submit">登陆</button></form></body><script>let btn=document.querySelector("#btn");// console.log(btn.innerText);btn.addEventListener("click",(ev)=>{let xhr=new XMLHttpRequest();xhr.open("GET","test.php");xhr.onload=()=>{// console.log(xhr.response);// console.log(ev.target)let bn=document.createElement("button");bn.innerText=xhr.response;document.body.appendChild(bn);};xhr.send();})let form=document.querySelector("#form");console.log(form);let bt=document.querySelector("#form>button");bt.addEventListener("click",ev=>{// console.log(ev);ev.preventDefault();let xhr=new XMLHttpRequest();xhr.open("POST","login.php");xhr.onload=()=>{console.log(xhr.response);// console.log(ev.target)let bn=document.createElement("h3");bn.innerText=xhr.response;form.appendChild(bn);};xhr.send(new FormData(form));})</script></html>
