JavaScript学习

一、简介

定义： JavaScript是一门动态弱类型的解释型编程语言，增强页面动态效果，实现页面与用户之间的实时 动态的交互。

JavaScript是由三部分组成：ECMAscript、DOM、BOM

ECMAScript由ECMA-262定义，提供核心语言功能（ECMA是欧洲计算机制造商协会）DOM(Document Object Model)文档对象模型，提供访问和操作网页内容的方法和接口BOM(Browser Object Model)浏览器对象模型，提供与浏览器交互的方法和接口

注释

JavaScript中代码注释 单行 // 多行 /* */

引入文件

1.引入外部文件

<script type="text/javascript" src="JS文件"></script>

2.存放在HTML的 head 标签 或者 body 标签中

<script type="text/javascript"> js代码内容 <script> HTML的head中HTML的body代码块底部(推荐)

3.为什么要放在``代码块底部？

HTML代码从上到下执行，先加载CSS，避免html出现无样式状态 将JavaScript代码放在可以让网页尽快的呈现给用户，减少浏览者的等待时间，避免因为JS代码块阻塞网页的呈现。

变量

需要注意的是：局部变量必须以var开头申明，如果不写var则为全局变量

代码示例

<script type="text/javascript"> // 全局变量 name = 'nick'; function func(){ // 局部变量 var age = 18; // 全局变量 gender = "man" } </script> (注：需要注意变量提升，就是把变量位置放到函数体的最上方)

二、运算符

1.算术运算符

一元算术+ 一元加，数值不会产生影响 对非数值应用一元加运算时，会调用Number()转型函数对这个值进行转换- 一元减，转换为负数 ~ ++ 递增1通过Number()转型为数字，再加1，再重新赋值给操作数值 – 递减1 ~二元算术 + 加法 - 减法 * 乘法/ 除法% 取模

二元运算过程

1、如果其中一个操作数是对象，则对象会转换为原始值：日期对象通过toString()方法执行转换，其他对象通过valueOf()方法执行转换，如果结果还不是原始值，则再使用toString()方法转换 2、在进行了对象到原始值的转换后，如果其中一个操纵数是字符串的话，另一个操作数也会转换为字符串，进行字符串拼接。 3、两个操作数都将转换成数字或NaN,进行加法操作

2.比较运算符

=== 严格运算符比较过程没有任何类型转换!== 严格运算符 ===的结果取反 == 相等运算符如果两个操作值不是同一类型，相等运算符会尝试进行一些类型转换，然后再进行比较!= 不相等运算符==的结果取反> 大于运算符 >= 大于等于运算符 小于运算符 小于等于运算符

严格运算符比较过程

1、如果两个值类型不同则返回false 2、如果两个值类型相同，值相同，则返回true，否则返回false 3、如果两个值引用同一个对象，则返回true，否则，返回false console.log([] === []);//false console.log({} === {});//fasle var a = {}; b = a; console.log(a === b);//true

相等运算符比较过程

对象类型和原始类型比较 1、对象类型会先使用valueOf()转换成原始值，如果结果还不是原始值，则再使用toString()方法转换，在进行比较(日期类只允许使用toString()方法转换为字符串) 2、在对象转换为原始值之后，如果两个操作数都是字符串，则进行字符串的比较 3、在对象转换为原始值之后，如果至少有一个操作数不是字符串，则两个操作数都将通过Number()转型函数转换成数字进行数值比较 注：如果一个值是null，另一个值是undefined，则返回true; console.log(null == undefined);//true 如果一个值是null,另一个值是0，则返回false console.log(null == 0);//false 空字符串或空格串会转成0 console.log(null == []);//false console.log(null == '');//false console.log([] == ' ');//false，相当于'' == ' ' console.log([] == '');//true，相当于'' == '' console.log(0 == '');//true

3.逻辑运算符

