【javascript】姬成

文章目录

  • 1、typeof
  • 2、显式类型转换
  • 3、隐式类型转换
  • 4、绝对不发生类型转换的比较
  • 5、预编译
  • 5、函数
  • 6、作用域
  • 7、闭包
  • 8、对象、包装类
  • 9、原型、原型链
  • 10、call/apply
  • 11、继承
  • 12、this
  • 13 、callee和caller
  • 14 、深度克隆需要的技术
  • 15、数组
  • 16、类数组
  • 17 、Error.name值(错误信息)
  • 18、ES5严格模式
  • 19、DOM
  • 20、DOM树结构
  • 21、js定时器
  • 22、获取窗口属性
  • 23、脚本化CSS
  • 24、事件
  • 24、事件处理模型
  • 25、鼠标事件分类
  • 26、键盘事件分类
  • 27 、文本类操作事件
  • 28、窗体类事件
  • 29、json
  • 30、异步加载js
  • 31、时间线
  • 32、正则表达式

1、typeof

判断变量类型,六种返回结果为(这些值全是字符串类型),number,string,boolean,object,undefined,function

2、显式类型转换

  • Number(mix)
  • parseInt(string,radix),radix设置一个进制数,指定参数的进制
  • parseFloat(string)
  • toString(radix),radix设置一个进制数,对数值进行进制转换
  • String(mix)
  • Boolean()

3、隐式类型转换

undefined == null,返回结果为true

NaN == NaN,返回false

  • isNaN(),隐式Number
  • ++/–,+/-(一元正负),隐式Number
  • +,隐式String
  • -*/%,隐式Number
  • &&||!,Boolean()
  • < > <= >=
  • == !=

4、绝对不发生类型转换的比较

  • ===
  • !==

5、预编译

  • 在预编译阶段,系统会把函数声明和变量声明提升(自动把声明全部放在使用前面)
  • (暗示全局变量)任何变量,如果变量未经声明就赋值,此变量就为全局变量所有
  • 一切声明的全局变量,全是window的属性

预编译四部曲:

  1. 创建AO(Activation Object)

    • AO{
          
      }
      
  2. 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined

    • AO{
          a: undefined,
          b: undefined   
      }
      
  3. 将实参值和形参统一

    • AO{
          a: 1,
          b: undefined   
      }
      
  4. 在函数体内找函数声明,值赋予函数体

    • AO{
          a: function a(){},
          b: function (){},
          d: function d(){},    
      }
      
function fn(a){
    console.log(a);
    var a = 123;
    console.log(a);
    function a(){}//函数声明
    console.log(a);
    var b = function (){}//函数表达式
    console.log(b);
    function d(){}    
}
fn(1);

打印结果:
ƒ a(){}
123
123
ƒ (){}

总结一点就是:在预编译阶段声明的提升,在声明提升过程中同名的也会被覆盖

同时还要注意函数声明和函数表达式不同

5、函数

  • 每一个函数都有一个默认的arguments属性,它接收传递的参数作为数组
    • 改变arguments数组中的值,形参的相应值也跟着变化
    • 改变形参的值,arguments的相应值也变化

6、作用域

[[scope]]:我们所说的作用域,里面存储了运行期上下文的集合

每个函数都是一个对象,对象中有些属性可以访问,有些不可以。仅供引擎存取,[[scope]]就是一个外界不可访问的

作用域链:运行期上下文的集合所呈现的链式连接称为作用域链

7、闭包

当内部函数被保存到外部时,将会生成闭包。闭包会导致原有作用链不释放,造成内存泄漏

