JS

it2025-02-07 12

一、RegExp对象

1、创建正则表达式：

var patt=new RegExp('javascript'); var res=patt.test('this is a javascript course'); console.log(res); pattr='/javascript/i';//表示忽略大小写 res=patt.test('this is a javascript course') console.log(res)

2、[]表达式

var res= /[abc]/.test('blue'); res=/[^abc]/.test('lue')

3、元字符

var res=/./.test('\n'); // 元字符. 匹配不换行 var res=/\w/.test('this is a blue') \w 是0-9 a-z A-Z \W是除了前面的这些 // \s表示空白字符 \S 非空白字符 var res=/\s/.test('hello world!') // \b代表单词的边界 var res=/\bgood\b/.test('this is good one');

4、量词

// +表示至少出现一次 var res=/o+/.test('good'); console.log(res) // *表示0 1或者多次 var res=/o*/.test('goodle'); // ？表示0或者1次 var res=/o?/.test('goodle'); // {}指定多少次 var res=/o{2}/.test('goodle') // ^开头 $结尾 var res=/^good$/.test('good); var res=/o(?=w)/.test('helloworld'); //o后面紧跟着w var res=/o(?!w)/.test('helloworld'); //o后面不紧跟着w // d表示数字 D表示非数字 var res=/\d/.test('1032')

5、exec可以返回一个数组形式的结果

var res=/is/ig.exec('this is a test'); console.log(res) console.log(res[0])

6、match

结果为一个数组var str='this is a test' res=str.match(/IS/ig) console.log(res)

7、search

结果表示有2个var str='this is a test!!!' res=str.search(/is/ig) console.log(res)

8、replace

var str='this is a test!!!' res=str.replace(/is/ig,'!!!') console.log(res)

9、分组匹配

var str='2017-09-27' res=str.replace(/(\d{4})-(\d{2})-(\d{2})/,'$2/$3/$1'); console.log(res)

10、split拆分

var str='this is a test'; var res=str.split(/\s+/); console.log(res);

二、Error对象

Error与try catch一起调用