! 非（两个!!表示Boolean()转型函数）返回一个布尔值 && 与两个操作都为true时返回true，否则返回false（返回值不一定是布尔值），可以多个连用（..&&..&&..） || 或两个操作都是false时返回false，否则返回true（返回值不一定是布尔值），可以多个连用（..||..||..） 七个假值 consloe.log(!!undefined);//false console.log(!!null);//false console.log(!!0);//false console.log(!!-0);//false console.log(!!NaN);//false console.log(!!'');//false console.log(!!false);//false console.log(!!{});//true console.log(!![]);//true &&常用操作 1> 取代if语句 //前面条件成立则运行后面操作 (a == b) && dosomething(); 2> 用于回调函数 //若没有给参数a传值，则a默认为undefined假值，所以不执行a()。 function fn(a){ a && a(); } | | 常用操作 1> 变量设置为默认值 //如果没有向参数a传入任何参数，则将该参数设置为空对象 function func(a){ a = a || {}; }

三、数据类型

特殊值

null 表示一个空对象指针，常用来描述“空值”；undefined　　表示变量未定义。

数字（Number）

JavaScript中不区分整数和浮点数，所有数字均用浮点数值表示。

转换：

parseInt(..) 将某值转换成整数，不成功则NaNparseFloat(..) 将某值转换成浮点数，不成功则NaN

特殊值：

NaN，非数字。可以使用 isNaN(num) 来判断。Infinity，无穷大。可以使用 isFinite(num) 来判断。 Number对数字的支持Number.MAX_VALUE最大数值Number.MIN_VALUE最小数值Number.NaN非数字Number.NEGATIVE_INFINITY 负无穷大Number.POSITIVE_INFINITY正无穷大Number.toExponential( )返回四舍五入的科学计数法，加参数为保留几位Number.toFixed( ) 小数点后面的数字四舍五入，加参数为保留几位Number.toPrecision( )四舍五入，自动调用toFixed()或toExponential()Number.toLocaleString( ) 把数字转换成本地格式的字符串Number.toString( )将数字转换成字符串Number.valueOf( )返回原始数值

字符串（String）

String.length字符串的长度String.trim()移除空白String.trimLeft()移除左侧空白String.trimRight()移除右侧空白String.concat(value,……)拼接String.slice(start,end)切片String.split()分割String.search() 从头开始匹配，返回匹配成功的第一个位置(g无效)String.match( )全局搜索，如果正则中有g表示找到全部，否则只找到第一个String.replace( )替换，正则中有g则替换所有，否则只替换第一个匹配项； (待修改)String.charAt( )返回字符串中的第n个字符String.charCodeAt( )返回字符串中的第n个字符的代码String.fromCharCode( )从字符编码创建—个字符串String.indexOf( )查找子字符串位置String.lastIndexOf( )查找子字符串位置（从尾部开始查询）String.localeCompare( )用本地特定的顺序来比较两个字符串String.substr()抽取一个子串String.substring( )返回字符串的一个子串String.toLocaleLowerCase( )把字符串转换小写(针对地区，在不知道程序在哪个语言环境中运行时用)String.toLocaleUpperCase( )将字符串转换成大写(针对地区)/td> String.toLowerCase()小写String.toUpperCase( )大写String.toString( )返回原始字符串值String.valueOf( )返回原始字符串值

转义字符

\0空字节\n换行\t制表符\b空格\r回车\f换页\\斜杠\’单引号\”双引号

布尔类型（Boolean）

true（真）和false（假） toString()返回Boolean的字符串值(‘true’或’false’)toLocaleString()返回Boolean的字符串值(‘true’或’false’)valueOf()返回Boolean的原始布尔值(true或false)

数组

var name = Array("nick","jenny"); var name = ["nick","jenny"]; Array.length数组的大小Array.push()尾部添加元素Array.pop()删除并返回数组的最后一个元素Array.unshift()在数组头部插入一个元素Array.shift( )在数组头部移除一个元素Array.slice( )切片Array.reverse( )反转Array.join( )将数组元素连接起来以构建一个字符串Array.concat( )拼接Array.sort( )排序Array对数组的内部支持Array.splice( start, deleteCount, value, …)插入、删除或替换数组的元素obj.splice(n,0,val)指定位置插入元素obj.splice(n,1,val)指定位置替换元素obj.splice(n,1)指定位置删除元素Array.toLocaleString( )把数组转换成局部字符串Array.toString( )将数组转换成一个字符串