闭包的作用:

  • 实现公有变量

    //累加器
    function add(){
        var num = 0;
        function a(){
            console.log(++num);
        }
        return a;
    }
    var myAdd = add()
    myAdd()
    myAdd()
    myAdd()
    
    输出:1 2 3
    
  • 可以做缓存(存储结构)

    //类似缓存
    function test(){
        var food = "";
        var obj = {
            eatfoot : function(){
                if(food != ""){
                    console.log('我吃' + food);
                    food = "";
                }else{
                    console.log('没有给我食物');
                }
            },
            pushfood : function(myfood){
                food = myfood;    
            }
        }
    
        return obj;
    }
    var person = test()
    person.pushfood("banana")
    person.eatfoot()
    
    //共用food变量
    
  • 可以实现封装,属性私有化

    function Person(name,wife){
        var prepareWife = "张三";//私有化的属性
        this.name = name;
        this.wife = wife;
        this.divorce = function(){
            this.wife = prepareWife;
        }
        this.changePrepareWife = function(target){
            prepareWife = target;
        }
        this.sayPrepareWife = function(){
            console.log(prepareWife)
        }
    }
    var person = new Person("李斯","玛丽");//对象只能通过它的divorce方法,访问私有属性,无法直接访问
    
  • 模块化开发,防止污染全局变量

闭包造成的问题:

function test(){
    var arr = [];
    for(var i = 0; i<10; i++){
        arr[i] = function (){
            document.write(i+" ");
        }
    }
    console.log(arr);
    return arr;
}
var myarr = test();
for(var j = 0; j<10; j++){
    myarr[j]();
}
打印1010
因为arr数组中的每个函数都是`function (){
            document.write(i+" ");
        }`这个i在数组返回时,是没有给值的
        
返回出来这个arr在test函数外部,共享闭包内(test内)的变量,所以可以共享到i的值为10 

要解决这个问题(使用立即执行函数)解决思路:里面的函数拿到的数据是立即执行函数的结果,而不是test了,而立即执行函根据循环有多个,所以里面的函数分别在自己的作用域里,互不影响
(function(j){
    arr[i] = function (){
    	document.write(j+" ");
	}
}(i))

8、对象、包装类

  • 对象

    var obj = {}

  • 包装类

    基本变量增加属性赋值会先执行包装类

    var num = 4;
    num.a = 6
    //隐式 new Number().a = 6,所以赋值后对原始值没影响
    

9、原型、原型链

原型:是function对象的一个属性,它定义了构造函数制造对象的公共祖先,通过构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象

构造方法自带的一个属性prototype

prototype对象中的constructor方法,返回构造器,并且可以手动更改。

new的时候会在构造函数中隐式生成一个this,该this就是创建的对象

原型的增删改查:

  • 增,不能在对象中增加,只能在原型中

    Person.prototype.lastName = "a"
    function Person(){
        
    }
    var person = new Person()
    
    person.fine = "b"//添加不到原型,只会给person对象增加自己的fine 属性
    Person.prototype.fine = "b"//可以添加到原型
    
    
  • 删,无法删除

  • 改,不能在对象中更改,只能在原型中

    Person.prototype.lastName = "a"
    function Person(){
        
    }
    var person = new Person()
    
    person.lastName = "b"//更改不了原型,只会给person对象增加自己的lastName属性
    Person.prototype.lastName = "b"//可以更改原型
    
  • 查,对象访问自己没有的属性,就会去原型中寻找

原型链:绝大多数对象最终都会继承自Object prototype

使用Object.create(null)创建的对象没有原型

