Javascript使用
[if !supportLists]一、 [endif]JS的三种使用方式
[if !supportLists]1、 [endif]行内:写在html标签中的js代码中
[if !supportLists]2、 [endif]内部:写在写在<script type="text/javascript"></script>标签之间可以放在html中的任意位置,一般放在<head>标签中或<body>标签中或<body>标签后;
3、 外部:引入外部的js文件
<script type="text/javascript"
src="js文件的路径"
></script>
注:如果<script>标签中设置了src属性,name写在<script>双标签中的js代码无效;
[if !supportLists]二、 [endif]变量和注释
[if !supportLists]1、 [endif]语句(statment)是为了完成某种任务进行的操作,语句分号结尾;
[if !supportLists]2、 [endif]多个语句可以写在一行,但是不建议这么写;
[if !supportLists]3、 [endif]表达式不需要分号结尾,一旦表达式后面添加分号,则JavaScript引擎会将表达式视为语句,这样会产生一些没有任何意义的语句;
[if !supportLists]4、 [endif]所有的变量都通过“var”声明;
[if !supportLists]5、 [endif]注释://单行注释;/*多行注释*/。
[if !supportLists]三、 [endif]变量的声明
[if !supportLists]1、 [endif]js是一种弱类型语言,声明时不需要指定数据类型,直接通过var修饰符声明;
[if !supportLists]2、 [endif]先声明再赋值,或者声明并赋值;
[if !supportLists]3、 [endif]如果声明变量时不适用var修饰,则该变量是全局变量;
[if !supportLists]4、 [endif]变量的注意点:a、若是声明没有赋值,则该变量的值为undefined;
b、变量要有定义才能使用,若未声明使用,js报错,告诉你变量没有定义;
c、可以在同一条var中声明多个变量;
e、若使用var重新声明已经存在的变量,是无效的;
f、若使用var重新声明已经存在的变量且赋值,则会覆盖掉前面的值;
g、js是一种动态类型、弱类型的语言,也就是说,变量的类型没有限制。
5、变量提升
Js引擎的工作方式,先解析代码,获取所有的被声明变量,然后再一行一行地运行,结果所有的变量的声明语句都会提升到代码的头部。
[if !supportLists]四、 [endif]数据类型
Js中有6种数据类型,其中有5种简单数据类型
1、Undefined: 表示未定义或者不存在,即此处目前没有任何值;
2、Null: 表示空缺,即此处应该有一个值,但目前为空;
3、布尔值(Boolean):true和false两个特定值;
4、字符串(string):字符组成的文本;
5、数值(Number):整数和小数;
6、对象(object)(引用):各种值组成的集合
1)、对象object,{name:”zhangsan”,age:”18”}
2)、数组,(array)[1,2,3]
3)、函数,(function)function test() {}
操作符typeof
Typeof操作符用来检测数据类型。
说明:1、typeof null 返回的是 object 字符串
2、函数不是数据类型,但是也可以使用 typeof 操作符返回字符串。
3、type操作符可以操作变量,也可以操作字面量;
4、函数在js中是对象,不是数据类型,所以使用typeof区分function和object是必要的;
Undefined
[if !supportLists]1、 [endif]undefined类型的值是undefined;
[if !supportLists]2、 [endif]undefined是一个表示“无”的原始值,表示值不存在;
[if !supportLists]3、 [endif]当声明了一个变量而没有初始化时,这个变量值就是undefined;
[if !supportLists]4、 [endif]当函数需要形参,但未传递实参时,值就是undefined;
[if !supportLists]5、 [endif]当函数没有返回值,但定义了变量接受时,值就是undefined。
Null
[if !supportLists]1、 [endif]null类型是只有一个值得数据类型,它表示空值,即该处的值为空;
[if !supportLists]2、 [endif]null表示一个空对象的引用;
[if !supportLists]3、 [endif]使用typeof操作符测试null,返回object字符串;
[if !supportLists]4、 [endif]Undefined派生自null,所有等值比较返回值是true,所有未初始化的变量,和赋值为null的变量相等。
数值型(整型和浮点型)
1、所有数字都是以64位浮点数形式储存的,所有js中1和1.0相等;
2、1加1.0得到的还是整数,浮点数最高精度是17位小数,由于浮点数运算不精确,所有尽量不适用;
3、对于过大和过小的数值,可以使用科学计数法来表示;
4、超过数据范围,出现Infinity(正无穷)或者-Infinity(负无穷)
5、isFinite()函数可以确定是否超出范围;(true没有超出,false超出了)
6、NaN表示非数值(Not a Number),是一个特殊的值;
注意:NaN不等于任何值,包括它本身,因为它不是一个值
NaN与任何数包括它自己的运算,得到的都是NaN
isNaN()可以用来判断一个值是否为NaN,true不是数字,false是数字;
对象
Instanceof运算符:typeof操作符对数组和对象的显示结果都是object,那么可以利用instanceof运算符来判断一个变量是否是某个对象的实例;
[if !supportLists]五、 [endif]类型转换
[if !supportLists]1、 [endif]自动类型转换
[if !supportLists]2、 [endif]函数转换
parseInt()在转换前分析该字符串,判断位置0处的字符串,判断它是否是个有效数字,如果不是,则直接返回 NaN,不再继续,如果是则继续,直到找到非字符。
parseInt()方法的基模式,可以把二进制,八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt()方法的第二个参数指定的。
如果十进制数包含前导 0,那么最好采用基数 10,这样才不会意外地得到八进制的值。
[if !supportLists]3、 [endif]显示转换
toString()函数将内容转换为字符串形式,可以将数字以指定的进制转换成字符串,默认为十进制。
Number 还提供了 toFixed()函数将根据小数点后指定位数将数字转为字符串,四舍五入。
[if !supportLists]4、 [endif]强制转换
JS 为 Number、Boolean、String 对象提供了构造方法,用于强制转换其他类型的数据。此时操作的是整个数据,而不是部分。
[if !supportLists]六、 [endif]数组
特点:数组长度可变,数组里面的类型可以不一样,不存在下标越界。
[if !supportLists]1、 [endif]数组的定义
1、隐式创建 var变量名 = [值1,值2,...];
2、直接实例化
var变量名 = new Array(值1,值2,...);
3、实例化并指定长度
var变量名 = new Array(size);
获取数组的长度数组.length
[if !supportLists]2、 [endif]数组的遍历
1、普通 for 循环遍历 for(var i = 0; i <数组名.length; i++) {
}
注:可以拿到undefinded的值,无法获取数组中属性对应的值
2、for ... in
for(vari in数组) {
//i是下标或属性名
}
注:无法拿到undefinded的值,可以获取数组中属性对应的值
3、foreach
数组.foreach(function(element,index){
//element:元素;index:下标
});
注:无法获取属性对应的值与undefinded的值
* for -- 不遍历属性
* foreach -- 不遍历属性和索引中的 undefined
* for in -- 不遍历索引中的 undefined
[if !supportLists]3、 [endif]数组提供的方法
push 添加元素到最后
unshift 添加元素到最前
pop 删除最后一项
shift 删除第一项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取(切片)数组,原数组不发生变化
splice 剪接数组,原数组变化,可以实现前后删除效果
concat 数组合并
[if !supportLists]七、 [endif]函数
函数即方法,函数也是对象。
[if !supportLists]1、 [endif]函数的定义方式
1)函数声明语句:function 函数名([形参]){ }
调用:函数名([实参]);
2)函数定义表达式:
Var变量名/函数名=function([形参]){ }
调用:变量名([实参])/函数名([实参]);
3)Function构造函数
var函数名 = new Function('参数1','参数2','函数的主体内容');
调用:函数名([实参]);
注:构造函数的最后一个参数是函数体。
[if !supportLists]2、 [endif]注意
js 中的函数没有重载,同名的函数,会被后面的函数覆盖。
js 中允许有不定数目的参数,后面介绍 arguments 对象。
[if !supportLists]3、 [endif]函数的参数、调用和return
1)参数: 函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数,定义时的参数称为形参,调用时的参数称为实参。
1、实参可以省略,那么对应形参为 undefined
2、若函数形参同名(一般不会这么干):在使用时以最后一个值为准。
3、可以给参数默认值:当参数为特殊值时,可以赋予默认值。
4、参数为值传递,传递副本;引用传递时传递地址,操作的是同一个对象
2)函数的调用
常用的调用方式:函数名([实参]);
存在返回值可以变量接收,若接收无返回值函数则为 undefined。
函数调用模式:var fn9 =
function() {
console.log(this);// Window对象
return1;
}
varf = fn9();
console.log(f);
方法调用模式:var obj = {
uname:"zhangsan",
uage:18,
cats:["喵喵","猫猫"],
sayHello:function(){
console.log(this);// obj对象
console.log("你好呀~");
}
};
console.log(obj.sayHello);
obj.sayHello();
间接调用:function fn10(x,y) {
console.log(x+y);
console.log(this);
}
fn10(1,2); // Window对象
fn10.call(); // Window对象
注意:apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。如func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])
3)return语句
函数的执行可能会有返回值,需要使用 return 语句将结果返回。return 语句不是必需的
如果没有的话,该函数就不返回任何值,或者说返回 undefined。
作用:在没有返回值的方法中,用来结束方法。
有返回值的方法中,一个是用来结束方法,一个是将值带给调用者。
[if !supportLists]八、 [endif]arguments对象和函数的方法及属性
arguments 对象可以得到函数的实参数量
函数名.name
函数名.length()得到函数的形参数量
函数名.toString()得到函数的源码
[if !supportLists]九、 [endif]函数的作用域
函数的作用域:全局(global
variable)和局部(local
variable)
1)全局变量与局部变量同名问题
2)在函数中定义变量时,若没有加 var 关键字,使用之后自动变为全局变量
3)变量作用域提升
十、闭包
闭包的形成:
1、外部函数内部嵌套内部函数
2、内部函数中使用外部函数的环境
3、外部函数返回内部函数
闭包的作用:
1、获取函数内部的变量
2、保存变量的值在内存中
3、避免变量名重复
十一、内置对象
Date:
//获取
◦ getFullYear()年, getMonth()月, getDate()日,
◦ getHours()时,getMinutes()分,getSeconds()秒
//设置
setYear(), setMonth(), …
toLoacaleString()
说明:
1.getMonth():得到的值:0~11(1 月~12 月)
2.setMonth():设置值时 0~11
3.toLocaleString():可根据本地时间把 Date 对象转换为字符串,并返回结果。
十二、JS对象
JS中一切数据皆是对象
[if !supportLists]1) [endif]定义对象
[if !supportLists]1、 [endif]字面量形式创建对象
Var 变量名={ }//空对象
Var 变量名={键:值,······}
[if !supportLists]2、 [endif]通过new Object对象创建
Var 变量名=new Object();
[if !supportLists]3、 [endif]通过Object对象的creat方法创建对象
Var变量名=Object.create(null或对象);
[if !supportLists]2) [endif]对象的序列化和反序列化
序列化即将 JS 对象序列化为字符串,反序列化即将字符串反序列化为 JS 对象。
调用 JSON 方法,可以将对象序列化成字符串,也可以将字符串反序列化成对象。
JSON.stringify(object) //序列化对象,将对象转为字符串。
JSON.parse(jsonStr)//反序列化,将json字符串转换为对象。
[if !supportLists]3) [endif]eval()
1、可借助 eval()动态函数,将参数字符串解析成 js 代码来执行,只接受原始字符串作为参数
eval(“console.log(‘你好’)”);//控制台输出你好
2、可将 json 串转为 json 对象
1)第一种解析方式:得到的 json 对象名就是 jsonObj
eval("varjsonObj = " + jsonStr);
2)第二种解析方式:对象中有多个属性
varjsonObj = eval("(" + jsonStr + ")");
由于 json 是以{ }的方式来开始以及结束的,在 eval中会被当成一个语句块来处理,故必须强制将它转换成一种表达式。加上圆括号是使 eval 函数在处理时强制将括号内的表达式转化为对象而不作为语句来执行。
3)第二种解析方式:对象中只有一个属性
eval(jsonStr);