Math

Math对象是一个静态对象，而不是构造函数。实际上，Math只是一个由于JavaScript设置的对象命名空间，用于存储数学函数 作用是执行普通的算数任务 常量Math.E常量e，自然对数的底数。Math.LN1010的自然对数。Math.LN22的自然对数。Math.LOG10E以10为底的e的对数。Math.LOG2E以2为底的e的对数。Math.PI常量圆周率。Math.SQRT1_22的平方根除以1。Math.SQRT22的平方根。静态函数Math.abs( )计算绝对值。Math.acos( )计算反余弦值。Math.asin( )计算反正弦值。Math.atan( )计算反正切值。Math.atan2( )计算从X轴到一个点的角度。Math.ceil( )对一个数上舍入。Math.cos( )计算余弦值。Math.exp( )计算e的指数。Math.floor( )对一个数下舍人。Math.log( )计算自然对数。Math.max( )返回两个数中较大的一个。Math.min( )返回两个数中较小的一个。Math.pow( )计算x^y。Math.random( )计算一个随机数。Math.round( )舍入为最接近的整数。Math.sin( )计算正弦值。Math.sqrt( )计算平方根。Math.tan( )计算正切值。

四、语句

1.条件语句

JavaScript中支持两个条件语句，分别是：if 和 switch

if 语句：

//if语句 if(条件){ }else if(条件){ }else{ }

Switch 语句：

//switch语句，name等于nick是执行第一个case,等于第二个执行第二个case,其它执行default. switch(name){ case 'nick': age = 18; break; case 'jenny': age = 21; break; default : age = 0; }

2.循环语句

JavaScript中支持四种循环语句，分别是：for、for in、while、do-while

for循环