10、call/apply

  • 作用,是改变this的指向

    function Person(name,age){
        this.name = name;
        this.age = age;
    }
    var person = new Person('wang',22);
    var obj = {}
    Person.call(obj,'zhang',88);//obj会使用person的构造函数创建自己
    
    
    //类似于java的调用父类
    function Person(name, age, sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    function Student(name, age, sex, tel, grade){
        Person.call(this,name,age,sex);//类似与Java的调用父类构造方法
        this.tel = tel;
        this.grade = grade;
    }
    var student = new Student('zhang',34,'男',180,2019);
    

    调用toString方法的call形式Object.prototype.toString.call(obj)

  • 区别,后面传的参数形式不一样

    Person.apply(this,[name,age,sex]);
    

​ apply传参得是数组

11、继承

  • 原型链的方式

    • 过多的继承了没用的属性
  • 借用构造函数(使用call或apply)

    • 不能继承构造函数的原型
    • 每次构造函数都要多走一个函数
  • 共享原型,(子.prototype = 父.prototype)

    • 不能随便改动自己的原型
  • 圣杯模式

    function inherit(Target,Origin){
        function F(){};
        F.prototype = Origin.proptype;
        Target.protetype = new F();
        Target.prototype.constructor = Target
    }
    
    //优化结构
    var inherit =(function(){
        var F = function(){};
        return function(Target,Origin){
            F.prototype = Origin.proptype;
            Target.protetype = new F();
            Target.prototype.constructor = Target;
            Target.prototype.uber = Origin.proptype;   
        }
    }());
    

12、this

  • 函数预编译过程,指向window
  • 全局作用域里,window
  • call/apply,改变this的指向
  • obj.func(),func()里面的this指向obj

13 、callee和caller

  • callee

    arguments的属性。使用arguments.callee,代表函数的引用,在递归中,如果函数没有名字可以使用这个来代替引用

  • caller

    函数的属性,表示在哪个环境调用了该函数(ES5标准模式不让用)

14 、深度克隆需要的技术

  • 判断是不是原始值,使用typeof()
  • 判断是数组还是对象,使用instanceof,toString,constructor

15、数组

new Array(10)代表长度为10 的稀疏数组(值为undefined)

而new Array(10, 10),代表两个元素为10的数组

js中的数组访问越界的值,返回undefined,不会报错

js中的数组在写越界的数组值时,是可以的,会把数组撑开到要写的长度

数组中的方法:

  • 改变原数组

    • push,给数组末尾添加一个或多个元素,参数为添加的元素,返回数组的长度

      Array.prototype.push = function(target){
          this[this.length] = target;
          this.length++;
      }
      
    • pop,将数组末尾元素剪切,不用传参数,并返回

    • shift,将数组开头元素剪切,不用传参数,并返回

    • unshift,给数组开头添加一个或多个元素,参数为添加的元素,返回数组的长度

    • sort,排序数组元素,按照ascill码。参数可以提供一个函数,我们可以自定义排序的规则

      • arr.sort(function(a,b){
            if(a>b){
                return 1;//为正时,俩数互换位置
            }else{
                return -1;//为负时,位置不变
            }
        });
        
    • reverse,反向数组元素

    • splice,切片数组元素,参数(从第几位开始(可以为负数),截取多少位,在切口处添加新数据),返回截取值

  • 不改变原数组

    • concat,连接两个数组
    • join,根据传递的string类型参数,将数组元素连接起来,并以字符串返回
    • split,这是字符串的方法,以某个字符分割字符串,并以数组返回(和join逆)
    • toString,将数组变成字符串
    • slice,截取数组,参数三种方式(从该位开始,截取到该位),(从该位截取到最后),()

16、类数组

var obj = {
    "0":'a',
    "1":'b',
    "2":'c',
    "length":3,
    "push":Array.prototype.push,
    "splice":Array.prototype.splice//加上splice属性,打印就和数组一样了
}

类数组条件:

  • 属性要为索引(数字)属性
  • 必须有length属性
  • 最好加上push方法

17 、Error.name值(错误信息)

  • EvalError:eval()的使用与定义不一致
  • RangeError::数值越界
  • ReferenceError:非法或不能识别的引用数值
  • SyntaxError:发生语法解析错误
  • TypeError:操作数类型错误
  • URIError:URI处理函数使用不当

18、ES5严格模式

es5.0严格模式的启动,在页面顶端添加"use strict",也可以写在局部

开启后,不在兼容es3.0的一些规则语法,使用全新的es5.0规范

不被支持的语法:

  • with
    • with用法,with(obj){}会把obj放在AO对象的最顶端,他会更改作用域链。with内部函数的调用者就是obj
  • arguments.callee
  • func.caller
  • 变量赋值前必须声明(es3中,未声明的变量当作window的属性)
  • 局部的this必须被赋值,未赋值为undefined,但在全局还是指向window(es3中,预编译时this是window)
  • 拒绝重复属性和参数

19、DOM

定义了表示和修改文档所需的方法。用来操作html和xml的集合

对文档中元素的操作:

  • 创建节点
    • createElement()
    • createTextNode()
    • createComment()
    • createDocumentFragment()
  • 节点插入html中
    • parent.appendChild(),将创建的元素节点插入容器里,页面已有的元素插入时会被剪切
    • parent.insertBefore(a,b)
  • 移除节点
    • parent.removeChild()
    • child.remove()
  • 修改节点
    • parent.replaceChild(new,origin)
  • 获取节点
    • getElementById(),IE8以下不区分大小写,并且name属性还可以匹配
    • getElementsByTagName(),通用,常用
    • getElementsByName(),需注意,只有部分元素的name可生效(表单,表单元素,img,iframe)
    • getElementsByClassName(),IE8及以下的版本没有这个方法
    • querySelector(),IE7及以下的版本没有这个方法,方法不是实时,结构中添加元素后,不会选中
    • querySelectorAll(),IE7及以下的版本没有这个方法,方法不是实时,结构中添加元素后,不会选中

节点类型:

  • 元素节点,调用nodeType时返回1
  • 属性节点,调用nodeType时返回2
  • 文本节点,调用nodeType时返回3
  • 注释节点,调用nodeType时返回8
  • document,调用nodeType时返回9
  • DocumentFragment,调用nodeType时返回11

节点的四个属性:

  • nodeName,元素的标签名,以大写形式显示,只读
  • nodeValue,Text节点或comment节点的文本内容,可读写
  • nodeType,该节点的类型,只读
  • attributes,Element节点的属性集合

节点的一个方法:

  • Node.hasChildNodes();

遍历节点树(包括所有节点):

  • parentNode,父节点
  • childNodes,子节点们(什么是节点,不仅仅是元素)
  • firstChild,第一个子节点
  • lastChild,最后一个子节点
  • nextSibling,后一个兄弟节点
  • previousSibling,前一个兄弟节点

基于元素节点树的遍历(只包含元素节点):

  • parentElement,返回当前元素的父节点(IE不兼容)
  • children,只返回当前元素的元素子节点
  • node.childElementCount === node.children.length,当前元素节点的子元素节点个数(IE不兼容)
  • firstElementChild,返回的是第一个元素的节点(IE不兼容)
  • lastElementChild,返回的是最后一个元素的节点(IE不兼容)
  • nextElementSibling,返回后一个兄弟节点(IE不兼容)
  • previousElementSibling,返回前一个兄弟节点(IE不兼容)

元素节点的属性和方法:

  • innerHtml,改变一个元素内部的html内容
  • innerText(火狐不兼容)
  • textContent(火狐的方法,老版本IE不好用)
  • ele.setAttribute()
  • ele.getAttribute()

20、DOM树结构

以下是构造函数的继承关系

Node

  • Document
    • HTMLDocument,(document的构造函数)
  • CharacterData
    • Text
    • Comment
  • Element
    • HTMLElement
      • HTMLHeadElement,(各个元素的构造函数)
      • HTMLBodyElement
      • …etc
  • Attr

在构造函数的原型中添加属性,相应的元素中也继承该属性

HTMLBodyElement.prototype.abc = "123"
var body = document.getElementByTagName("body")
//body.abc应该也是123

Document中定义的常用属性

  • document.body,指代页面body元素
  • document.head,指代页面head元素
  • document.documentElement,指代页面html元素

21、js定时器

全局对象window上的方法,内部this指向window

  • setInterval(func,1000),指定时间循环执行func,返回的值是定时器的标识
  • setTimeout(func,1000),指定时间后执行func一次,返回的值是定时器的标识
  • clearInterval(标识),停止定时器
  • clearTimeout标识),停止定时器

