JavaScript
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应的代码,浏览器可以解释并作出相应的处理。
1·JavaScript代码存在形式
1 <!--方式一--> 2 <script type"text/javascript" src="js文件"></script> 3 4 5 <!--方式二 --> 6 <script type"text/javascript"> 7 js代码内容... 8 </script>
2·JavaScript代码存在位置
·HTML的head中
·HTML的body代码块底部(强烈推荐)
由于html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么及时js代码耗时严重,也不会影响用户看到页面的效果,只是js实现特效慢而已。
1 如: 2 <script src="https://www.xxxx.com"></script> 3 <script> 4 alert("123"); 5 </script> 6 7 8 //alert(弹窗)
3·变量
·全局变量
·局部变量
JavaScript中变量的声明是一个非常容易出错的点,局部变量必须以个var开头,如果未使用var,则默人表示声明的是全局变量·
1 var name ="xxxx" //局部变量 2 age = 18 //全局变量
注:单行注释 // 多行注释 /* */
4·基本数据类型
javascript 中的数据类型分为原始类型和对象类型:
·原始类型
·数字
·字符串
·布尔值
·对象类型
·数组
·"字典"
·...
特憋的,数字,布尔值,null,undefined,字符串是不可变的.
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//null, undefined null,是JavaScript语言的关键字,它表示以个特殊的值,常用来描述"空值". undefined是一个特殊值,表示变量未定义.
1·数字(Number)
JavaScript中不区分整数值和浮点数值,java中所有数字均使用浮点数值表示·
转换:
·parseIne(变量名) 将某个值转换成数字,不成功则返现NaN
·parseFloat(变量名)将某个值转换成浮点数,不成功则返现NaN
特殊值:
·NaN:非数字,可使用isNaN(num)来判断·
·Infinity:无穷大,可使用isFinite(num)来判断·
更多数值计算:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
常量 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( ) 计算正切值。
2·字符串(String)
字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法·
常见功能:
a = "huanyingguanglin" "huanyingguanglin" a.length (查看长度) 16 a = " wyc " " wyc " a.trim() (去除字符串的两边空格) "wyc" a.trimleft() (去除字符串的左边空格) a.trimright (去除字符串的右边空格) a = "nihao" "nihao" a.charAt(2) (返回字符串中的参数的字符)!参数可以定义,看字符串的长度定义 "h"
a = "wyc"
"wyc"
b = "nihao"
"nihao"
a.concat(b) (字符串的拼接)
"wycnihao"
a = "wycnihao"
"wycnihao"
a.indexOf("ni",2) (寻找子序列位置)
3
a = "wycnihao"
"wycnihao"
a.lastIndexOf("yc",2) (子序列位置 )
1
a = "wycnihao"
"wycnihao"
a.substring("yc",4) (根据索引获取子序列)
"wycn"
a = "wycnihao"
"wycnihao"
a.slice(1,6) (切片,从字符串的1位置到6位置)
"ycnih"
a = "wycnihao"
"wycnihao"
a.toLowerCase() (将字符串变小写)
"wycnihao"
a.toUpperCase() (将字符串变大写)
"WYCNIHAO"
a = "wycnihao"
"wycnihao"
a.split("cn") (字符串的分割)
["wy", "ihao"]
a = "wycwyc9wycwyc"
"wycwyc9wycwyc"
a.split(/(\d+)/) (字符串的分割,支持正则分割)
["wycwyc", "9", "wycwyc"]
a = "wycwycwyc"
"wycwycwyc"
a.match(/w/) (全局匹配)
["w"]
a.match(/w/g) (匹配的元素后边加个g,表示把字符串里边所有的w全部匹配出来)
["w", "w", "w"]
a = "wycwycwyc"
"wycwycwyc"
a.search(/y/) (匹配出元素的位置)
1
a = "wyc7wycwyc9"
"wyc7wycwyc9"
a.replace(/(\d+)/g,"X") (将匹配到的数字全部替换为"X")
"wycXwycwycX"
a.replace(/(\d+)/g,"$&"+"L") (将匹配到的数字后边的元素替换为“L”)
"wyc7Lwycwyc9L"
a.replace(/(\d+)/g,"&") (将所有匹配到的数字替换成艾特符号“&”)
"wyc&wycwyc&"
a = "wyc7wycwyc9"
"wyc7wycwyc9"
a.replace(/(\d+)\w+(\d+)/g,"$2$1") (将匹配到数字的7,9交换一下位置)
"wyc97"
a = "wyc7wycwyc9"
"wyc7wycwyc9"
a.replace(/\d+/,"$`") (用于匹配左侧文本)
"wycwycwycwyc9"
a = "wyc7wycwyc9"
"wyc7wycwyc9"
a.replace(/(\d+)\w+(\d+)/g,"$$") (直接量"$"符号)
"wyc$"
3·布尔值
布尔类型仅包含真假,与python不同的是,python第一个字母是大写,("True","False"),则JavaScript里是小写("true","false")
· == (比较值相等)
· != (不等于)
· === (比较值和类型相等)
· !=== (不等于)
· || (或)
· && (且)
4·数组
JavaScript中的数组类似于python中的列表[]
常见功能:
1 obj.length //数组的大小 2 3 obj.push(ele) //尾部追加元素 4 5 obj.pop //尾部获取元素 6 7 obj.shift() //头部移除元素 8 9 obj.splice(start,deleteCount,value,......) //插入·删除或替换数组的元素 10 11 obj.splice(n,0,val) //指定位置插入元素 12 obj.splice(n,1,val) //指定位置替换元素 13 obj.splice(n,1) //指定位置删除元素 14 15 obj.slice() //切片 16 17 obj.reverse() //反转 18 19 onj.join(sep) //将数组元素链接起来以构建一个字符串 20 21 obj.concat(val,...) //连接数组 22 23 obj.sort() //对数组元素进行排序
//查看数组元素的长度 a = [11,22,33,44,55] [11, 22, 33, 44, 55] a.length 5 // 给数组尾部添加元素 a.push(66) 6 a [11, 22, 33, 44, 55, 66] //删除数组元素 [11, 22, 33, 44, 55, 66] ret = a.pop() 66 ret 66 a [11, 22, 33, 44, 55] //在数组头部添加元素 [11, 22, 33, 44, 55] a.unshift(77) 6 a [77, 11, 22, 33, 44, 55] //在数组头部移除元素 [77, 11, 22, 33, 44, 55] a.shift() 77 a [11, 22, 33, 44, 55] //splice即删除既添加 a [11, 22, 33, 44, 55] a.splice(1,0,"wyc") (表示在1的位置,0表示不删除,"wyc"表示在1的 位置添加进去) [] a [11, "wyc", 22, 33, 44, 55] //splice能添加多个元素 [11, "wyc", 22, 33, 44, 55] a.splice(1,0,"wyc","nihao") (splice,可以在数组一次里边添加多个元素 ) [] a [11, "wyc", "nihao", "wyc", 22, 33, 44, 55] //splice删除 [11, "wyc", "nihao", "wyc", 22, 33, 44, 55] a.splice(1,2) (表示从数组的第一个位置删除两个元素) ["wyc", "nihao"] a [11, "wyc", 22, 33, 44, 55] //splice替换 [11, "nihao", "wyc", 22, 33, 44, 55] a.splice(1,1,"hi") (表示在元素1的位置删除1在添加一个新的元素) ["nihao"] a [11, "hi", "wyc", 22, 33, 44, 55]
//切片 a [11, "hi", "wyc", 22, 33, 44, 55] a.slice(1,2) ["hi"] //反转 [11, "hi", "wyc", 22, 33, 44, 55] a.reverse() (将数组元素反转过来) [55, 44, 33, 22, "wyc", "hi", 11] //将数组元素拼接起来(join) [55, 44, 33, 22, "wyc", "hi", 11] a.join("_") //将数组元素用下滑线拼接起来 "55_44_33_22_wyc_hi_11" //sort排序 [55, 44, 33, 22, "wyc", "hi", 11] a.sort() //将数组进行排序 [11, 22, 33, 44, 55, "hi", "wyc"]
四·其他
1丶序列化
·JSON.stringify(obj) 序列化
·JSON.parse(str) 反序列化
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
a = 3 3 JSON.stringify(a) (将a序列化成字符串) "3" JSON.parse(a) (将a在反序列化成整数) 3
2丶转义
·decodeURI() URI中为转义的字符
·decodeURIComponent() URI组件中的未转义字符
·encodeURI() URI中的转义字符
·encodeURIComponent() 转义URI组件中的字符
·escape() 对字符串的转义
·unescape() 给转义字符串解码
·URIError 由URI的编码和解码方法抛出
3丶eval
JavaScript中的eval是python中eval和exec的合集,既可以编译代码也可以获取返回值·
·eval()
·EvalError 执行字符串中的JavaScript代码
4丶正则表达式
JavaScript中支持正则表达式,其主要提供了两个功能:
·test(string) 用于检测正则是否匹配
·exec(string) 用于获取正则匹配的内容
注:定义正则表达式时,"g","i","m"分别表示去全局匹配,忽略大小写,多行匹配·
5丶时间处理
JavaScript中提供了时间相关的操作,时间操作中分为两种时间:
·时间统一时间
·本地时间(东8区)
更多操作参见:http://www.shouce.ren/api/javascript/main.html
五丶语句和异常
1丶条件语句
javascript中支持两个条件语句分别是:if和switch
if(条件){ }else if(条件){ }else{ }
switch(name){ case"1": age = 123; break; case"2": age = 456; break default: age = 777; }
2丶循环语句
javascript中支持三种循环语句,分别是:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var names = ["wyc","nihao"]; for(var i=0;i>names.lengith;i++){ console.log(i); console.log(name[i]); }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var name = ["wyc","nihao"] for (var index in name ){ console.log(index); console.log(name[index]); }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
while(条件){ //break; //continue; }
3丶异常处理
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 try{ 2 //这段代码从上到下运行,其中任何一个语句抛出异常该代码块就结束运行· 3 } 4 catch(e){ 5 //如果try代码中抛出异常,catch代码块中的代码就会被执行. 6 //e是一个局部变量,用来指向Error对象或者其他抛出的对象 7 } 8 finally{ 9 //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行· 10 }
注:主动跑出异常throw Error("xxxxx")
六丶函数
1·基本函数
javascript中函数基本可分为一下三类:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//普通函数 function function(arg){ //创建函数 return true; } //匿名函数 var func = function(arg){ return "tony"; } //自动执行函数 (function(arg){ console.log(arg); })("123")
注意:对于javascript中函数参数,十几参数的个数可能小于形参的个数,函数内的特殊值arguments中封装了所有的实际参数·
2·作用域
javascript中每个函数都有自己的的作用域,当出现函数嵌套时,就出现了作用域链,当内层函数使用变量时,会根据作用域链从内到外一层层的循环,如果不存在则异常·
!切记:所有的作用域在创建函数且未执行的时候就已经存在了·
1 function f2(){ 2 var arg = 111; 3 function f3(){ 4 conlose.log(arg); 5 } 6 return f3(); 7 } 8 9 ret = f2(); //执行函数 10 ret();
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function f2(){ var arg = [11,22]; function f3(){ console.log(arg); } arg = [44,55]; return f3; } ret = f2(); ret();
注:声明提前,在javascript引擎"预编译"时进行·
更多:
3丶闭包
[闭包],是指拥有多个变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分·
闭包是个函数,而他[记住了周围发生了什么]·表现为由[一个函数]体中定义了[另一个函数],由于作用域链只能从内向外找,默认外部无法获取函数内部变量.闭包、在外部获取函数内部的变量.
function f1(){ var arg = [11,22]; function f2(){ return arg; } return f2; } ret = f2(); ret();
面向对象·
function Foo (name,age){ this.Name = name; this.Age = age; this.Func = function(arg){ return this.name + arg; } } var obj = new Foo("Wyc",19); var ret = obj.Func("nihao"); console.log(ret);
对于上述代码需要注意:
· Foo充当的构造方法 在python构造方法代指的是(__init__)
· thif 代指对象
· 创建对象是需要使用 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; } }