var names = ["nick", "jenny"]; for(var i=0;i<names.length;i++){ console.log(i); //索引 console.log(names[i]); }

for in 循环

var names = ["nick", "jenny"]; for(var index in names){ console.log(index); console.log(names[index]); }

while 循环

while(条件){ // break; // continue; }

do-while 循环

//循环的代码至少执行一次，结果为1 var num = 0; do { num++; }while (num>10);

3.label 语句

label语句可以理解为跳出任意循环

未加 label 语句实例

//输出结果为55 //i和j都循环为到5时，跳出了两层循环 <script> var num = 0; outPoint: for (var i=0;i<10;i++) { for (var j=0;j<10;j++) { if (i==5 && j==5) { break outPoint; } num++; } } console.log(num); </script>

加 label 实例

//输出结果为55 //i和j都循环为到5时，跳出了两层循环 <script> var num = 0; outPoint: for (var i=0;i<10;i++) { for (var j=0;j<10;j++) { if (i==5 && j==5) { break outPoint; } num++; } } console.log(num); </script>

4.异常处理

主动跑出异常 throw Error（’xxx’） try { //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 } catch (e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 } finally { //无论上述代码怎么，finally代码块始终会执行 }

五、函数Function

函数定义的三种方式

//普通函数 function func(arg){ return true; } //匿名函数 var func = function(arg){ retrun "nick"; } //自执行函数 (function(arg){ console.log(arg); })('nick')

函数参数

函数参数的个数可以小于实际需要传参的个数，没传参的默认为undefined,参数传多默认不起作用 function man(name,age) { console.log(name,age); } man("nick",18); //nick 18 man("nick"); //nick undefined man("nick",18,19); //nick 18

arguments 可接收所有参数，返回一个数组

function man() { console.log(arguments); } man("nick",18); //["nick", 18] man("nick"); //["nick"] man("nick",18,19); //["nick", 18, 19]

函数的作用域与作用域链

JavaScript中没有块级作用域 var name = 'nick'; (function main(){ console.log(name);//undefined if(1){ var name = 'jenny'; } console.log(name);//jenny })(); consloe.log(name);nick //输出结果第一个为underfined //声明需要提前，在JavaScript引擎“预编译”时进行，函数在被执行之前，回将其中的变量全部声明，而不赋值

作用域链

每个构造函数都有一个内部对象指针，指向原型对象，而原型对象也包含一个指向构造函数的指针。如此层层递进，形成作用域链条 var name = 'nick'; function Main() { function F1(){ var name = 'jenny'; console.log(name);//jenny } function F2() { console.log(name);//nick } F1(); F2(); } Main(); // 从内到外的优先级寻找 // F2() 的作用域链为 F2()-->Main()

闭包：

闭包就是能够读取其他函数内部变量的函数 functin f1(){ var n = 1; Add = function(){ n++; }; function f2(){ console.log(n); } return f2; } var result=f1(); result();//1 Add(); result();//2 //result 就是闭包f2函数 //函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被清除 闭包使函数中的变量都被保存在内存中，内存消耗大，所以少用闭包，否则会造成网页的性能低，在IE中可能导致内存泄漏。 所以在退出函数之前，将不使用的局部变量全部删除

六、面向对象

面向对象的三大特性：

封装：隐藏代码实现的细节，实现代码的模块化继承：扩展已经存在的代码模块，实现代码重用多态：接口的不同实现方式，实现接口重用

关键字：

this 代指此时的对象new 创建对象时必须使用

构造函数模式：

function Foo(name,age){ this.name = name; this.age = age; this.Func = function(){ return this.Name + this.age; } } var obj = new Foo("nick",18); var ret = obj.Func(); console.log(ret); var obj2 = new Foo("jenny",21); 上述模式把同样的函数封装到了不同对象，造成了内存浪费。

原型模式(prototype)

function Foo(name,age) { this.Name = name; this.Age = age; } Foo.prototype = { GetInfo: function () { var str = " is good"; return this.Name + str; }, Func: function () { return this.Name + this.Age; } }; var obj = new Foo("nick",18); console.log(obj.Name);//nick console.log(obj.Age);//18 var ret = obj.GetInfo(); console.log(ret);//nick is good var ret2 = obj.Func(); console.log(ret2);//nick18 var obj2 = new Foo("nick",18); 所有的构造函数的prototype属性都指向另一个对象(同一块内存地址)，这个对象的所有属性和方法，都会被构造函数的实例继承.

Prototype 模式的验证方法

1. isPrototypeOf(): 用来判断一个对象是否存在于另一个对象的原型链中 Foo.prototype.isPrototypeOf(obj) true Foo.prototype.isPrototypeOf(obj2) true 2、hasOwnProperty(): 用来判断某一个对象(不包括原型链)是否具有指定属性。 obj.hasOwnProperty('Name') true obj.hasOwnProperty('Age') true

in 运算符

判断某个实例是否具有某个属性 'Name' in obj true 'Age' in obj true

七、其他

1、序列化

JSON.stringfy(obj) 序列化JSON.parse(str) 反序列化

2、转义

decodeURL() URL中未转义的字符decodeURLComponent() URL组件中的未转义字符encodeURL() URL中的转义字符encodeURLComponent() 转义URL组件中的字符escape() 对字符串转义unescape() 给转义字符串解码URLError 由URL的编码和解码方法抛出

3、eval

JavaScript中的eval既可以运行代码也可以获取返回值 a=eval('1+1'); console.log(a);// 2

eval()

EvalError 执行字符串中的JavaScript代码

4、正则表达式

var p = /nick/g; console.log(p.test('nickjennynick')); // true console.log(p.exec('nickjennynick')); // ["nick", index: 0, input: "nickjennynick"] JavaScript中支持正则表达式，其主要提供了两功能: test(string) 用于检测正则是否匹配exec(string) 用于获取正则匹配的内容

匹配模式：

g:表示全局(global)模式，匹配所有字符串，不会匹配到第一项时停止i:表示不区分大小写(case-insensitive)模式m:表示多行(multiline)模式，到达一行文本末尾时还会继续查找下一行中是否存在匹配的项

括号分组：

console.log(/(n)(i)ck/.exec('nickjenny')); // console.log(/(n)(i)ck/.exec('nickjenny')) console.log(/(n)(i)ck{2}/.exec('nickkjenny')); // ["nickk", "n", "i", index: 0, input: "nickkjenny"]

元字符

元字符 名称匹配对象.点号 单个任意字符(除回车\r、换行\n、行分隔符\u2028和段分隔符\u2029外)[]字符组列出的单个任意字符*星号匹配0次或多次[^]排除型字符组 未列出的单个任意字符?问号匹配0次或1次+加号匹配1次或多次{min,max}区间量词匹配至少min次，最多max次^脱字符行的起始位置$美元符行的结束位置| 竖线 分隔两边的任意一个表达式()括号限制多选结构的范围，标注量词作用的元素，为反向引用捕获文本\1,\2…反向引用 匹配之前的第一、第二…组括号内的表达式匹配的文本

匹配规则简写

\d 数字，等同于[0-9]\D 非数字，等同于[^0-9]\s空白字符\S 非空白字符\w字母、数字、下划线，等同于[0-9A-Za-z_](汉字不属于\w)\W 非字母、数字、下划线，等同于[^0-9A-Za-z_]

5、时间处理

时间操作中两种时间：时间统一时间本地时间（东8区）

Date 方法

Date 操作日期和时间的对象Date.getDate( ) 返回一个月中的某一天Date.getDay( ) 返回一周中的某一天Date.getFullYear( ) 返回Date对象的年份字段Date.getHours( ) 返回Date对象的小时字段Date.getMilliseconds( ) 返回Date对象的毫秒字段Date.getMinutes( ) 返回Date对象的分钟字段Date.getMonth( ) 返回Date对象的月份字段Date.getSeconds( ) 返回Date对象的秒字段Date.getTime( ) 返回Date对象的毫秒表示Date.getTimezoneOffset( ) 判断与GMT的时间差Date.getUTCDate( ) 返回该天是一个月的哪一天(世界时)Date.getUTCDay( ) 返回该天是星期几(世界时)Date.getUTCFullYear( ) 返回年份(世界时)Date.getUTCHours( ) 返回Date对象的小时字段(世界时) Date.getUTCMilliseconds( ) 返回Date对象的毫秒字段(世界时)Date.getUTCMinutes( ) 返回Date对象的分钟字段(世界时)Date.getUTCMonth( ) 返回Date对象的月份(世界时)Date.getUTCSeconds( ) 返回Date对象的秒字段(世界时)Date.getYear( ) 返回Date对象的年份字段(世界时)Date.parse( ) 解析日期/时间字符串Date.setDate( ) 设置一个月的某一天Date.setFullYear( ) 设置年份，也可以设置月份和天Date.setHours( ) 设置Date对象的小时字段、分钟字段、秒字段和毫秒字段Date.setMilliseconds( ) 设置Date对象的毫秒字段Date.setMinutes( ) 设置Date对象的分钟字段和秒字段Date.setMonth( ) 设置Date对象的月份字段和天字段Date.setSeconds( ) 设置Date对象的秒字段和毫秒字段Date.setTime( ) 以毫秒设置Date对象Date.setUTCDate( ) 设置一个月中的某一天(世界时)Date.setUTCFullYear( ) 设置年份、月份和天(世界时)Date.setUTCHours( ) 设置Date对象的小时字段、分钟字段、秒字段和毫秒字段(世界时)Date.setUTCMilliseconds( ) 设置Date对象的毫秒字段(世界时)Date.setUTCMinutes( ) 设置Date对象的分钟字段和秒字段(世界时)Date.setUTCMonth( ) 设置Date对象的月份字段和天数字段(世界时)Date.setUTCSeconds( ) 设置Date对象的秒字段和毫秒字段(世界时)Date.setYear( ) 设置Date对象的年份字段Date.toDateString( ) 返回Date对象日期部分作为字符串Date.toGMTString( ) 将Date转换为世界时字符串Date.toLocaleDateString( ) 回Date对象的日期部分作为本地已格式化的字符串Date.toLocaleString( ) 将Date转换为本地已格式化的字符串Date.toLocaleTimeString( ) 返回Date对象的时间部分作为本地已格式化的字符串Date.toString( ) 将Date转换为字符串Date.toTimeString( ) 返回Date对象日期部分作为字符串Date.toUTCString( ) 将Date转换为字符串(世界时)Date.UTC( ) 将Date规范转换成毫秒数Date.valueOf( ) 将Date转换成毫秒表示