22、获取窗口属性

查看滚动条滚动距离:

  • window.pageXOffset,IE8及以下不兼容
  • window.pageYOffset,IE8及以下不兼容

查看滚动条IE8及以下方案:

  • document.body.scrollLeft

  • document.body.scrollTop

  • document.documentElement.scrollLeft

  • document.documentElement.scrollTop

​ 这两个方式使用时相加document.body.scrollLeft + document.documentElement.scrollLeft,因为兼容性问题,一个可以使用,另一个必然为0

让滚动条滚动:

  • scroll(x,y)/scrollTo(x,y),滚动到某个位置
  • scrollBy(x,y),滚动到某个位置,会在之前的位置上进行累加

查看窗口尺寸:

  • window.innerwidth,IE8及以下不兼容
  • window.innerHeight,IE8及以下不兼容

查看窗口尺寸IE8及以下方案:

标准模式和怪异模式的区别,标准模式在html文档顶部添加

  • document.documentElement.clientWidth,标准模式下,任意浏览器都支持
  • document.documentElement.clientHeight,标准模式下,任意浏览器都支持
  • document.body.clientWidth,适用于怪异模式下的浏览器
  • document.body.clientHeight,适用于怪异模式下的浏览器

判断页面渲染模式:

document.compatMode
//结果为:CSS1Compat,则是标准模式
//结果为:BackCompat,则是怪异模式

