前端之JavaScript
JavaScript
JavaScript 是一种轻量级的编程语言；是可插入 HTML 页面的编程代码；JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
一，编写方式
1、JavaScript代码存在形式
/*方式一*/ <script type="text/javascript" src="commons.js"> //src是导入JS文件 </script> /*方式二*/ <script> function func(){ alert("Hello Welcome!") //弹窗，并显示 } func() //执行func函数
2、JavaScript代码存放位置
把JavaScript代码放在HTML的<body>标签内的代码底部；
Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面；
如果把js代码放在代码底部这样就不会影响页面显示，后续js的代码继续加载。
二、变量
JavaScript中的变量，局部变量前必须以 var 开头 ，没有加 var 默认为全局变量。
<script> name = "alex"; //全局变量 function f1(){ var name = 123; //name是变量名，变量名前加var 表示局部变量 } f1(); alert(name);</script><br><br>// 表示单行注释<br>/* */ 表示多行注释<br><br>PS：这注释仅在Script块中生效 |
三、数据类型
JavaScript 中的数据类型分原始类型和对象类型：
原始类型
数字
字符串
布尔值
对象类型
数组
"字典"
数字、布尔值、null、undefined、字符串，是不可变的。
|
|
// null、undefinednull是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。undefined是一个特殊值，表示变量未定义。 |
1、数字（Number）
JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
1）创建：
|
1
2
3
4
|
> num1 = 123; //直接创建一个原始值< 123>num2 = new Number(123); //根据Number类创建一个对象 |
2）转换：
- parseInt(..) 将某值转换成数字，不成功则NaN
s1 = "qq123";"qq123"n1 = parseInt(s1);NaNs2 = "456";"456"n2 = parseInt(s2);456 |
- parseFloat(..) 将某值转换成浮点数，不成功则NaN
|
|
a1 = 12.34531312.345313z1 = parseFloat(a1)12.345313 |
特殊值：
- NaN，非数字。可使用 isNaN(num) 来判断。
s1 = "ww123";n1 = parseInt(s1);if(isNaN(n1)){ //isNaN判断是否是数字else{}console.log(isNaN(n1)) |
- Infinity，无穷大。可使用 isFinite(num) 来判断。 flase则表示无穷；true则表示有限
- typeof, 判断类型
|
1
2
3
4
5
6
7
8
9
|
a = "123"ret = typeof a"number"a1 = "q123""q123"ret = typeof a1"string" |
更多数值计算：
常量 Math.E 常量e，自然对数的底数。 Math.LN10 10的自然对数。 Math.LN2 2的自然对数。 Math.LOG10E 以10为底的e的对数。 Math.LOG2E 以2为底的e的对数。 Math.PI 常量figs/U03C0.gif。 Math.SQRT1_2 2的平方根除以1。 Math.SQRT2 2的平方根。 静态函数 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( ) 计算正切值。 Math
2、字符串（String）
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本
常见功能：
测试地方在浏览器上进行，按F12，找到"Console"就可以进行调试了。
obj.length 获取字符串的长度
|
1
2
3
4
|
a1 = "alexseven""alexseven"a1.length9 |
obj.trim()移除两边空白
|
1
2
3
4
|
a1 = " alexseven "" alexseven "b = a1.trim()"alexseven" |
obj.trimLeft()移除左边空白
|
1
2
3
4
|
a1 = " alexseven "" alexseven "b = a1.trimLeft()"alexseven " |
obj.trimRight（）移除右边空格|
1
2
3
4
|
a1 = " alexseven "" alexseven "b = a1.trimRight()" alexseven" |
obj.charAt(n)根据索引，返回字符串中的第n个字符|
1
2
3
4
|
b = "alexseven""alexseven"b.charAt(0)"a" |
obj.concat(value, ...) 拼接|
1
2
3
4
|
b = "alexseven""alexseven"b.concat("Evc")"alexsevenEvc" |
obj.indexOf(substring,start)字符串找指定的字符的索引值|
1
2
3
4
|
b = "alexseven""alexseven"b.indexOf("x")3 |
obj.lastIndexOf(substring,start)子序列位置
|
1
2
3
4
5
6
|
b = "alexseven""alexseven"b.lastIndexOf("se")4b.lastIndexOf("en")7 |
obj.substring(from, to)根据索引获取子序列|
1
2
3
4
5
6
|
b = "alexseven""alexseven"b.substring(0,3)"ale"b.substring(5,9)"even" |
obj.slice(start, end)切片
|
1
2
3
4
5
|
b = "alexseven""alexseven"b.slice(3,6)"xse" |
obj.toLowerCase()大写obj.toUpperCase()小写obj.split(delimiter, limit)分割|
1
2
3
4
5
6
7
8
9
10
11
|
b = "alexseven""alexseven"b.split("e")["al", "xs", "v", "n"]a = "alexalexalex""alexalexalex"a.split('le',2)["a", "xa"]a.split('le',3)["a", "xa", "xa"] |
obj.search(regexp)从头开始匹配，返回匹配成功的第一个位置|
1
2
3
4
5
6
7
8
9
10
11
12
|
b = "alexseven""alexseven"b.split("e")["al", "xs", "v", "n"]b = "alexseven""alexseven"b.search("e")2b.search("le")1 |
obj.match(regexp)全局搜索，如果正则中有 g 表示找到全部，否则只找到第一个。obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
|
1
2
3
4
5
6
7
|
a = "alex7eric8Euuy""alex7eric8Euuy"a.replace(/\d+/,"&"); //找到一个替换后就不继续找"alex&eric8Euuy"a.replace(/\d+/g,"&"); //加上g后就是全局，找到所有"alex&eric&Euuy" |
$数字：匹配的第n个组内容；|
1
2
3
4
|
a = "alex7eric8Euuy""alex7eric8Euuy"a.replace(/(\d+)\w+(\d+)/g,"$1$2")"alex78Euuy" |
$&：当前匹配的内容；|
1
2
3
4
|
a = "alex4eric5Euuy""alex4eric5Euuy"a.replace(/(\d+)/g,"$&"+"X")"alex4Xeric5XEuuy" |
$`：位于匹配子串左侧的文本；|
1
2
3
|
a = "alex4eric5Euuy"a.replace(/\d+/,"$`")"alexalexeric5Euuy" |
$'：位于匹配子串右侧的文本|
1
2
3
4
|
a = "alex4eric5Euuy""alex4eric5Euuy"a.replace(/\d+/,"$'")"alexeric5Euuyeric5Euuy" |
$$：直接量$符号；$$ = $
|
1
2
3
4
|
a = "alex4eric5Euuy""alex4eric5Euuy"a.replace(/(\d+)\w+(\d+)/g,"$$")"alex$Euuy" |
3、布尔类型（Boolean）
布尔类型仅包含真假
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !=== 不等于
- || 或
- && 且
4、数组
JavaScript中的数组类似于Python中的列表。
|
1
2
|
a = [11,22,33,44,55,] #声明一个数组[11,22,33,44,55,] |
常见功能：
|
1
|
<span style="color: #ff00ff;">obj.length 数组的大小</span> |
|
1
2
3
4
|
a = [11,22,33,44][11, 22, 33, 44]a.length4 |
obj.pop()尾部获取一个元素|
1
2
3
4
|
a = [11,22,33,"alex",55][11, 22, 33, "alex", 55]a.pop()55 |
obj.shift() 头部获取元素|
1
2
3
4
|
a = [11,22,33,"alex",55][11, 22, 33, "alex", 55]a.shift()11 |
追加、插入、删除：
obj.push(ele) 尾部追加元素
obj.unshift(ele)头部插入元素 obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 obj.splice(n,0,val) 指定位置插入元素 obj.splice(n,1,val) 指定位置替换元素 obj.splice(n,1)指定位置删除元素
a = [11,22,33,44] #声明一个数组[11, 22, 33, 44]a.push(55) #在数组最后增加一个元素#这里是数组的长度a[11, 22, 33, 44, 55]a.unshift(00) #在数组最前面增加一个元素#长度a[0, 11, 22, 33, 44, 55]a.splice(3,0,'insert') #在指定的索引增加一个元素,括号内(3为索引值,0为固定值,要插入的内容)[]a[0, 11, 22, "insert", 33, 44, 55]a.unshift(100) |
obj.slice( )切片|
1
2
3
4
|
a = [11,22,33,"alex",55][11, 22, 33, "alex", 55]a.slice(1,2)[22] |
obj.reverse( )反转|
1
2
3
4
|
a = [11,22,33,"alex",55][11, 22, 33, "alex", 55]a.reverse()[55, "alex", 33, 22, 11] |
obj.join(sep)将数组元素连接起来以构建一个字符串|
1
2
3
4
|
a = [11,22,33,"alex",55][11, 22, 33, "alex", 55]a.join("_")"11_22_33_alex_55" |
obj.concat(val,..)合并 ；连接数组|
1
2
3
4
5
6
7
8
9
10
|
a = [11,22][11, 22]b = [44,55][44, 55]a.concat(b)[11, 22, 44, 55]a[11, 22]b.concat(a)[44, 55, 11, 22] |
obj.sort( )对数组元素进行排序|
1
2
3
4
|
a = [11,22,33,"alex",55][11, 22, 33, "alex", 55]a.sort()[11, 22, 33, 55, "alex"] |
5、字典
JS的字典，是对象实现的
|
1
2
3
4
|
a = {k1:123,k2:456}Object {k1: 123, k2: 456}a['k1']123 |
四、其他
1、序列化
- JSON.stringify(obj) 序列化
|
1
2
3
4
|
b = [11,22,33,44,55][11, 22, 33, 44, 55]JSON.stringify(b);"[11,22,33,44,55]" |
- JSON.parse(str) 反序列化
|
1
2
3
4
5
|
s = "[11,22,33,44,55]""[11,22,33,44,55]"JSON.stringify(s);JSON.parse(s);[11, 22, 33, 44, 55] |
2、转义
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
- encodeURIComponent( ) 转义URI组件中的字符
- escape( ) 对字符串转义
- unescape( ) 给转义字符串解码
- URIError 由URl的编码和解码方法抛出
<script type="text/javascript">s1 = "http://www.cnblogs.com/?k=%E6%9D%8E%E6%9D%BO";console.log(s1); ret = decodeURI(s1); //解码 console.log(ret); s2 = encodeURI(ret); //编码 console.log(s2);</script> |
3、eval
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
- eval()
- EvalError 执行字符串中的JavaScript代码
|
1
2
3
|
var x=10document.write(eval(x+17))27 |
4、正则表达式
JavaScript中支持正则表达式，其主要提供了两个功能：
- test(string) 用于检测正则是否匹配
- exec(string) 用于获取正则匹配的内容
注：定义正则表达式时，“g”、“i”、“m”分别表示全局匹配，忽略大小写、多行匹配。
5、时间处理
JavaScript中提供了时间相关的操作，时间操作中分为两种时间：
- 时间统一时间
- 本地时间（东8区）
更多操作参见：http://www.shouce.ren/api/javascript/main.html
五、语句和异常
1、条件语句
if(条件){ }else if(条件){ }else{ }
switch 条件 switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; } 777
2、循环语句
for 循环 for (var i=0;i<10;i++) { console.log(i) } 1 3 5 7 9
a = [11,22,33,44,55,66,77] [11, 22, 33, 44, 55, 66, 77] for (var item in a) {console.log(a[item])} 22 44 66
while(条件){ // break; // continue; }
3、异常处理
<script type="text/javascript"> try{ //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 var tiancai = isme }catch(e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 console.log(e) }finally{ //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。 console.log("shuaige is so smart;") }</script> |
六、函数
1、基本函数
// 普通函数 function func() { alert("Hello Word!") }<br>// function是关键字 // 定义一个可传参数的函数 function func(arg) { alert(arg) } func('Superman') // 自执行函数,顾名思义,定义好之后可以自动执行<br>// ()(): (function f3(arg) {alert(arg)})("we i good man"); // 匿名函数,了解就行 var a = function() { alert('meinv'); }; a();
注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
function f1(a,b,c) {<br>// console.log(arguments);// arguments表示实际多少参数传多少参数
console.log(a,b,c);
}
f1(1,2)
//可以传一个参数也可以传多个参数，不会异常
2、作用域
JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。
当内层函数使用变量时，会根据作用域链从内到外一层层循环如果不存在，则异常。
PS：所有的作用域在创建函数且未执行时候就已经存在
<script> // name = "alex"; // function f1(){ // var name = "eric"; // function f2(){ // alert(name); // } // f2() // } // f1(); name = "alex"; function f1(){ var name = "eric"; function f2(){ alert(name); } return f2 } var ret = f1(); ret(); </script>
注：声明提前，在JavaScript引擎“预编译”时进行。
更多：http://www.cnblogs.com/wupeiqi/p/5649402.html
3、闭包
闭包就是，函数里面嵌套函数，并且记住所有的状态。
function f2(){ var arg= [11,22]; function f3(){ return arg; } return f3; } ret = f2(); ret(); f2就是一个闭包，在执行调用的时候只能通过f2去调用，也就是由外向内去获取调用；而不能由内向外
4、面向对象
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 ，new是关键字。
上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题：
function Foo (name,age) {<br>//表示创建一个类Foo，并且创见Foo类的构造方法
this.Name = name;
this.Age = age;
}
Foo.prototype = {
GetInfo: function(){
return this.Name + this.Age
},
Func : function(arg){
return this.Name + arg;
}
}
//Foo.prototype.Func = function () {returnthis.Name +this.Age}；//第二种
更多详情：http://www.cnblogs.com/wupeiqi/articles/5602773.html
浙公网安备 33010602011771号