六、JavaScript的循环与异常
try{
//这段代码从上往下运行，其中任何一个语句可抛出异常改代码块就结束运行
}
catch (e){
//如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向error对象或者其他抛出的对象
}
finally{
//无论try代码是否有异常抛出（甚至是try代码块中有return语句，finally代码块中始终会被执行）
}
注意：主动抛出异常throw error（‘xxx’）
七、JavaScript的字符串对象
7.1对象简介
<script type="text/javascript">
var aa=Number.MAX_VALUE;
//利用数字对象获取可表示最大数
var bb=new String("hello javascript");
//创建数字对象
var cc=new Data();
//创建日期对象
var dd=new Array("星期一","星期二","星期三")；
//数组对象
</script>
7.2string对象
7.2.1字符串对象的创建方式
1、自动创建字符串对象：
var str1="hello world";
alert(str1.length);
alert(str1.substr(1,5));
调用字符串的对象属性或方法是自动创建对象，用完就丢弃
2、手工创建字符串对象
var str1=new String("hello world");
alert(str1.length);
alert(str1.substr(1,3));
采用new创建字符串对象str1，全局有效
7.2.2String对象的属性
1、获取字符串长度
length： str1.length
7.2.3String对象的方法
1、格式编排方法
格式编排方法返回值列表
console.log(str1.italics());
//<i>hello world<i>
console.log(str1.bold());
返回粗体表示字符串//<b>hello world</b>
console.log(str1.sup());
返回上标格式字符串//<sup>hello world</sup>
console.log(str1.anchor());
返回锚定义字符串//<a name="undefined">hello world</a>
2、大小写转换
var str2=str1.toLowerCase();//转换成全小写
var str3=str1.toUpperCase();//转换成全大写
alert(str2);//结果hello world
alert(str3);//结果HELLOW WORLD
3、获取指定字符
书写格式：
str1.charAt(index)
str1.charCodeAt(index)
解释：
str1：代表字符串对象
index：代表字符位置，从0开始编号
charAt：返回index位置的字符
charCodeAt：返回index位置的Unicode编码
eg：
var str1="welcome to the world of Js! 智强";
var str2=str1.charAt(28);
var str3=str1.charCodeAt(28);
alert(str2);//智
alert(str3);//结果26234
4、查询字符串索引
书写格式：
str1.indexOf(findstr,index)
str1.lastIndexOf(findstr)
eg:
var str1="welcome to the world of Js!";
var str2=str1.indexOf("l");//获取第一个l的下标
var str3=str1.lastIndexOf("l");//获取最后一个l的下标
alert(str2);//结果为2
alert(str3);//结果为18
书写格式：
str1.match(regexp)
sstr1.search(regexp)
解释：
x:代表字符串对象
regexp：代表正则表达式或字符串
match：返回匹配字符串的数组，如果没有匹配则返回null
search：返回匹配字符串的首字符位置索引
eg：
var str1="welcome to the world of Js!";
var str2=str1.match("world");//如果有则返回world，没有返回null
var str3=str1.search("world");
alert(str2);//结果为2
alert(str3);//15
5、子字符串的处理（常用）
（1）、截取字符串
书写格式：
x.substr(start,length)
x.substring(start,end)
解释：
x：代表字符串对象
start：表示开始位置
length：表示截取长度
end：表示结束位置，取不到结束的位置
第一个字符位置为0
eg：
str1="hello";
alert(str1.substr(1,3));//结果ell
alert(str1.substring(1,3));//结果el，取不到3
书写格式：(常用)
x.slice()//相当于python中列表的切片
eg：
var str1="abcdefgh";
var str2=str1.slice(2,4);
var str3=str1.slice(4);
var str4=str1.slice(2,-1);
var str5=str1.slice(-3,-1);
alert(str2);//结果为cd
alert(str3);//结果为efgh
alert(str4);//结果为cdefg
alert(str5);//结果为fg
（2）、替换子字符串
书写格式：
x.replace(findstr,tostr)
eg:
var str1="abcdefgh";
var str2=str1.replace("cd","wzq");
alert(str2);//结果abwzqefgh
（3）、分割字符串
split()
eg:
var str1="w,z,q,x,j,y";
var strArray=str1.split(",");
alert(strArray[1]);//结果z
（4）、连接字符串
y=x.concat(addstr)
解释：
x:代表字符串对象
addstr：为添加字符串
返回x+addstr字符串
eg：
var str1="abcd";
var str2=str1.concat("efgh");
alert(str2);//结果abcdefg
八、JavaScript的数组对象
8.1、数组的创建
8.2、数组对象的属性和方法
**属性：**获取数组元素的个数：length eg：arr.length
方法：
1、连接数组-join方法
书写格式：
x.join(bystr)
解释：
x：代表数组对象
bystr：作为连接数组中元素的字符串
返回连接后的字符串，与字符串的split功能刚好相反
eg：
var arr1=[1,2,3];
alert(arr1.join("*"))//结果1*2*3（字符串）
2、连接数组-concat方法
书写格式：
x.concat(value,...)
eg:
var a=[1,2,3];
var a=new Array(1,2,3);
var b=a.concat(4,5);
alert(a.toString());//返回结果1，2，3
alert(b.toString());//返回结果1，2，3，4，5
注意：toString方法所有对象都有，返回字符串
3、数组排序-reverse sort
reverse:反转数组 sort：排序数组（按最高位排序）
var arr=[7,1,9,6,8,3,4,2];
alert(arr.reverse());//结果2,4,3,8,6,9,1,7（反转）
alert(arr.sort());//结果1,2,3,4,6,7,8,9（排序）
var arr=[10,26,100,89];
alert(arr.sort());//结果10,100,26,89
//如果要按大小排序，则要自定义一个函数
var arr=[10,26,100,89];
function f(a,b){
if (a>b) {
return 1
}else if (a<b) {
return -1
}else{
return 0
}
}
alert(arr.sort(f));//结果10,26,89,100
上面的f函数可以简写成：
function f2(a,b){
return a-b
}
注意：f和f1必须记住
4、数组切片-slice
和字符串中的截取字符串的slice一样
5、删除子数组
书写格式：
x.splice(start,deleteCount,value,...)
解释：
x：代表数组对象
splice：主要用途是对数组指定位置进行删除和插入
start：表示开始位置索引
deleteCount：删除数组元素个数
value：表示在删除位置插入的数组元素，此参数可以省略
eg：
var a =[1,2,3,4,5,6,7,8];
a.splice(1,2);
alert(a.toString());//结果为1,4,5,6,7,8
a.splice(1,1);
alert(a.toString());//结果为1,5,6,7,8
a.splice(1,0,2,3);
alert(a.toString());//结果为1,2,3,5,6,7,8
6、数组的进出栈操作（重要）
push pop这两个方法模拟的是一个栈操作
x.push(value,...) 压(进)栈
x.pop() 弹(出)栈
解释：
x：代表数组对象
value：可以为字符串、数字、数组等任何值
push:将value值添加到数组x的结尾
pop：将数组x的最后一个元素删除
eg：
var arr=[1,2,3];
arr.push(4,5);
alert(arr);//结果为1,2,3,4,5
arr.pop();
alert(arr);//结果为1,2,3,4
arr.push([8,9]);
alert(arr);//结果为1，2，3，4，8，9
//注意 ：是将[8,9]当作一个整体压入的，它的长度是5，不是6
unshift shift操作和push pop是一样的，只不过位置不同
eg：
var arr=[1,2,3];
arr.unshift([4,5]);
alert(arr);//结果4，5，1，2，3也是将[4，5]当作一个整体插入
arr.unshift(true,"wzq");
alert(arr);//结果true,"wzq",4，5，1，2，3
arr.shift();
alert(arr);//结果"wzq",4，5，1，2，3
7、总结js的数组特性
九、data对象
9.1创建data对象
//方法1：不指定参数
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：参数为日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3：参数为毫秒数
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));
//毫秒并不直接显示
9.2data对象的方法—获取日期和时间
获取日期和时间
getDate() 获取日
getDay () 获取星期
getMonth () 获取月（0-11）
getFullYear () 获取完整年份
getYear () 获取年
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
练习实例
function getCurrentDate(){
//1. 创建Date对象
var date = new Date(); //没有填入任何参数那么就是当前时间
//2. 获得当前年份
var year = date.getFullYear();
//3. 获得当前月份 js中月份是从0到11.
var month = date.getMonth()+1;
//4. 获得当前日
var day = date.getDate();
//5. 获得当前小时
var hour = date.getHours();
//6. 获得当前分钟
var min = date.getMinutes();
//7. 获得当前秒
var sec = date.getSeconds();
//8. 获得当前星期
var week = date.getDay(); //没有getWeek
// 2014年06月18日 15:40:30 星期三
return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);
}
alert(getCurrentDate());
//解决 自动补齐成两位数字的方法
function changeNum(num){
if(num < 10){
return "0"+num;
}else{
return num;
}
}
//将数字 0~6 转换成 星期日到星期六
function parseWeek(week){
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
// 0 1 2 3 .............
return arr[week];
}
9.3、data对象的方法—设置日期和时间
//设置日期和时间
//setDate(day_of_month) 设置日
//setMonth (month) 设置月
//setFullYear (year) 设置年
//setHours (hour) 设置小时
//setMinutes (minute) 设置分钟
//setSeconds (second) 设置秒
//setMillliseconds (ms) 设置毫秒(0-999)
//setTime (allms) 设置累计毫秒(从1970/1/1午夜)
var x=new Date();
x.setFullYear (1997); //设置年1997
x.setMonth(7); //设置月7
x.setDate(1); //设置日1
x.setHours(5); //设置小时5
x.setMinutes(12); //设置分钟12
x.setSeconds(54); //设置秒54
x.setMilliseconds(230); //设置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5点12分54秒
x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12点23分50秒
9.4、data对象的方法—日期和时间的转换
日期和时间的转换:
getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差，以分钟为单位
toUTCString()
返回国际标准时间字符串
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)
返回累计毫秒数(从1970/1/1午夜到国际时间)
十、regExp对象
//RegExp对象
// 在表单验证时使用该对象验证用户填入的字符串是否符合规则.
//创建正则对象方式1 参数1 正则表达式 参数2 验证模式 g global / i 忽略大小写. //参数2一般填写g就可以，也有“gi”.
// 用户名 首字母必须是英文, 除了第一位其他只能是英文数字和_ . 长度最短不能少于6位 最长不能超过12位
//----------------------------创建方式1
/* var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g");
//
//验证字符串
var str = "bc123";
alert(reg1.test(str));// true
//----------------------------创建方式2 /填写正则表达式/匹配模式;
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
alert(reg2.test(str));// true
*/
//-------------------------------正则对象的方法-------------------
//test方法 ==> 测试一个字符串是否复合 正则规则. 返回值是true 和false.
//-------------------------String 中与正则结合的4个方法------------------.
// macth search split replace
var str = "hello world";
//alert(str.match(/o/g)); //查找字符串中 复合正则的 内容.
//alert(str.search(/h/g));// 0 查找字符串中符合正则表达式的内容位置
//alert(str.split(/o/g)); // 按照正则表达式对字符串进行切割. 返回数组;
alert(str.replace(/o/g, "s")); // hells wsrld 对字符串按照正则进行替换.
十一、Math对象
//Math对象
//该对象中的属性方法 和数学有关.
//Math是内置对象 , 与Global的不同之处是, 在调用时 需要打出 "Math."前缀.
//属性学习:
//alert(Math.PI);
//方法学习:
//alert(Math.random()); // 获得随机数 0~1 不包括1.
//alert(Math.round(1.5)); // 四舍五入
//练习：获取1-100的随机整数，包括1和100
//var num=Math.random();
//num=num*10;
//num=Math.round(num);
// alert(num)
//============max min=========================
/* alert(Math.max(1,2));// 2
alert(Math.min(1,2));// 1 */
//-------------pow--------------------------------
alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方.
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x)对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
十二、JavaScript的函数对象
12.1函数的创建方式
12.1.1方式一（常用）
书写格式：
funcion 函数名 （参数）{
函数体
return 返回值
}
调用函数
eg：
function f(x,y){
alert("wzq");
return x+y;
}
alert(f(12,21));
12.1.2方式二（基本不用）
书写格式：
var 函数名 = new Function（"参数1","参数n","function_body"）
eg：
var obj=new Function("name","alert('hello'+name)");
obj("wzq");
注意：js的函数加载执行与python不同，他是整体加载完才会执行，所以执行函数放在函数声明上面或者下面都可以。
12.2function对象的length属性
length属性声明了函数期望的参数个数。
alert（f1.length）//有几个参数，length就是几
12.3function对象的方法
function对象也有与所有对象共享的valueOf（）和toString（）方法。这两个方法返回的都是函数的源代码，在调试时尤其有用
12.4函数的内置对象arguments
arguments，无论传多少个参数，他都会接收，并且是以一个数组接收
//arguments 一个任意数的和
function add(){
var sum=0;
for (var i = 0; i<arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
alert(add(1,2,3,4));
一个小面试题（报错）
不能运行：
function f(x,y){
return x+y;
}
var f=1;
var b=2;
f(f,b);
12.5匿名函数
匿名函数的调用不能放在函数体的上面，因为匿名函数不会加载
//写法一
var func=function(name){
alert(name);
}
func("wzq");//不能放在函数体上面，因为匿名函数不加载
//写法二
(function (name){
alert(name);
})("xjy");
十三、js的函数作用域链和闭包
作用域
js的作用域和python相似，if while等控制语句并没有自己的作用域；而函数是有自己的作用域的。
if (1==1) {
var s=12;
}
alert(s);//12
//***********************//
function f(){
var temp=666;
}
f();
alert(temp);//uncaught referenceError:temp is not defined
1、嵌套函数的作用域
eg1：
var city="weinan";
function func(){
var city="shanghai";
function inner (){
var city="beijing";
alert(city);//结果beijing
}
inner();
}
func();
eg2：
var city="beijing";
function Bar (){
alert(city);//结果beiijing
}
function func (){
var city="shanghai";
return Bar;
}
var ret=func();
ret();//相当于Bar（）
2、闭包
var city="beijing";
function func (){
var city="shanghai";
function inner(){
//var city="weinan";
alert(city);//如果上面注释：sanghai，不注释：weinan
}
return inner;
}
var ret = func();
ret();
作用域链：
在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其他对象一样拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是scope，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了那些数据能够被函数访问。
var x=1;
function foo (){
var y=2;
function bar(){
var z=3;
}
}
#bar的作用域链：barScopeChain=[bar.AO,foo.AO,global.Vo];
#foo的作用域链：fooScopeChain=[foo.AO,gloab.VO];
什么是AO,VO?
在函数创建时，每个函数都会创建一个活动对象Active Object(AO)，全局对象为Global Object(VO)，创建函数的过程也就是为这个对象添加属性的过程，作用域链就是由这些绑定了属性的活动对象构成的。
例如：找x变量；bar函数在搜寻变量x的过程中，先从自身AO对象上找，如果bar.AO存在这个属性，那么会直接使用这个属性的值，如果不存在，则会转到父级函数的AO对象，也就是foo.AO
如果找到x属性则使用，找不到继续 在global.VO对象查找，找到x的属性，返回属性值。如果在global.VO中没有找到，则会抛出异常ReferenceError
执行上下文。
函数在执行时会创建一个称为“执行上下文（execution context）”的内部对象，执行上下文定义了函数
执行时的环境。每个执行上下文都有自己的作用域链，用于标识符解析，当执行上下文被创建时，而它的作用
域链初始化为当前运行函数的[[Scope]]所包含的对象。
函数执行
在函数执行过程中，每遇到一个变量，都会检索从哪里获取和存储数据，该过程从作用域链头部，也就是从活
动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没有则继续搜索作用域
链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义，函数执行过程中，每个标识符都
要经历这样的搜索过程。
1、创建作用域链的过程
函数进入全局，创建VO对象，绑定x属性<入栈>
global.VO={x=underfind; foo:reference of function}(这里只是预解析，为AO对象绑定声明的属性，函数执行时才会执行赋值语句，所以值是underfind)
遇到foo函数，创建foo.AO，绑定y属性<入栈>
foo.AO={y=underfind, bar:reference of function}
遇到bar函数，创建bar.AO，绑定z属性<入栈>
bar.AO={z:underfind}
作用域链和执行上下文都会保存在堆栈中，所以：
bar函数的scope chain为：[0]bar.AO-->[1]foo.AO-->[2]global.VO
foo函数的scope chain为：[0]foo.AO-->[1]global.Vo
//建议：少定义全局变量
//理由：因为作用域链是栈的结构，全局变量在栈底，每次访问全局变量都会遍历一次栈，//这样会影响效率
函数的scope等于自身的AO对象加上父级的scope，也可以理解为一个函数的作用域等于自身活动对象加上父级作用域.
函数执行前后的作用域链：
注意：作用域链的非自己部分在函数对象被建立（函数声明、函数表达式）的时候建立，而不需要等到执行
思考题2:
for (var i=1; i<=9; i++) {
setTimeout( function timer(){
console.log( i );
},1000 );
}
//＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
for (var i=1; i<=9; i++) {
(function(){
var j = i;
setTimeout( function timer(){
console.log( j );
}, 1000 );
})();
十四、js的window对象之定时器
1、window对象
所有浏览器都支持window对象。
概念上讲：一个html文档对应一个window对象。
功能上讲：控制浏览器窗口的。
使用上讲：window对象不需要创建对象，直接使用即可。
2、window对象方法
//1、alert
alert("wzq");
//2、confirm
var ret=window.confirm("hello wzq");//又取消，让用户有一个选择，即有返回值
console.log(ret);
//3、prompt
var ret=window.prompt("wzq");
console.log(ret);
//4、open close
open("http://www.baidu.com");
close("http://www.baidu.com")
//5\setInterval(函数名，时间)
setInterval(f1,1000);//每过1000毫秒执行一次f1函数
<!DOCTYPE html>
<html>
<head>
<title>举例</title>
<style type="text/css">
#a{
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<input type="text" id="a" onclick="begin()">
<button onclick="end()">停止</button>
</body>
<script type="text/javascript">
function showtime(){
var current_time=new Date().toLocaleString();//获取当前时间并且以字符串打印
var ele=document.getElementById("a");
ele.value=current_time
}
var wzq;
function begin(){
if (wzq==undefined){
showtime();
wzq=setInterval(showtime,1000);
}
}
function end(){
clearInterval(wzq)
wzq=undefined;
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>juli</title>
</head>
<body>
<div onclick="f()"></div>
</body>
<script type="text/javascript">
function f(){
alert("wzq")
}
var c=setTimeout(f,2000);
clearTimeout(c)
</script>
</html>
3、交互方法
方法讲解:
//----------alert confirm prompt----------------------------
//alert('aaa');
/* var result = confirm("您确定要删除吗?");
alert(result); */
//prompt 参数1 : 提示信息. 参数2:输入框的默认值. 返回值是用户输入的内容.
// var result = prompt("请输入一个数字!","haha");
// alert(result);
方法讲解:
//open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.
//调用方式1
//open("http://www.baidu.com");
//参数1 什么都不填 就是打开一个新窗口. 参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.
open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口
//close方法 将当前文档窗口关闭.
//close();
4、练习
var num = Math.round(Math.random()*100);
function acceptInput(){
//2.让用户输入(prompt) 并接受 用户输入结果
var userNum = prompt("请输入一个0~100之间的数字!","0");
//3.将用户输入的值与 随机数进行比较
if(isNaN(+userNum)){
//用户输入的无效(重复2,3步骤)
alert("请输入有效数字!");
acceptInput();
}
else if(userNum > num){
//大了==> 提示用户大了,让用户重新输入(重复2,3步骤)
alert("您输入的大了!");
acceptInput();
}else if(userNum < num){
//小了==> 提示用户小了,让用户重新输入(重复2,3步骤)
alert("您输入的小了!");
acceptInput();
}else{
//答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).
var result = confirm("恭喜您!答对了,是否继续游戏?");
if(result){
//是 ==> 重复123步骤.
num = Math.round(Math.random()*100);
acceptInput();
}else{
//否==> 关闭窗口(close方法).
close();
}
}
5、setInterval clearInterval
<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var clock;
function begin(){
if (clock==undefined){
showTime();
clock=setInterval(showTime,1000);
}
}
function end(){
clearInterval(clock);
}
</script>
6、setTimeout clearTimeout
var ID = setTimeout(abc,2000); // 只调用一次对应函数.
clearTimeout(ID);
function abc(){
alert('aaa');
}
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