try{ var n=0; if(n==0){ throw new Error('0不能被当做除数');//主动弹出一个错误信息 }else{ alert(4/n); } }catch (e){ alert(e.name+':'+e.message); }finally { alert('我总是被调用') }

区分不同的错误类型

try{ }catch (e){ if(e instanceof EvalError){ alert(e.message) }else if(e instanceof RangeError){ alert(e.message) }else if(e instanceof ReferenceError){ alert(e.message) }else{ alert('其他错误') } }

自定义错误

三、数组对象

1、创建数组

var arr=[] var arr1=new Array(); var arr2=new Array(5);

2、操作数组

var arr=[1,2,3,4,5,6] arr[0]='king'//修改数组

3、常用方法

//join将数组转换成指定字符链接符 var arr=['a','b','c','d']; var res=arr.join('--'); console.log(res); //反转 var arr=['a','b','c','d']; console.log(arr.reverse()) var arr=[1,3,23,112,351,31,33]; console.log(arr.sort(function (a,b) { return a-b;//表示从小到大如果return b-a表示从大到小 })) var arr=[ {name:'king', age:23}, {name:'kkblue', age:59}, {name:'gavin', age:64}, {name:'tom', age:3} ]; arr.sort(function (a,b) { if(a.name>b.name) return 1; if(a.name<b.name) return -1; return 0; }); for(var i in arr){ console.log(arr[i]); } //合并数组 var arr=[1,2,3]; console.log(arr.concat([4,5,6,7])) // 切割 var arr=['a','b','c','d','e','g','h','i']; res=arr.slice(0,3); console.log(res); res=arr.slice(0,-3); console.log(res); var arr=['a','b','c','d','e','g','h','i']; res=arr.splice(0,1);//从0开始到1删除 console.log(res); console.log(arr); res=arr.splice(5);//从index 5开始删除 console.log(res); console.log(arr); res=arr.splice(0,2,'!','?','#')//从index 0开始到index 2替换为！？ # console.log(res); console.log(arr); var arr=['a!','b!','c!','D','E']; var res= arr.map(function (t) { return t.replace(/!/g,'?').toUpperCase(); }); console.log(res) var arr=[1,2,3,4,32,314,null,undefined,false,'',true]; res=arr.filter(function (t) { return t<=10; }) console.log(res); res=arr.filter(function (t) { return t%2==0; }); console.log(res); res=arr.filter(function (t) { return t!==undefined && t!=null; }); console.log(res);

map、filter 、reduce、every、some概念对比：

map：

　　主意对数组内元素进行操作，举例说明：

var attr=[1,2,3,4,5,6,7] var res=attr.map(function (t) { return t*2; }) console.log(res)

filter:

　　filter操作是对数组内元素进行过滤操作，符合条件的可以被过滤出来

var attr=[1,2,3,4,5,6,7] var res=attr.filter(function (t) { return t>3; }) console.log(res)

reduce：

　　reduce是个累加器，会接收两个元素，然后将结果与第三个元素再进行操作，一直到数组结束为止

res=attr.reduce(function (p1,p2) { return p1*p2+1 })

every和some：

　　every和some都会返回true或false，其中every需要数组元素都满足才返回true，而some只要有一个元素满足条件就返回true

var res=attr.every(function (t) { return t>1; }) console.log(res) var attr=[1,2,3,4,5,6,7] var res=attr.some(function (t) { return t>1; }) console.log(res)

indexOf与lastIndexOf：

可以查找是否在数组中，如果找到会返回index值，如果没有找到会返回 -1，通过这个可以判断元素是否在数组中，里面包括两个参数，第一个是要查找的元素，第二个是从哪个位置开始查找

Array.isArray()：

判断是否是一个数组

toString():

　　toString和join一样都是连接字符串，但是和join不一样的地方在于它只能通过，来连接

三、事件

　　JS是通过事件来与网页进行交互的。

事件包括以下几部分：

1、事件类型：是一个用来说明发生什么类型事件的字符串，像鼠标悬停，按下键盘等，也可以把事件类型叫做事件名字，用特定的名字来标识所讨论的特定类型的事件

2、事件目标：事件目标是发生事件或者与之相关的对象，当讲事件时，我们必须同时指定类型和目标，像window的load事件或者链接的click事件，在客户端js应用程序中，window，document，和Element对象是最常见的事件目标，但是某些事件也是右其他类型的对象触发的

3、事件处理程序：用户在页面中进行点击这个动作、鼠标移动的动作，网页页面加载完成的动作等，都可以称为事件名称即click mousemove load等都是事件的名称，响应某个事件的函数称之为事件处理程序，或者事件侦听器

4、事件对象：是与特定事件相关且包含有关事件详细信息的对象、事件对象作为参数传递给事件处理程序函数，所有事件对象都有用来指定事件类型的type属性和指定事件目标target属性，每个事件类型都为其相关事件对象定义一组属性

5、事件传播：浏览器决定那个对象触发⑦某个事件处理程序

事件类型：

1、内联模型

2、脚本模型

脚本模型是为了解决html与js没法分离的问题，但是脚本模型没法执行多个事件处理程序，这个需要DOM2的事件来完成

<input type="button" value="脚本模型1" id="btn1"> <script> btn1=document.getElementById('btn1'); btn1.onclick=function () { alert('hello2') } </script> //直接赋值不需要加括号 function test2() { alert('hello3') } btn2=document.getElementById('btn2'); btn2.onclick=test2 var btn3=document.getElementById('btn3'); var count=0; btn3.onclick=function () { alert(count++); if(count===3){ btn3.onclick=null;//dom取消需要将它重新复制为Null就可以了 } }

3、DOM2模型

addEventLisnter（）与removeEventLisnter（）W3C与IE9以后支持

attathEvent() detachEvent() IE8支持

需要注意的是：

　　IE中通过e获取不到，需要window.event来获取事件

<body> <input type="button" value="dianji" id="btn1"> <script> var btn1=document.getElementById('btn1'); btn1.onclick=function (e) { e=e||window.evnet;//IE中通过e获取不到，需要window.event来获取事件 } </script> </body>

事件流：

从页面中接收事件的顺序

冒泡：从里往外大部分浏览器都支持冒泡

捕获：从外往里

<div id="div1" style="background:#ABCDEF;width:300px;height:100px;"> <input type="button" value="dianji" id="btn1"> </div> <script> var btn1=document.getElementById('btn1'); var box1=document.getElementById('div1'); btn1.onclick=function () { alert('btn1 ') } box1.onclick=function () { alert('box1') } document.body.onclick=function () { alert('body') } document.documentElement.onclick=function () { alert('html') } document.onclick=function () { alert('document') } </script> 冒泡

取消冒泡：

btn1.οnclick=function () { alert('btn1 '); var e = e||window.event; if(typeof e.cancelBubble ==undefined){ e.stopPropagation();//取消冒泡 }else{ e.cancelBubble=true;//IE取消 }}

addEventListener（x,x,x）和removeEvenetListener（x,x,x）

　　addEventListener包括三个参数，第一个是事件名，第二个是函数，第三个是false或者true，其中false表示冒泡

attachEvent(x,x)和detachEvent（x,x）

只包含两个参数，事件名与函数名，其中click需要写成onclick

在IE8中需要使用window.event.cancelBubble=true来取消事件冒泡

夸浏览器的处理事件函数

判断行为类型与取消默认行为

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="tijiao" id="btn1"> <br> <a href="https://wwww.baidu.com" id="btn2">点击</a> <script> var btn1=document.getElementById('btn1'); btn1.addEventListener('click',function () { alert('click') },false); btn1.addEventListener('mouseover',function (e) { e.target.style.backgroundColor='red'; },false); btn1.addEventListener('mouseout',function (e) { e.target.style.backgroundColor='' }); btn2.addEventListener('click',function (e) { e.preventDefault();//取消默认行为　　　　　//如果是在IE8中，需要使用window.event.returnValue=false 来取消默认行为 }) </script> </body> </html>

eventPhase属性：

　　W3C中

　　捕获阶段调用事件处理程序：eventPhase=1

　　处于目标对象上：eventPhase=2

　　冒泡阶段调用事件处理程序：eventPhase=3

　　IE8中

　　使用window.event.srcElement来获取行为阶段

　统一行为处理函数：

五、表单验证

　　参见 http://validform.rjboy.cn/

六、特殊函数

1、私有函数

为了防止某些变量泄漏采用私有函数方式，外界无法看到函数的值

2、返回函数的函数

function a() { alert('aaaa'); return function () { alert('bbbb') } } var func=a(); func()

3、扩展性

所有的内置对象和自定义对象都是显示可扩展的，宿主对象的可扩展性由JS引擎定义的

Object.isExtensible()检测是否可扩展的，也可以通过Object.preventExtensitions()变为不可扩展，同时注意，变为不可扩展的话，不能再变为可扩展的

var obj={}; console.log(Object.isExtensible(obj));

变为不可扩展的

var d={}; d.x=2; Object.preventExtensions(d); d.y=3; console.log(d);

Object.seal()能将对象设置为不可扩展外，还能将对象的所有自身属性都变为不可配置，也就是说不能给这个对象添加新的属性，并且它已有属性也不能添加和配置，不过他的已有属性可读属性依然可以配置，通过Object.isSealed()检测对象是否封闭

Object.freeze():

除了对象设置为不可扩展和将其属性设置为不可配置外，还可以将他自身所有数据属性设置为只读，如果对象存储器属性具有setter方法，存储器属性不受影响，仍然可以通过属性赋值赋值给他们，Object.isFroze()检查是否冻结

数据封装对象包括：

Object对象

Object.prototype

Number

Boolean

String

Array

Function

七、Object对象

定义：Object是js中所有对象的父级对象，我们创建的所有对象都继承于此，包括内建对象

语法：new Object（）或者{name：value}

属性：

　　Object.create()

Object.defineProperty()

Object.definProperties() 在一个对象上添加或修改一个或多个自有属性，并返回对象

Object.keys()

Object.getOwnPropertyNames()返回一个由指定对象的所有自身属性的属性名组成的数组，这其中包括不可枚举的

Object.getOwnPropertyDescriptor(obj, prop)返回指定对象上一个自有属性对应的属性描述符,两个参数，第一个是哪个对象，第二个是这个对象的哪个属性

可以通过下面的命令来得到obj2的属性与值：

console.log(Object.getPrototypeOf(obj2)==obj1);

　　Object.getPrototypeOf():返回指定对象的原型，也就是该对象内部属性[Prototype]的值

　　Object.prototype:

　　所有对象都继承了Object.prototype的方法和属性，尽管他们可能被覆盖

　　属性：

　　　　Object.prototype.constructor返回一个指向创建了该对象原型的函数引用

var obj3=new Object(); console.log(Object.constructor==Object);

　　　　Object.prototype.hasOwnProperty()检测某个对象是否含有指定的自身属性

　　　　Object.prototype.isPrototypeOf() 检测一个对象是否存在于另一个对象的原型链上

　　　　Object.prototype.propertyIsEnumerable():检测指定的属性是否是当前对象可枚举的自身属性

　　　　Object.prototype.toString()返回一个代表该对象的字符串　　　

//可以简写 var toString=Object.prototype.toString; console.log(toString.call(new Date)); console.log(toString.call(Math));

　　　　Object.prototype.valueOf()返回的是this值，即对象本身

var obj={x:1}; console.log(obj.valueOf());

八、Number对象

语法：new Number（）

console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE) console.log(Number.NaN); console.log(Number.NEGATIVE_INFINITY); console.log(Number.POSITIVE_INFINITY); console.log(Number.isNaN(NaN)); console.log(Number.isNaN(Number.NaN)); console.log(Number.isNaN('NaN'));

toFixed()返回一个字符串，以定点数的形式来表达某个数字，并进行四舍五入

var n = 12345.5665; console.log(n.toFixed(2));//保留2位小数 console.log(n.toFixed(12));//会不够位数补零

toExponential（）返回要给字符串，以指数形式来表达某一个数字

var x1=77.1234; console.log(x1.toExponential()); console.log(x1.toExponential(2));

toPrecision（）返回一个字符串，即可以是指数型，也可以是小数型

九、Boolean对象

语法new Boolean（）

var b=new Boolean(); console.log(typeof b); console.log(b.valueOf()); console.log(typeof b.valueOf()); var c=new Boolean(0); console.log(c);

十、String对象

new String（s）构造函数

function String（s）转换函数

// 第一个表示字符串 var n='gavin'; console.log(typeof n); // 第二个是string函数 var n=String('gavin'); console.log(typeof n); // 第三个是string对象 var n=new String('gavin'); console.log(typeof n);

string对象和string函数是有区别的

　　方法：

　　String.charAt(n) n代表索引值，表示取得一个字符串的第n个字符，希望返回的字符在字符串string中的索引，返回值是字符串string的第n个字符

　　　　注意：返回字符串的起始点为0，如果不在该字符串长度返回内会返回空字符串

var k=new String('gavin'); console.log(k.charAt(0)); console.log(k.charAt(1)); console.log(k.charAt(2)); console.log(k.charAt(3)); console.log(k.charAt(10));

String.charCodeAt()返回指定字符的ASCII值

var a=new String("this is a test"); console.log(a.charCodeAt(0)) console.log(a.charCodeAt(2)) console.log(a.charCodeAt(5)) console.log(a.charCodeAt(10));

String.fromCharCode()根据指定ASCII返回对应的字符

console.log(String.fromCharCode(117)); console.log(String.fromCharCode(65,69,73));

String.concat()链接字符串

var str='hello'; console.log(str.concat(' world')) console.log(str.concat(' world','kkkkkk','!!!'))

String.indexOf()查找的字符串位置，返回的字符串首次所在位置，没有的话返回-1

var atr='this is a test!'; console.log(atr.indexOf('!')); //查看a出现的次数 var str='aslajfaldfefalfajfelafelafe'; var pos=str.indexOf('a') var count=0; while(pos!=-1){ count++; pos=str.indexOf('a',pos+1); } console.log(count);

String.localCompare()比较字符串

console.log('k'.localeCompare('z'));

String.math():找到一个或多个正则表达式的结果

var str='this is a test!'; var re=/is/ig; console.log(str.match(re)); var str='QWEQWQW!#O!#@E!@#O!JEJ!#@E!@#jafdewiaeefqwefoeqer'; console.log(str.match(/[a-f]/ig))

String.search()根据正则表达式进行搜索

var str='this is a seaisrch!'; console.log(str.search(/is/i));

String.replace()替换

var str1="this is a test"; var res=str.replace(/is/ig,'KKK'); console.log(res)

String.slice()截取

var str='abcedf'; var res=str.slice(2) console.log(res);//从2开始截取全部 console.log(str.slice(0,2));//从0开始截取到2为止

String.split()将字符串拆分成数组,其中包括两个参数，第一个是以谁来差分，第二个是取几部分

var str='2017-09-12'; var arr=str.split('-') console.log(arr)

String.toUperCase() String.toLowerCase()

console.log('KING'.toLowerCase()); console.log('king'.toUpperCase());

　十一、Function对象

JS中所有函数都是以对象形式存在的

属性：

　　1、construtor返回创建该对象的构造函数

　　2、length 返回调用当前函数的参数个数

　　3、caller 返回调用当前函数的函数

function A() { return A.caller; } function B() { return A() } console.log(B()); console.log(A());

　　4、arugments返回该函数执行时内置的arguments对象

function Test() { return arguments } console.log(Test(1,2,3,4,'a'))

　　arguments.callee是调用函数本身，可以通过这种方式实现递归，举例说明，匿名函数的递归：

function (count) { if(count<=3){ console.log(count); arguments.callee(++count); } } )(0);

方法：

　　1、call（）调用当前Function对象，可同时改变函数内的this指针引用，函数参数一个个分别传入

var obj={ name:'gavin', say:function (somebody) { return 'hello '+somebody+' this is '+ this.name; } } var obj1={ name:'kkblue' } // 如果obj1想引用obj中的say方法，可以使用call（） console.log(obj.say.call(obj1,'tom'));

十二、Function对象

　　3、apply（）调用当前Function对象，可同时改变函数内this指针引用，函数参数以数组或者arguments方式传入

　　3、toString（）返回定义该Function对象的字符串

　　4、valueOf()返回Function对象本身

工具类对象：

1、Math对象

　　2、Date对象

十三、Math对象

console.log(Math.E); console.log(Math.PI); console.log(Math.abs(-12)); console.log(Math.ceil(12.3323)); console.log(Math.floor(14.8)); console.log(Math.round(12345.52387,2)); console.log(Math.pow(2,3)); console.log(Math.sqrt(4)); console.log(Math.random()); console.log(Math.max(12,3,23,2323,5234,234232,3223432,)); console.log(Math.min(123,3234,2324,123,3,32));

十四、对象的属性

　　对象自身的属性优先于对象的原型属性，举例说明：

function Product(name) { this.name=name; } Product.prototype.name='gaivn'; var p1=new Product('kkblue') console.log(p1.name);//自身属性高于原型属性 delete p1.name;//删除自身属性，会去查找原型属性 console.log(p1.name);

　　如果只显示自身属性，可以使用hasOwnProperty（）来进行判断：

　　十五、prototype属性

　　prototype可以给原型添加属性，这样做的好处在于，即使实例已经引用了对象，但是仍然可以通过对象原型添加属性，这是实例仍然可以继承这些原型属性，可以任意调用并修改

　　只有函数才有prototype属性，而且prototype对应的是一个对象，这个对象里的construtor指回的是这个函数本身

　　注意：

　　在通过prototype进行原型添加的时候，即可以一个一个添加也可以通过对象的方式一起添加，例如：

　　__proto__属性：对象专有，函数是没有的

　　每个函数在实例化后，产生的新的对象都会有一个__proto__隐含的属性指向源函数的prototype属性产生的原型对象，这个__proto__也叫做伪类属性，它是新产生的对象跟函数的原型对象之间的直接纽带关系，可以不通过函数就直接访问

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function Person() { var age=30; this.age=22; this.name='gavin'; } Person.prototype.headcount=3; var p1=new Person(); var p2=new Person(); Person.prototype.headcount=4; p1.constructor={name:33};//修改了p1的constructor后，p1的原型就不是Person了，但是仍然可以通过p1.headcout访问到 //说明p1得到原型对象不是通过p1.constructor.prototype.headcount来得到的，而是通过__proto__直接从原型对象中得到的 console.log(p1.headcount); console.log(p1.__proto__.headcount); Person.prototype.xx='aaaa'; console.log(p1.xx); Person.prototype={yy:44}; console.log(p1.yy);//访问不到，但是如果new一个对象，可以访问到 var p3=new Person(); console.log(p3.yy); </script> </body> </html>

十六、JS解析与执行过程

全局：

　　预处理阶段：

　　　　在全局层面，JS解析器有一个Exectue Context（执行上下文），这里有两种类型：

　　　　1、var定义的变量，会直接定义为变量名： undefined

　　　　2、函数：会直接将整个函数引用调用

　　　　顺序为先扫描函数声明后扫描变量（var声明的变量）在这里有两个原则：

　　　　　　1、处理函数声明有冲突，会覆盖原有的函数

　　　　　　2、处理变量声明有冲突，会忽略新的变量声明

　　执行阶段

函数：

　　预处理阶段

　　执行阶段

十七、this

this表示运行时的调用，而不是定义时的调用，只有当运行时才能知道this代表的是谁

继承与多态的例子：

其中继承通过Object.create(父类的.prototype)来完成，但是记住需要将子类的constructor修改为自己的类名，同时实现多态，需要子类的super=父类的prototype，同时在子类定义时需要调用子类.super.和父类同名的函数名称

转载于:https://www.cnblogs.com/xiaopi-python/p/8251656.html

最新回复(0)