查看元素几何尺寸:

  • domEle.getBoundingClientRect()(可以被以下替代)
    • 兼容性好
    • 返回一个对象,里面包含left,right,top,bottem,width,height
    • width,height在ie里没有
    • 返回结果并不是实时的,数值更改后,返回值不会变,除非重新获取
  • domEle.offsetWidth,元素宽
  • domEle.offsetHeight,元素高
  • domEle.offsetLeft,对于无定位的父级,返回坐标相对文档;相反有定位的父级,返回的坐标相对与定位的父级
  • domEle.offsetTop,对于无定位的父级,返回坐标相对文档;相反有定位的父级,返回的坐标相对与定位的父级

返回有定位的父级:

  • domEle.offsetParent,返回最近有定位的父级元素,如无,则返回body

23、脚本化CSS

读写元素的CSS属性:

  • domEle.style.prop
    • 可读写内联样式,没有兼容性
    • 遇到float保留字,前面加css(cssFloat)
    • 复合属性必须拆解,组合单词变成小驼峰写法
    • 写入的值必须是字符串形式

查询计算样式:

  • window.getComputedStyle(ele,null)
    • 计算样式只读
    • 返回计算样式都是绝对值px,没有相对单位
    • IE8及以下不兼容
    • 参数中的null是用来获取伪元素的样式,可传入after等

查询计算样式IE8以下方案:

  • domEle.currentStyle
    • 计算样式只读
    • 返回的样式不是绝对值
    • IE独有属性

24、事件

绑定事件函数:

  • ele.onXXX = function(event){}
    • 兼容性好,但是一个元素的同一个事件只能绑定一个处理程序
    • 基本等于内联属性
    • this指向ele元素本身
  • ele.addEventListener(事件类型,处理函数,false)
    • IE9以下不兼容,可以为一个事件绑定多个处理程序
    • this指向ele元素本身
  • ele.attachEvent(onXXXX,fn)
    • IE独有的,一个事件可以绑定多个处理程序
    • this指向window

解除事件处理函数:

  • ele.onclick = false或”“或null
  • ele.removeEventListener(事件类型,处理函数,fasle)
  • ele.detachEvent(onXXXX,fn)

24、事件处理模型

ele.addEventListener(事件类型,处理函数,false)中的第三个参数决定了是捕获还冒泡

事件执行的那个元素不会冒泡和捕获,冒泡捕获只会发生在父级

  • 事件冒泡
    • 结构上(非视觉)嵌套关系的元素,会存在事件冒泡功能,即同一事件,自子元素冒泡向父元素(自底向上)
  • 事件捕获
    • 结构上(非视觉)嵌套关系的元素,会存在事件冒泡功能,即同一事件,自父元素捕获至子元素(自顶向下)
    • IE没有捕获事件

如果同一个事件绑定两个处理函数,分别绑定了冒泡和捕获模式,则触发顺序,先捕获,后冒泡

focus,blur,change,submit,reset,select等事件不冒泡

取消事件冒泡:

