Javascript
本文共 12625 字，大约阅读时间需要 42 分钟。
目录
一、简介
1、定义
javascript是一门动态弱类型的解释型编程语言，增强页面动态效果，实现页面与用户之间的实时动态的交互。
javascript是由三部分组成：ECMAScript、DOM、BOM
- ECMAScript由ECMA-262定义，提供核心语言功能（ECMA是欧洲计算机制造商协会）
- DOM(Document Object Model)文档对象模型，提供访问和操作网页内容的方法和接口
- BOM(Browser Object Model)浏览器对象模型，提供与浏览器交互的方法和接口
2、注释
JavaScript中代码注释：
- 单行 //
- 多行 /* */
注意：此注释仅在Script块中生效。
3、引入文件
1. 引入外部文件
2. 存放在HTML的<head>或<body>中
- HTML的head中
- HTML的body代码块底部(推荐)
3. 为什么要放在<body>代码块底部？
- HTML代码从上到下执行，先加载CSS，避免html出现无样式状态；
- 将JavaScript代码块放在<body>最后，可以让网页尽快的呈现给用户，减少浏览者的等待时间，避免因为JS代码块阻塞网页的呈现。
二、变量
JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
三、数据类型
JavaScript 中的数据类型分为原始类型和对象类型：
- 原始类型
- 数字
- 字符串
- 布尔值
- 对象类型
- 数组
- “字典”
- ...
特别的，数字、布尔值、null、undefined、字符串是不可变。
// null、undefinednull是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。undefined是一个特殊值，表示变量未定义。
1、数字（Number）
JavaScript中不区分整数和浮点数，所有数字均用浮点数值表示。
转换：
- parseInt(..) 将某值转换成整数，不成功则NaN
- parseFloat(..) 将某值转换成浮点数，不成功则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( ) | 返回原始数值 |
2、字符串（String）
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常见功能：
| 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( ) | 将字符串转换成大写(针对地区) |
| String.toLowerCase( ) | 小写 |
| String.toUpperCase( ) | 大写 |
| String.toString( ) | 返回原始字符串值 |
| String.toString() | 返回原始字符串值 |
| String.valueOf( ) | 返回原始字符串值 |
//创建字符串对象两种方式 var str1="hello"; var str2=new String("hello2"); //查询字符串索引 var str="welcome to the world of JS!"; var str2=str.indexOf("l"); var str3=str.lastIndexOf("l"); alert(str2); //结果为2 alert(str3); //结果为18// substr substring console.log(str1.substr(1,3));//ell console.log(str1.substring(1,3));//el console.log(str1.slice(1,4));//ell console.log(str1.slice(-3,-1))//el
var num1 = new Number(123); //创建了一个数字类型的对象 var num3 = Number(456); // 456 var num2 = 666; var s1 = 's123'; var num4 = parseInt(s1); console.log(num1.valueOf(),num2,num3); console.log(num4); // NaN if(isNaN(num4)){ console.log('not a number'); // not a number } else { console.log('a number'); } console.log(isFinite(num3)); // 是否是有限值 true Infinity表示无穷大。 console.log(typeof num3); // 'number' 返回的是字符串 var a = 1222.4444444; console.log(a.toFixed(2)); // 1222.44 console.log(a.toExponential(3)); // 1.222e+3 3、布尔类型（Boolean）
布尔类型仅包含真假，与Python不同的是其首字母小写。
true（真）和false（假）
- == 比较值相等
- != 不等于
- === 比较值和类型相等（比较过程没有任何类型转换）
- !=== 不等于
- || 或
- && 且
var a = 123;var s = '123';console.log(a==s); // trueconsole.log(a===s); // false 判断值和类型一样
4、数组
JavaScript中的数组类似于Python中的列表
| 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, ...) | 插入、删除或替换数组的元素
|
| Array.toLocaleString( ) | 把数组转换成局部字符串 |
| Array.toString( ) | 将数组转换成一个字符串 |
// //创建方式 var arr1=[1,"hello",[11,2],{"name":"Yuan"}]; var arr2=new Array(3); var arr3=new Array(1,"world",true,[1,2,3]); console.log(typeof arr1); console.log(typeof arr2); console.log(typeof arr3); // 注意： var arr4=new Array(10) 10是size console.log(arr1.length);// Array对象的方法// join方法 拼接字符串 var arr5=[1,2,3,4,"1234"]; var ret=arr5.join("**"); console.log(ret); console.log(typeof ret) //toString() var ret2=arr1.toString(); console.log(ret2); console.log(typeof ret2);// concat() 连接字符串 var arr5=[1,2,3];// var ret3=arr5.concat([5,66]); var ret3 = arr5.concat([5,66]) console.log(ret3); console.log(typeof ret3); console.log(typeof arr5);// reverse 反转字符串// var arr6=[23,45,37,88]; var arr6=[10,45,100,88]; console.log(arr6.reverse()); console.log(arr6.sort()) ; //10,100,45,88 //对arr6数组进行排序// function f(a,b) {//// if(a>b){// return 4// }// else if(a 5. Math
Math对象是一个静态对象，而不是构造函数。实际上，Math只是一个由Javascript设置的对象命名空间，用于存储数学函数。
作用是执行普通的算数任务。
常量Math.E常量e，自然对数的底数。Math.LN1010的自然对数。Math.LN22的自然对数。Math.LOG10E以10为底的e的对数。Math.LOG2E以2为底的e的对数。Math.PI常量figs/U03C0.gif。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( )计算xy。Math.random( )计算一个随机数。Math.round( )舍入为最接近的整数。Math.sin( )计算正弦值。Math.sqrt( )计算平方根。Math.tan( )计算正切值。
四、其他
1、序列化
- JSON.stringify(obj) 序列化
- JSON.parse(str) 反序列化
2、转义
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
- encodeURIComponent( ) 转义URI组件中的字符
- escape( ) 对字符串转义
- unescape( ) 给转义字符串解码
- URIError 由URl的编码和解码方法抛出
// 转义 其中escape() unescape()主要是对cookies使用 var a = 'http://www.baidu.com?name=Aaron'; console.log(encodeURI(a)); //http://www.baidu.comname=%E6%9D%8E%E6%9D%B0 console.log(decodeURI(encodeURI(a))); // http://www.baidu.com?name=Aaron console.log(encodeURIComponent(a)); // http%3A%2F%2Fwww.baidu.com%3Fname%3D%E6%9D%8E%E6%9D%B0 console.log(decodeURIComponent(encodeURIComponent(a))); // http://www.baidu.com?name=Aaron
3、eval
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
- eval()
- EvalError 执行字符串中的JavaScript代码
console.log(eval('1+2*5-5')); // 6console.log(eval(a = 1)); // 1 声明了一个局部变量a值为1 4、正则表达式
1、定义正则表达式
- /.../ 用于定义正则表达式
- /.../g 表示全局匹配
- /.../i 表示不区分大小写
- /.../m 表示多行匹配 JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)
注：定义正则表达式也可以 reg= new RegExp()
var pattern = /^Java\w*/gm; var text = "JavaScript is more fun than \nJavaEE or JavaBeans!"; result = pattern.exec(text) console.log(result) result = pattern.exec(text) console.log(result) result = pattern.exec(text) console.log(result)
2、匹配
JavaScript中支持正则表达式，其主要提供了两个功能：
- test(string) 检查字符串中是否和正则匹配
n = 'uui99sdf'reg = /\d+/reg.test(n) ---> true # 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$
- exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。 非全局模式 获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配） var pattern = /\bJava\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) var pattern = /\b(Java)\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) 全局模式 需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕 var pattern = /\bJava\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) var pattern = /\b(Java)\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text)
3、字符串中相关方法
obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部obj.replace(regexp, replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&：当前匹配的内容； $`：位于匹配子串左侧的文本； $'：位于匹配子串右侧的文本 $$：直接量$符号
5、时间处理
JavaScript中提供了时间相关的操作，时间操作中分为两种时间：
- 时间统一时间
- 本地时间（东8区
var current_time=new Date().toLocaleString();//得到当前时间
五、语句和异常
1、条件语句
JavaScript中支持两个中条件语句，分别是：if 和 switch。
if 语句：
//if语句 if(条件){ }else if(条件){ }else{ } Switch 语句：
// ----- switch var week="Monday"; var week=3; switch (week){ case "Monday" :alert("星期一");break; case "Tuesday":alert("星期二");break; case 3:alert("星期三");break; case 4:alert("星期四");break; case 5:alert("星期五");break; case 6:alert("星期六");break; case 7:alert("星期日");break; default:alert("nothing"); } 2、循环语句
JavaScript中支持四种循环语句，分别是：for、for in、while、do-while
for 循环：
for(var i=0; i<10; i++){ document.write("welcome"+i+"") document.write("welcome"+i+"") } for in 循环：
var attr=[111,222,333]; for (var i=0;i
while 循环：
while(条件){ // break; // continue;} do-while 循环：
//循环的代码至少执行一次，结果为1 var num = 0; do { num++; }while (num>10); 3. label语句
label 语句可以理解为跳出任意循环
未加label语句实例：
//输出结果为95
加label语句实例：
//输出结果为55//i和j都循环为到5时，跳出了两层循环
4. 异常处理
主动跑出异常 throw Error('xxxx')
try { //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行}catch (e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向Error对象或者其他抛出的对象}finally { //无论上述代码怎么，finally代码块始终会执行} 六、函数
1、基本函数
JavaScript中函数基本上可以分为一下三类：
// 普通函数 function func(arg){ return true; } // 匿名函数 var func = function(arg){ return "tony"; } // 自执行函数 (function(arg){ console.log(arg); })('123') 注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
function f() { console.log(arguments); } f(1,2,45,6,7,78); function ADD() { var sum=0; for (var i=0;i 2、函数的作用域与作用域链
JavaScript中没有块级作用域
var name = 'Aaron'; (function Main(){ console.log(name);//undefined if(1){ var name = 'peng'; } console.log(name);//peng })(); console.log(name);//Aaron //输出结果第一个为undefined//声明需提前（Hoisting），在JavaScript引擎“预编译”时进行，函数在被执行之前，会将其中的变量全部声明，而不赋值 作用域链
每个构造函数都有一个内部对象指针，指向原型对象，而原型对象也包含一个指向构造函数的指针。如此层层递进，形成作用域链条
var name = 'Aaron'; function Main() { function F1(){ var name = 'peng'; console.log(name);//peng } function F2() { console.log(name);//Aaron } F1(); F2(); } Main(); // 从内到外的优先级寻找// F2() 的作用域链为 F2()-->Main() 3、闭包
闭包是指可以包含自由（未绑定到特定对象）变量的代码块。
「闭包」，是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」
由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量。
function 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中可能导致内存泄露。
所以在退出函数之前，将不使用的局部变量全部删除。
4、面向对象
面向对象的三大特性:
封装：隐藏代码实现的细节，实现代码的模块化 继承：扩展已经存在的代码模块，实现代码重用 多态：接口的不同实现方式，实现接口重用关键字：
this 代指此时的对象
new 创建对象时必须使用
构造函数模式：
function Foo (name,age) { this.Name = name; this.Age = age; this.Func = function(arg){ return this.Name + arg; }} var obj = new Foo('alex', 18);var ret = obj.Func("sb");console.log(ret); 对于上述代码需要注意：
- Foo充当的构造函数
- this代指对象
- 创建对象时需要使用 new
上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题：
function Foo (name,age) { this.Name = name; this.Age = age;}Foo.prototype = { GetInfo: function(){ return this.Name + this.Age }, Func : function(arg){ return this.Name + arg; }} 七、Prototype模式的验证方法
1. isPrototypeOf()
用来判断一个对象是否存在于另一个对象的原型链中
Foo.prototype.isPrototypeOf(obj)trueFoo.prototype.isPrototypeOf(obj2)true
2. hasOwnProperty()
用来判断某一个对象(不包括原型链)是否具有指定属性。
obj.hasOwnProperty('Name')trueobj.hasOwnProperty('Age')true 3. in运算符
判断某个实例是否具有某个属性
'Name' in objtrue'Age' in objtrue
转载地址：http://kezwi.baihongyu.com/
你可能感兴趣的文章
软件评测和测试国家现行标准
查看>>
理解测试策略
查看>>
机器学习界大牛林达华推荐的书籍
查看>>
path变量备份
查看>>
Lesson2.2 & 2.3 Maya command reference & quick help
查看>>
lesson 2.4 - Converting MEL Commands to Python
查看>>
Lesson3.2 variables
查看>>
3.4.2 - Operators & 3.4.3 division and truncation
查看>>
3.7.1 - Strings
查看>>
3.7.4 - Indexing and Slicing Strings
查看>>
3.7.5 - Modifying Strings
查看>>
3.7.6 - String Methods
查看>>
3.8 - Using the Print Function
查看>>
3.9.1 - Lists in Python
查看>>
3.9.2 - Lists - Adding and Removing Objects
查看>>
3.9.3 - Sorting Lists
查看>>
3.10 - Maya Commands: ls
查看>>
3.11 - Dictionaries in Python
查看>>
3.12 - Tuples in Python
查看>>
4.4 - For Loops
查看>>