前端学习之JS(三）

JS(三）"/>

前端学习之JS(三）

对象高级：

     构造函数：

// ES5创建1 系统构造函数：函数名首字母var cat=new Object();cat.name='咪咪';cat.age='2';console.log(cat)2 自定义构造函数function Cat(){}var cat=new Cat();cat.name='咪咪';cat.age='2';console.log(cat)// 工厂模式
function Cat(name,age){this.name=name;this.age=age;this.sayName=function(){console.log(this.name);}}var cat1=new Cat('咪咪',2);var cat2=new Cat('喵喵',3);console.log(cat1);

     new关键字：

              作用：

                      为了与构造函数连用
                      执行该构造函数
                      隐式创建了一个对象
                      将构造函数中的this和这个对象的this进行绑定
                      将this中的属性和方法传递给该对象
                      返回这个对象

     class类：

ES6新增了class类，为了让js更像java，更像面向对象的写法  
js是面向过程的语言，但是它可以模拟面向对象的写法 
class类含义：是 Es5中构造函数的语法糖 语法：class  名称{constructor(){   传属性}sayName(){        传方法}static sayHi(){}    }// ES5function Cat(name,age){this.name=name;this.age=age;this.sayName=function(){console.log(this.name);}}var cat1=new Cat('咪咪',2);var cat2=new Cat('喵喵',3);console.log(cat1);
// ES6
class Cat{constructor(name,age){this.name=name;this.age=age;}// 实例化对象的方法:通过实例化的对象调用    例子：DatesayName(){console.log(this.name);}//静态方法:通过类调用   例子：Mathstatic sayHi(){console.log('123');}    
}var cat1=new Cat('咪咪',2);var cat2=new Cat('喵喵',3);console.log(cat1.name);cat1.sayName();Cat.sayHi();class Cats extends Cat{constructor(name){super(name)sayName(){console.log('Cats'+this.name);}}
}

面向对象： 

      含义：（OOP）

             一种编程思想，只需考虑结果
     特征：

             封装   例如函数和class类
            继承   可以使得子类具有父类的属性和方法，并重新定义，追加属性和方法
            多态   不同对象调用相同的方法，执行出不同的结果

// 继承
class Cat{constructor(name,age){this.name=name;this.age=age;}SayName(){console.log(this.name);}
}
class Cats extends Cat{    //儿子继承父亲constructor(name,age,gender){super(name,age)   //继承父亲的标签this.gender=gender;   //自己的特色}sayAge(){                  //自己的方法console.log(this.age)}SayName(){console.log('name');  //自己有自己的sayname时执行自己的sayname}
}
var cat1=new Cat('111',6);
var cats1=new Cats('lucy',3,'women');
console.log(cats1);
cat1.SayName()
cats1.SayName()    //继承下来的sayName

原型对象：

      含义：

           简称原型，任何一个函数都有一个prototype属性，这个就是原型对象

     原型链：

           含义：
                任何一个函数都有一个prototype属性，这个就是原型对象，原型对象还有原型，这个就 形成了一个链状结构就叫做原型链
  任何一个对象都有一个属性叫__proto__,此属性指向构造函数的原型对象，最终指向null
        属性查找原则：
             当前对象属性查找不到时，会向改构造函数的原型对象上查找该属性，如果没查到会向object系统构造函数中查找该属性，如果依旧没有返回underfined

// 原型对象
console.log(Cat.prototype);
// 在原型对象上添加方法或属性
Cat.prototype.sayName=function(){console.log('11111');
}var arr=new Array(1,2,3);      //可以改变系统属性Array.prototype.push=function(){console.log(123456);
}
arr.push(4);
console.log(arr);function Cat(){} //Cat()是函数
var Cats=new Cat();  //Cats是对象
console.log(Cats.__proto__);
console.log(Cat.prototype);
console.log(Cats.__proto__===Cat.prototype);  //trueconsole.log(Object.prototype===Cats.__proto__.__proto__);

深拷贝与浅拷贝：

   深拷贝：B复制A，A变了，B不变
   浅拷贝：B复制A，A变了，B变了

// 深拷贝
var str='12355';
var str1=str;
str='12';
console.log(str1);   // 浅拷贝
var obj={name:'lii',age:123,
}
var obj1=obj;
obj.name='ll';
console.log(obj1);// 封装深拷贝：
function deepClone (data){// 判断是数组还是对象// 方法一var deepData=Array.isArray(data)?[]:{};// 方法二//   if(Array.isArray(objs)){//     var deepObj=[];//   }else{//     var deepObj={};//   }for(key in data){// 判断属性是不是自己的if(data.hasOwnProperty(key)){//多个对象if(typeof data[key]==='object'){// 递归 deepData[key]=deepClone(deepData[key]);}else{deepData[key]=data[key];  //把data值给deepData}} 
}return deepData;
}

严格模式：

"use strict"
function fn(a,a){console.log(10);
}

正则表达式：

      RegExp对象用于将文本与一个模式匹配

    创建:

1 new+构建函数var re=new RegExp();
2 字面量式var re=/内容/

    方法:

  1 test()  匹配成功返回true ,否则返回false2 exec()    匹配成功返回数组,否则是null

      修饰符:
           i 忽略大小写
            g 全局匹配

// 练习：简单的邮箱验证// 获取邮箱地址
var emails=document.querySelector('input');
var p=document.querySelector('p');
// 正则表达式 
var re=/@/;
// 失去焦点时触发事件
emails.onblur=function(){var values=this.value;if( re.test(values)){p.style.color='green';p.innerHTML='邮箱合法';
}else{p.style.color='red';p.innerHTML='邮箱不合法';
}
}

     字符串的正则：

 match(可以放正则表达式)  获取匹配结果  返回一个数组replace（被替换，替换的）  替换        返回新的search（）              执行了一个在给定字符串中的一个搜索以取得匹配正则模式的项，查找正则表达式第一次出现的索引  split（）               切割string对象为了一个其字符串的数组，字符串改为数组       //test（）
var re=/box/ig;
var str='this is a box,That is a Box'
var re1=/[0-9]+/g;
var str1='2021-9-25';
// console.log(re.test(str));
// 字符串
// match（）
console.log(str.match(re));     //array
console.log(str1.match(re1));
// replace（）console.log(str.replace(re,'123'));// search（）console.log(str.search(re));
//   split（）
console.log(str.split(re)); 

    元字符：

.             匹配单个的任意字符
[范围]        匹配单个范围内的字符
[0-9]         匹配单个的数字
[a-zA-Z0-9]   匹配单个的数字，字母下划线
[^范围]       匹配任意一个除括号范围内的字符
[^0-9]        匹配任意一个非数字字符
\w            匹配单个的数字，字母下划线  等价于[a-zA-Z0-9]
\W            匹配单个的非数字，字母下划线
\d            匹配单个数字           等价于[0-9]
\D            匹配单个非数字 等价于[^0-9]// // 获取邮箱地址
var emails=document.querySelector('input');
var p=document.querySelector('p');
// // 正则表达式 
var re=/[0-9]/;
// 失去焦点时触发事件
emails.onblur=function(){var values=this.value;if( re.test(values)){p.style.color='green';p.innerHTML='邮箱合法';
}else{p.style.color='red';p.innerHTML='邮箱不合法';
}
}
// 纯数字验证：
var re=/^\d+$/;
var rel=/\D/;
console.log(re.test('46599545656'));
console.log(!rel.test('214465556556'));
// 不能用数字开头
var re=/^\D/;
console.log(re.test('5hjjj'));
// 验证邮编是否合法
var re=/^\d{6}$/;
console.log(re.test('123456'));
// 验证手机号是否合法
var re=/^1[3-9][0-9]{9}$/;
console.log(re.test('15345678910'));
//验证身份证是否合法
var re=/^[1-9]\d{5}[1-2]\d{3}([0][1-9]|[1][0-2])([1-2]\d|[3][0-1]\d{3}(\d|x|X))$/;