在事件处理函数里面写如下,则不发生冒泡(evnet为事件处理函数的参数,系统传递 )

  • W3C标准event.stopPropagation(),不支持IE9以下
  • IE独有event.cancelBubble = true,chrome也支持了

阻止默认事件:

  • 默认事件—>表单提交,a标签跳转,右键菜单等
  • return false;以对象属性的方式注册的事件才生效
  • event.preventDefault();W3C标准,IE9以下不兼容
  • event.returnValue = false;兼容IE

事件对象:

  • 一般事件对象为event,对于IE是window.event,所以使用event || window.event
  • 事件源对象(触发事件的对象)
    • event.target,火狐只有
    • event.srcElement,IE只有
    • chrome浏览器以上两个都有

事件源对象的使用:

外部元素绑定事件,在单击其内部元素时,通过其事件源对象可以知道单击的哪个对象,不用里面每个元素都绑定事件

//优点:
//1、不需要循环所有元素一个一个绑定事件
//2、当有新元素添加时,不需要重新绑定
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script>
        var ul = document.getElementsByTagName('ul')[0]
        ul.onclick = function (e) {
            console.log(e.target.innerText)
        }
    </script>
</body>

25、鼠标事件分类

  • click,单击,按下+弹起
  • mousedown,按下(移动端touchstart)
  • mousemove,移动(移动端touchmove)
  • mouseup,弹起(移动端touchend)
  • contextmenu,右键菜单
  • mouseover,鼠标进入
  • mouseout,鼠标移出
  • mouseseenter,鼠标进入
  • mouseleave,鼠标移出

鼠标左右键的区分,使用事件对象的button属性event.button

  • 0,左键
  • 1,中键
  • 2,右键

click事件只能监听左键,不能监听右键,判断左右用mousedown或mouseup

26、键盘事件分类

  • onkeydown
    • 可以响应任意键盘按键
  • onkeyup
  • onkeypress
    • 只可以响应字符类(asicll码中)按键
    • 可返回asicll码,转换为相应字符

27 、文本类操作事件

  • oninput,文本框内容变化就触发
  • onfocus,获得焦点触发
  • onblur,失去焦点触发
  • onchange,获得失去焦点前后内容的改变,才触发,内容不变,不触发

28、窗体类事件

  • onscroll,滚动条滚动触发
  • onload,页面完全加载完触发,效果慢

29、json

  • JSON.parse(),json字符串转json对象
  • JSON.stringify(),json对象转json字符串

30、异步加载js

正常js加载是同步的,要等页面加载完再加载,因为js要操作页面,然后有时一些js不操作页面,这时候还是用同步,就显得效率低

异步加载的三种方案

  • defer,使用方法,给script标签增加属性defer。

    • 但要等到dom文档全部解析完才会执行,只有IE能用
    • script标签可以引入js,也可以代码写在标签里
  • async,使用方法,给script标签增加属性async。

    • 加载完就执行,async只能加载外部脚本,不能写在script标签里
  • (重点)创建script,插入到dom中,加载完毕后callBack

    • var script document.creatElement('script');
      script.type = "text/javascript";
      script.src = "tools.js";//开始下载js
      document.head.appendChild(script);//添加到页面,才执行js
      
      script.onload = function(){
          //tools加载完后,才能调用里面的方法,不然报错
      }
      //IE中没有load使用readyState
      script.onreadystatechange = function(){
          //里面判断readyState的变位情况,做出操作
      }
      

31、时间线

  1. 创建Document元素,开始解析web页面。document.readyState = ‘loading’
  2. link外部css,创建线程加载,继续解析文档
  3. script标签js,(没有设置异步属性async等)等待js加载完毕并执行脚本,继续解析文档
  4. script标签js,(设置了异步属性async等),浏览器创建线程加载,继续解析文档
  5. 遇到img,正常解析结构,异步加载图片,继续解析文档
  6. 文档解析完成。document.readyState = ‘interactive’
  7. 文档解析完成后,所有设置defer的脚本按照顺序执行
  8. document对象触发DOMContentLoaded事件,标志着由同步脚本执行截断转化为事件驱动阶段
  9. 当所有的async的脚本加载完成并执行后,img等加载完成后。document.readyState = ‘complete’,window对象触发load事件
  10. 从此,以异步响应方式处理用户输入、网络事件等

