你好javascript day16
1）正则表达式
对于正则表达式的深度使用封装两个class设置删除的函数方法
//添加class类名
function addClass(elem,className){
let arr=elem.className.match(/\s+/g);
let newArr=className.match(/\s+/g);
newArr.forEach((item)=>{
if (arr.indexOf(item)!==-1) arr.push(item);
});
elem.className=arr.join("");
}
//删除class类名
function removeClass(elem,className){
let arr=elem.className.match(/\s+/g);
let newArr=elem.className(/\s+/g);
arr=arr.fitler((item)=>{
return newArr.indexOf(item)=== -1;
});
elem.className=arr.join("");
}
常用正则验证
用户名
/^\w{8,16}$/
邮箱验证
/^\w{5,}\@[a-zA-Z0-9]{2,}\.(com|net|org)(\.cn)?$/
电话号码
/^1\d{10}$/
网址验证
/^https?:\/\/www\.\w+\w+$/
表单验证
//结构
<form action="http://www.163.com" method="GET">
<input type="text"><span></span><br>
<input type="text"><span></span><br>
<input type="text"><span></span><br>
<input type="submit">
</form>
//js部分
<script>
let form=document.querySelector("form");
let list=Array.form(document.getElemmentsByTagName("input"));
list.pop();
let arr=[];
for(let i=0;i<list.length;i<++){
arr.push(false);
}
form.addEventListener("submit",formHandler);
form.addEventListener("input",formHandler);
function formHandler(e){
if(e.type==="input"){
let index=list.indexOf(e.target);
let bool=getVerify(index,e.target.value);
if(bool){
e.target.nextElementSibling.textContent="正确的"；
e.target.nextElementSibling.style.color="green";
}else{
e.target.nextElementSibling.textContent="错误的"；
e.target.nextElementSibling.style.color="red";
}
arr[index]=bool;
}else if(e.type==="submit"&&arr.indexOf(false)===-1){
}else{
e.preventDefault();
console.log("请输入正确再提交")；
}
}
function getVerify(index,value){
switch(index){
case 0:
return /^\w{8,16}$/.test(value);
case 1:
return /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[A-Za-z0-9]{8,16}$/.test(value);
case 2:
return /^1\d{10}$/.test(value);
}
}
</script>
2）ES6基础
严格模式
"use strict";
任何变量都必须先声明，不能直接使用
a=4;//报错
let a=4;//true·
函数参数名不能重复
function fn(a,a){
console.log(a,a);
}
fn(3,5);//输出55 前一个会被后面的覆盖
不允许使用with
let div=document.querySelector("div");
with(div,style){
width:"50px";
height:"50px";
backgroundColor="blue";
};//报错
字符长度只读不可以改
let str="dfsds";
str.length=5;报错
不允许使用八进制
let a=067;//报错
删除属性，会将obj的键删除,相对的值也会被删除
let obj={
a:1,
b:2
};
delete obj.a;
console.log(obj);
不能删除固有属性和不可删除属性
let arr=[1,2,3];
delete.arr.length;
console.log(arr);
不允许使用eval
eval映射
let a=3;
let b=4;
console.log(eval("a+b"));//正常输出==》7 严格模式报错
eval映射使用
let obj0={};
let obj1={};
let obj2={};
for(let i=0;i<4;i++){
eval("obj"+i).a=10*i;
}
console.log(obj0,obj1,obj2,obj3);
函数内注意问题
function fn(){
//不能使用
console.log(arguments.callee);
console.log(arguments.callee.caller);
}
function fn(){
//如果没有开启严格模式，在函数中this是window
//但是开启严格模式后，函数内this就会变成undefined
//全局的函数内尽量不要使用this
console.log(this);
}
fn();
其他
增加保留字
比如protected static interface
定义变量时不能使用
3）let和const和箭头函数
var 过时了
let es6新出
var还能使用，而且和let混着用
let是有作用域的
let 定义的全局变量都不会放在window下作为属性，解决与window对象的属性冲突问题
let a=3;
console.log(window.a);
function fn(){
let a=3;
console.log(window.a);
}
fn();//输出两次undefined
所有写在{}内的let变量他的作用域仅属于{}内，外部是无法调用的
let a=3;
if(a>0){
let b=10;
a+=b;
};//报错
console.log(a,b);
{}内嵌套，内部可以使用外部let定义的变量
for(let i=0;i<10;i++){
if(i>5){
let c=10;
i+=c;
}
console.log(i);//正常输出
}
常量不允许被修改
const EVENT_ID="10086";
EVENT_ID="10010";//报错
一般作为初始值，或者永远不需要改的值来使用。
目的是为了阻止因为其他使用者改变该值，或者自己不小心改变
常量定义时，必须全部字母大写，用下划线区分
Math.SQRT1_2
Math.LOG10E
const obj={
a:1,
b:2
};
obj=null;
如果定义的对象为常量将不能被删除
这样写害怕用户改变对象的引用关系
因为太多，而且快速开发，也完全不遵守代码规范
const obj={a:1};
obj={b:2};//报错
箭头函数
let fn=()=>{}
let fn=function(){}
这两一样的
数组函数方法转箭头
arr=arr.filter(item=>item>2);
arr=arr.filter(function(item){return item>2});
arr.sort((a,b)=>a-b);
arr.sort(function(a,b){return a-b});
函数的参数，如果没有参数，或者有两个及以上的参数，需要写（）将参数放入
（）=>{}
如果函数只有一个参数，不要加（）；
item=>{}
=> 参数和函数体区分，意思是将参数带入到函数中
{} 函数语句块
如果函数语句块不加{} 并且只有一句话，就意味着使用return 返回这句话
箭头函数都是匿名函数
多用于回调函数
setInterval(()=>{},16);
setTimeout(()=>{},16);
arr.reduce((value,item)=>value+item);
elem.addEventListener("click",e=>{});
箭头语法可以改变箭头语法函数内this的指向
let obj={
color:"blue",
init:function(){
let div=document.querySelector("div");
div.a=this;
div.addEventListener("click",clickHandler);
},
clickHandler(e){
console.log("aaa");//点击后输出aaa
//事件函数中this是指侦听的对象本身
console.log(this.a.color);//输出blue
}
}
对象的函数中
this是当前对象
事件函数中
this是侦听事件的对象
回调函数
this是window
箭头函数中的this
箭头函数外的this
