一、简介：JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器
1 <!-- 方式一 --> 2 <script type"text/javascript" src="JS文件"></script> 3 4 <!-- 方式二 --> 5 <script type"text/javascript"> 6 Js代码内容 7 </script>
JavaScript代码存放位置
- HTML的head中
- HTML的body代码块底部(推荐)
二、变量
JavaScript中变量的声明，局部变量必须用var+变量名，否则便是全局变量
1 <script type="text/javascript"> 2 3 // 全局变量，type="text/javascript"可不加 4 name = 's'; 5 6 function func(){ 7 // 局部变量 8 var age = 18; 9 10 // 全局变量 11 gender = "男" 12 } 13 </script> 14 15 //JavaScript中代码注释： 16 17 单行 // 18 多行 /* */
三、数据类型
JavaScript 中的数据类型分为原始类型和对象类型：
- 原始类型
- 数字
- 字符串
- 布尔值
- 对象类型
- 数组
- 字典
1 // null、undefined 2 3 null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。 4 undefined是一个特殊值，表示变量未定义。 5 6 特别的，数字、布尔值、null、undefined、字符串是不可变
1、数字（Number）
JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
转换：
- parseInt(..) 将某值转换成数字，不成功则NaN
- parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
- NaN，非数字。可使用 isNaN(num) 来判断。
- Infinity，无穷大。可使用 isFinite(num) 来判断。
1 常量 2 3 Math.E 4 常量e，自然对数的底数。 5 6 Math.LN10 7 10的自然对数。 8 9 Math.LN2 10 2的自然对数。 11 12 Math.LOG10E 13 以10为底的e的对数。 14 15 Math.LOG2E 16 以2为底的e的对数。 17 18 Math.PI 19 常量figs/U03C0.gif。 20 21 Math.SQRT1_2 22 2的平方根除以1。 23 24 Math.SQRT2 25 2的平方根。 26 27 静态函数 28 29 Math.abs( ) 30 计算绝对值。 31 32 Math.acos( ) 33 计算反余弦值。 34 35 Math.asin( ) 36 计算反正弦值。 37 38 Math.atan( ) 39 计算反正切值。 40 41 Math.atan2( ) 42 计算从X轴到一个点的角度。 43 44 Math.ceil( ) 45 对一个数上舍入。 46 47 Math.cos( ) 48 计算余弦值。 49 50 Math.exp( ) 51 计算e的指数。 52 53 Math.floor( ) 54 对一个数下舍人。 55 56 Math.log( ) 57 计算自然对数。 58 59 Math.max( ) 60 返回两个数中较大的一个。 61 62 Math.min( ) 63 返回两个数中较小的一个。 64 65 Math.pow( ) 66 计算xy。 67 68 Math.random( ) 69 计算一个随机数。 70 71 Math.round( ) 72 舍入为最接近的整数。 73 74 Math.sin( ) 75 计算正弦值。 76 77 Math.sqrt( ) 78 计算平方根。 79 80 Math.tan( ) 81 计算正切值。
2、字符串（String）：无法修改
1 obj.length 长度 2 3 obj.trim() 移除空白 4 obj.trimLeft() 5 obj.trimRight) 6 obj.charAt(n) 返回字符串中的第n个字符 7 obj.concat(value, ...) 拼接 8 obj.indexOf(substring,start) 子序列位置 9 obj.lastIndexOf(substring,start) 子序列位置 10 obj.substring(from, to) 根据索引获取子序列 11 obj.slice(start, end) 切片 12 obj.toLowerCase() 大写 13 obj.toUpperCase() 小写 14 obj.split(delimiter, limit) 分割 15 obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效) 16 obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。 17 obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， 18 $数字：匹配的第n个组内容； 19 $&：当前匹配的内容； 20 $`：位于匹配子串左侧的文本； 21 $'：位于匹配子串右侧的文本 22 $$：直接量$符号
3、布尔类型（Boolean）
1 == 比较值相等 2 != 不等于 3 === 比较值和类型相等 4 !=== 不等于 5 || 或 6 && 且
4、数组：相当于python中的列表
1 obj.length 数组的大小 2 3 obj.push(ele) 尾部追加元素 4 obj.pop() 尾部获取一个元素 5 obj.unshift(ele) 头部插入元素 6 obj.shift() 头部移除元素 7 obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 8 obj.splice(n,0,val) 指定位置插入元素 9 obj.splice(n,1,val) 指定位置替换元素 10 obj.splice(n,1) 指定位置删除元素 11 obj.slice( ) 切片 12 obj.reverse( ) 反转 13 obj.join(sep) 将数组元素连接起来以构建一个字符串 14 obj.concat(val,..) 连接数组 15 obj.sort( ) 对数组元素进行排序
5、正则
1 /.../ 用于定义正则表达式 2 /.../g 表示全局匹配 3 /.../i 表示不区分大小写 4 /.../m 表示多行匹配 5 6 <!-- JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容) --> 7 8 var a = "JavaScript is more fun than \nJavaEE or JavaBeans!" 9 undefined 10 var b = /^Java\w*/gm 11 undefined 12 r = b.exec(a) 13 ["JavaScript", index: 0, input: "JavaScript is more fun than ↵JavaEE or JavaBeans!", groups: undefined] 14 r = b.exec(a) 15 ["JavaEE", index: 29, input: "JavaScript is more fun than ↵JavaEE or JavaBeans!", groups: undefined] 16 r = b.exec(a) 17 null
1 >var n = '333sss' 2 <undefined 3 >reg = /\d+/ 4 </\d+/ 5 >reg.test(n) 6 <true 7 8 //只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$
1 //获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。 2 3 <!--非全局模式：获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）--> 4 var s = "JavaScript is more fun than JavaEE or JavaBeans!" 5 undefined 6 var p = /\bJava\w*\b/ 7 undefined 8 res = p.exec(s) 9 ["JavaScript", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 10 res = p.exec(s) 11 ["JavaScript", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 12 13 var p = /\b(Java)\w*\b/ 14 undefined 15 res = p.exec(s) 16 (2) ["JavaScript", "Java", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 17 18 19 <!--全局模式：需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕--> 20 var s = "JavaScript is more fun than JavaEE or JavaBeans!" 21 undefined 22 var p = /\bJava\w*\b/g 23 undefined 24 res = p.exec(s) 25 ["JavaScript", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 26 res = p.exec(s) 27 ["JavaEE", index: 28, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 28 res = p.exec(s) 29 ["JavaBeans", index: 38, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 30 res = p.exec(s) 31 null 32 var p = /\b(Java)\w*\b/g 33 undefined 34 res = p.exec(s) 35 (2) ["JavaScript", "Java", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 36 res = p.exec(s) 37 (2) ["JavaEE", "Java", index: 28, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 38 res = p.exec(s) 39 (2) ["JavaBeans", "Java", index: 38, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined] 40 res = p.exec(s) 41 null
1 obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效) 2 obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部 3 obj.replace(regexp, replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项， 4 5 $数字：匹配的第n个组内容； 6 $&：当前匹配的内容； 7 $`：位于匹配子串左侧的文本； 8 $'：位于匹配子串右侧的文本 9 $$：直接量$符号
6、其他
1 //序列化就是将JavaScript中的数据类型转换成字符串 2 JSON.stringify(obj) 序列化 3 JSON.parse(str) 反序列化
1 var r = "www.baidu.com?name='你好'" 2 3 encodeURI(r) //URI中的转义字符 4 "www.baidu.com?name='%E4%BD%A0%E5%A5%BD'" 5 6 decodeURI(r) //URl中未转义的字符 7 "www.baidu.com?name='你好'" 8 9 encodeURIComponent(r) //转义URI组件中的字符 10 "www.baidu.com%3Fname%3D'%E4%BD%A0%E5%A5%BD'" 11 12 decodeURIComponent(r) //URI组件中的未转义字符 13 "www.baidu.com?name='你好'" 14 15 <!-- 16 escape( ) 对字符串转义 17 unescape( ) 给转义字符串解码 18 URIError 由URl的编码和解码方法抛出 19 -->
//JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。 >eval(2+2*5) <12
时间处理：http://www.shouce.ren/api/javascript/main.html
四、语句异常
1、条件语句
1 if(条件){ 2 3 }else if(条件){ 4 5 }else{ 6 7 }
1 switch(name){ 2 case '1': 3 age = 123; 4 break; 5 case '2': 6 age = 456; 7 break; 8 default : 9 age = 789; 10 }
2、循环
1 var names = ["a", "b", "c"]; 2 3 for(var i=0;i<names.length;i++){ 4 console.log(i); 5 console.log(names[i]); 6 }
1 var names = ["a", "b", "c"]; 2 3 for(var index in names){ 4 console.log(index); 5 console.log(names[index]); 6 }
1 while(条件){ 2 // break; 3 // continue; 4 }
1 try { 2 //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 3 } 4 catch (e) { 5 // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 6 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 7 } 8 finally { 9 //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。 10 }
五、函数
1、基本函数：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
1 // 普通函数 2 function func(arg){ 3 return true; 4 }
1 //普通函数 2 function func(){ 3 console.log(1); 4 } 5 setInterval("func()", 5000); 6 7 //匿名函数 8 setInterval(function(){console.log(1);},5000) 9 10 11 setinterval为定时器；
1 // 自执行函数 2 (function(arg){ 3 console.log(arg); 4 })('123') 5 6 //自执行函数等同于以下代码： 7 function func(arg){ 8 console.log(arg); 9 } 10 func(123)
2、函数作用域
1 function M(){ 2 if(1==1){ 3 var name = 'jack'; 4 } 5 console.log(name); 6 } 7 // 输出： jack 8 9 JavaScript6中新引入了 let 关键字，用于指定变量属于块级作用域
1 //在JavaScript中每个函数作为一个作用域，在外部无法访问内部作用域中的变量。 2 3 function Main(){ 4 var innerValue = 'seven'; 5 } 6 7 Main(); 8 9 console.log(innerValue); 10 11 // 报错：Uncaught ReferenceError: innerValue is not defined
1 //JavaScript中的每个函数作为一个作用域，如果出现函数嵌套函数，则就会出现作用域链。 2 3 a = '1'; //第三步 4 5 function Func(){ 6 var a = "2"; //第二步 7 function inner(){ 8 var a = '3'; //第一步 9 console.log(a); 10 } 11 inner(); 12 } 13 Func(); 14 15 //当执行console.log(a)时，其寻找顺序为根据作用域链从内到外的优先级寻找，如果内层没有就逐步向上找，直到没找到抛出异常。
1 //JavaScript的作用域在被执行之前已经创建，日后再去执行时只需要按照作用域链去寻找即可。 2 3 a = '1'; 4 5 function Func(){ 6 var a = "2"; 7 function inner(){ 8 9 console.log(a); 10 } 11 a = '3'; 12 return inner; 13 } 14 15 var ret = Func(); 16 ret(); 17 // 输出结果： 3 18 19 全局作用域 -> Func函数作用域 -> inner函数作用域
1 JavaScript中如果不创建变量，直接去使用，则报错： 2 console.log(a); 3 // 报错：Uncaught ReferenceError: a is not defined 4 5 JavaScript中如果创建值而不赋值，则该值为 undefined，如： 6 var a; 7 console.log(a); 8 // 输出：undefined 9 10 函数内： 11 function Foo(){ 12 console.log(a); 13 var a = 's'; 14 } 15 Foo(); 16 // 输出：undefined 17 上述代码，不报错而是输出 undefined，其原因是：JavaScript的函数在被执行之前，会将其中的变量全部声明，而不赋值。所以，相当于上述实例中，函数在“预编译”时，已经执行了var a；所以上述代码中输出的是undefined。
3、面向对象
1 function Foo (name,age) { //Foo充当构造函数 2 this.Name = name; //this代指对象 3 this.Age = age; 4 this.Func = function(arg){ 5 return this.Name + arg; 6 } 7 } 8 9 var obj = new Foo('abc', 18); //创建对象时需要使用 new 10 var ret = obj.Func("ss"); 11 console.log(ret); 12 13 14 //上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题
1 我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个对象; 2 3 用途:包含可以由特定类型的所有实例共享的属性和方法; 4 5 理解:prototype是通过调用构造函数创建的那个对象的原型对象; 6 7 使用原型的好处是可以让所有对象实例共享它所包含的属性和方法; 8 9 也就是说,不必在构造函数中定义对象信息(属性/方法),而是可以直接将这些信息添加到原型中; 10 11 function Foo (name,age) { 12 this.Name = name; 13 this.Age = age; 14 } 15 Foo.prototype = { 16 GetInfo: function(){ 17 return this.Name + this.Age 18 }, 19 Func : function(arg){ 20 return this.Name + arg; 21 } 22 }
六、AO词法分析
1 <body> 2 <script> 3 function t1(age) { 4 console.log(age); 5 var age = 27; 6 console.log(age); 7 function age() {}; 8 console.log(age); 9 } 10 t1(3); 11 </script> 12 </body> 13 14 输出结果为： 15 function age(){} 16 27 17 27
1 active object ====>AO 2 1、形式参数 3 2、局部变量 4 3、函数声明表达式 5 6 分析： 7 1、形式参数 8 AO.age = undefined; 9 AO.age = 3; 10 11 2、局部变量 12 AO.age = undefined; 13 14 3、函数声明表达式 15 AO.age = function(){};