32、正则表达式

两种创建方式

  • 直接量

    • var str = "abcd";
      var reg = /abc/i;//i修饰符,代表忽略大小写,也可以不写
      reg.test(str)//返回布尔值,表示是否匹配
      
  • new RegExp()

    • var str = "abcd";
      var reg = new RegExp("abc","i")//i修饰符,代表忽略大小写,也可以不写
      reg.test(str)//返回布尔值,表示是否匹配
      

两个方法:

  • reg.test(str),只能确定是否匹配
  • str.match(reg),可以把匹配的字符串作为数组返回

修饰符:

  • i,忽略大小写的匹配
  • g,执行全局匹配(查找所有匹配,并非找到一个停止)
  • m,执行多行匹配

方括号:

使用方括号代表一位[0-9],里面的内容是取值范围

元字符:

  • . === 查找单个字符,除了换行和行结束符

  • \w === [0-9A-z_]

  • \W === 非\w

  • \d ===[0-9]

  • \D === 非\d

  • \s === [空格 制表符 回车符 换行符 垂直换行符 换页符]

  • \S ===非\s

  • \b === 单词边界

  • \B === 非单词边界

  • \n === 查找换行符

  • \f === 查找换页符

  • \r === 查找回车符

  • \t === 查找制表符

  • \v === 查找垂直制表符

  • \xxx === 查找八进制数xxx规定的字符

  • \xdd === 查找十六进制数dd规定的字符

  • \uxxxx === 查找以十六进制数xxxx规定的Unicode字符

\数字 === 匹配第几个子表达式相同的内容,子表达式就是圆括号中的

例如:

var str = "aabb"
var reg = /(\w)\1(\w)\2/g

任何区间的匹配使用[\s\S]或[\w\W]等等,加个就是任意多个了*

量词(匹配数量):

  • n+ ------> {1,∞}个
  • n* ------> {0,∞}个
  • n? ------> {0,1}个
  • n{X} ------> X个
  • n{X,Y} ------> {X,Y}个
  • n{X,} ------> {X,∞}个
  • n$ ------> 以n结尾的字符串
  • ^n ------> 以n开头的字符串
  • ?=n ------> 其后紧接着n的字符串
  • ?!n ------> 其后没有紧接着n的字符串

RegExp对象属性:

  • global,RegExp对象是否具有表示g
  • ignoreCase,RegExp对象是否具有表示i
  • lastIndex,一个整数,表示开始下一次匹配的字符位置
  • multiline,RegExp对象是否具有表示m
  • source,正则表达式的源文本

RegExp的对象方法:

  • compile,编译正则表达式
  • exec,检索字符串中指定的值,返回找到的值,并确定位置
  • test,检索字符串中指定的值,返回true或false

支持正则字符串对象方法:

  • search,检索与正则相匹配的值,返回匹配位置,匹配不到-1
  • match,找到一个或多个正则匹配
  • replace,替换与正则表达式匹配的子串,不用正则的话只能替换一个
  • split,把字符串分割为字符串数组

例子:

1、将匹配到的aabb调换为bbaa

//小括号内为子表达式
var reg = /(\w)\1(\w)\2/g;
var str = "aabb";
var result = str.replace(reg,"$2$2$1$1")//此处的第二个参数可以引用正则表达式的子表达式,$1为第一个子表达式,$2为第二个

//replace第二个参数也可以函数
//$,正则匹配的结果
//$1,第一个子表达式匹配内容
//$2,第二个子表达式匹配内容
var result = str.replace(reg,function($,$1,$2){
                         return $2 +$2 +$1 +$1;
                         })

2、将the-first-name变成小驼峰theFirstName

var reg = /-(\w)/g;
var str = "the-first-name";
var result = str.replace(reg,function($,$1){
    return $1.toUpperCase();
});

打破贪婪模式,在量词后面加问号?

你可能感兴趣的:(前端,前端基础,javascript,前端,开发语言)