Web06--JavaScript基础02

1、JS流程控制语句

JS与Java一样，也有三个流程控制语句：顺序结构选择结构循环结构

1.1 选择结构

1.1.1 if结构

<script type="text/javascript">if (条件表达式) {代码块;} else if(条件表达式){代码块;} else {代码块;}
</script>

注意事项：JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别。JS中对各种数据类型作为布尔值有以下特点：

类型	用法
boolean	true为真、false为假
number	非0为true
string	除了空字符串("")，其他都是true
null&undefined	都是false
对象	所有对象都为true

总结：无意义的数据都为false 反之都为true

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择结构--if</title></head><body></body><script>let age = 20;// if单分支if(age > 18){console.log("你已成年");}// if双分支if (age > 18) {console.log("你已成年");} else{console.log("你未成年");}// if多分支let score = Math.floor(Math.random()*100);console.log(score);if(score >= 90){console.log("成绩优秀");}else if(score >= 70){console.log("成绩良好");}else if(score >= 60){console.log("成绩及格");}else{console.log("成绩不及格");}</script>
</html>

1.1.2 switch结构

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>选择结构--switch</title></head><body><script>let month = 1;switch (month){case 1:case 2:case 3:console.log("春天");break;case 4:case 5:case 6:console.log("夏天");break;case 7:case 8:case 9:console.log("秋天");break;case 10:case 11:case 12:console.log("冬天");break;default:console.log("无此月份")break;}</script></body>
</html>

在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)

在JS中,switch语句可以接受任意的原始数据类型

1.2 循环结构

1.2.1 for循环

普通for循环
增强for循环 for-of循环
索引for循环 for-in循环

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>循环结构--for循环</title></head><body><script>// for循环console.log("===================普通for循环===================");for (var i = 0; i < 5; i++) {console.log(i);}var arr = ["张三","李四","王五"];// for-of循环console.log("===================for-of循环===================");for (let s of arr) {console.log(s);}// for-in循环console.log("===================for-in循环===================");for (let a in arr) {console.log(a + ":" + arr[a]);}</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>for-of与for-in循环</title></head><body><script>var person = {name:"张三",age:"20",sex:"男"}// for-in循环console.log("===================for-in循环===================");for (let key in person) {console.log(key + ":" + person[key]);}// for-of循环console.log("===================for-of循环===================");for (let s of person) {console.log(s);}</script></body>
</html>

1. for-in可以遍历对象,for-of不能遍历对象

2. for-in遍历出数组中的索引,for-of遍历出数组中的元素

1.2.2 while循环

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>while循环</title></head><body><script>var num = 10;while(num > 0){console.log(num);num--;}</script></body>
</html>

1.2.3 do-while循环

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>do-while循环</title></head><body><script>var num = 10;do{console.log(num);num--}while(num > 0)</script></body>
</html>

1.2.4 循环总结

while 和Java一样

do-while 和Java一样

重点掌握:

        普通for 与 Java一样

        for-in：遍历出数组的索引

                遍历出对象中的属性名key

        for-of：遍历数组中的元素

2、JS函数(方法)

JS函数是执行特定功能的代码块，也可以称为JS方法。与Java中的方法的功能是一样的。

2.1 语法

function 函数名(参数列表){函数体;[return 返回值;]
}

2.2 函数定义

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>函数的定义</title></head><body><script>// 无参无返回值function jiujiu(){for (var i = 1; i <= 9; i++) {for (var j = 1; j <= i; j++) {document.write(j + "*" + i + "=" + i*j);document.write("&emsp;")if(i * j < 10){document.write("&nbsp;&nbsp;")}}document.write("<br>");}}// 无参有返回值function jiecheng(){var mul = 1;var sum = 0;for (var i = 1; i <= 10; i++){mul *= i;sum += mul;}return sum;}// 有参无返回值function jiecheng1(a){var mul = 1;var sum = 0;for (var i = 1; i <= a; i++){mul *= i;sum += mul;}console.log(sum);}// 有参有返回值function getSum(a,b){return a + b;}// 函数调用jiujiu();console.log(jiecheng());jiecheng1(10);console.log(getSum(10,20));</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>函数的定义</title></head><body><script>var demo1 = new Function("a,b", "console.log(a+b)");demo1(4,4); /* 匿名函数: 了解 */var demo2  = function(){console.log(77);}demo2();// ES6写法// 无参有返回值var fun1 = () => "Hello";console.log(fun1())// 有参无返回值let fun2 = args =>{console.log(args);}fun2(1024);// 有参有返回值let fun3 = (arg1,arg2) => arg1+arg2// 等价于let fun4 = (arg1,arg2) => {return arg1+arg2}console.log(fun3(10,20))console.log(fun4(10,20))</script></body>
</html>

2.3 JS函数注意事项

方法定义时，形参的类型不用写,返回值类型可写可不写
如果定义名称相同的方法，会被覆盖，js中没有方法的重载的概念
在JS中，方法的调用只与方法的名称有关，和参数列表无关
在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
JS函数中也可以有匿名函数，匿名函数经常会跟事件进行结合着使用

3、JS常用内置对象

3.1 Number对象

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Number对象</title></head><body><script>// number对象属性var max = Number.MAX_VALUE;console.log(max);var min = Number.MIN_VALUE;console.log(min)// number对象方法// toString()  将数字作为字符串返回。var num = 10086;console.log(typeof(toString(num)));// valueOf()  以数字形式返回数字。var num = 12345;console.log(typeof(num.valueOf()));</script></body>
</html>

3.2 String对象

3.2.1 创建对象

有三种方式: 单引号('') 、双引号("") 、反引号(``)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>String对象</title></head><body><script>// 字符串对象创建//双引号字符串 let s1 = "双引号字符串"; //单引号 let s2 = '单引号字符串'; //反引号字符又叫做`字符串模板` ,模板中可以使用${}来进行插值.let s3 = `反引号字符串`;let n = 3547;	let s5 =`你的验证码是：${n}`;console.log(s5);//你的验证码是：3547// 字符串属性let str = "hello world";console.log(str.length)</script></body>
</html>

3.2.2 常用方法

方法	说明
substring()	提取字符串中两个指定的索引号之间的字符
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
replace()	替换与正则表达式匹配的子串。
charAt()	返回在指定位置的字符。
trim()	移除字符串首尾空白
split(delimiter)	把字符串分割为子字符串数组;分割为数组

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>String对象方法</title></head><body><script>let str = "Hello World";// length	是string对象属性console.log(str.length);// indexOf()  返回字符串中指定文本首次出现的索引（位置）// lastIndexOf()  返回指定文本在字符串中最后一次出现的索引// 如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。console.log(str.indexOf('o'));console.log(str.lastIndexOf('o'));console.log(str.indexOf('hello'));// 提取部分字符串// slice(start, end)  提取字符串的某个部分并在新字符串中返回被提取的部分// 如果省略第二个参数，则该方法将裁剪字符串的剩余部分：// 如果参数为负，则从字符串的结尾开始计数。// substring(start, end)  类似于 slice()。// 不同之处在于 substring() 无法接受负的索引。// substr(start, length)  substr() 类似于 slice()。// 不同之处在于第二个参数规定被提取部分的长度。console.log(str.slice(0,5));console.log(str.slice(6));console.log(str.slice(-1));console.log(str.substring(0,5));console.log(str.substring(6));console.log(str.substr(0,5));console.log(str.substr(1,10));// 替换字符串内容// replace()  用另一个值替换在字符串中指定的值：它返回的是新字符串// replace() 只替换首个匹配,replace() 对大小写敏感。let s = str.replace("Hello","hello");console.log(s);// toUpperCase()  把字符串转换为大写console.log(str.toUpperCase());// toLowerCase()  把字符串转换为小写console.log(str.toLowerCase());let str1 = "JavaScript";// concat()  连接两个或多个字符串：console.log(str.concat(str1));let str2 = "   1254   152   ";// trim()  方法删除字符串两端的空白符：console.log(str2.trim());// charAt()  返回字符串中指定下标（位置）的字符串：console.log(str.charAt(0));// split()  将字符串转换为数组：console.log(str.split(" "));</script></body>
</html>

3.3 Math对象

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Math对象</title></head><body><script>// Math对象属性console.log(Math.PI);console.log(Math.E);// Math对象方法// 取绝对值console.log(Math.abs(-12));// 向上取整console.log(Math.ceil(12.1));// 向下取整console.log(Math.floor(12.9));// 取最大值console.log(Math.max(10,20,30,40,50,100));// 取最小值console.log(Math.min(10,20,30,40,50,100));// x的y次幂console.log(Math.pow(2,3));// 取0-1的随机数console.log(Math.random());// 四舍五入console.log(Math.round(12.5));console.log(Math.round(12.4));</script></body>
</html>

3.4 Array对象

1. JS中，数组元素的类型可变的。

2. JS中，数组长度可变的。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>数组对象Array</title></head><body><script>// 创建数组对象let arr1 = new Array();let arr2 = new Array(3);let arr3 = ["张三","李四","王五"];// 数组的属性console.log(arr3.length);// 数组的方法// toString()  把数组转成字符串console.log(arr3.toString())// pop()  删除数组最后一个元素，并返回该元素// push()  在数组后追加一个元素，并返回数组长度console.log(arr3.pop());console.log(arr3)console.log(arr3.push("111"));console.log(arr3)// shift()  删除首个数组元素，并返回该元素console.log(arr3.shift());console.log(arr3)// splice(startIndex,len) 从startIndex开始删，删除len个元素 arr3.splice(0,2); console.log(arr3);// concat()  合并数组let arr4 = ["张三","李四","王五"];let arr5 = [11,88,33,44,55];let arr6 = arr4.concat(arr5);console.log(arr6);// 数组排序let arr7 = ["abc","cdf","frv","adf"];console.log(arr7.sort());console.log(arr5.sort(function(a,b){return a-b}));// 数组遍历for (var i = 0; i < arr6.length; i++) {document.write(arr6[i]);document.write(",");}document.write("<br/>");for (let s of arr6) {document.write(s);document.write(",");}document.write("<br/>");for (let a in arr6) {document.write(arr6[a]);document.write(",");}document.write("<br/>");</script></body>
</html>

3.5 Date对象

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Date对象</title></head><body><script>// 创建日期对象let date = new Date();console.log(date);// 获取年console.log(date.getFullYear());// 获取月console.log(date.getMonth() + 1);// 获取日console.log(date.getDate());// 获取星期console.log(date.getDay());// 获取时console.log(date.getHours());// 获取分console.log(date.getMinutes());// 获取秒console.log(date.getSeconds());// 获取当前的日期字符串console.log(date.toLocaleDateString());// 获取当前的时间字符串console.log(date.toLocaleTimeString());// 获取当前的日期时间字符串console.log(date.toLocaleString());</script></body>
</html>

案例：数字时钟

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>数字时钟</title></head><body><p id="p1"></p><div id="div1"></div><script>setInterval(function(){let date = new Date();document.getElementById("p1").innerHTML = date.toLocaleString();},1000);</script><script>setInterval(() =>{let date1 = new Date();document.getElementById("div1").innerHTML = date1.toLocaleString();},1000);</script></body>
</html>

3.6 RegExp对象

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>正则对象--RegExp</title></head><body><script>// 创建正则表达式对象// 方式一:let reg1 = new RegExp("^[a-zA-Z]{6,9}$");// 正则匹配测试console.log(reg1.test("hellojava")); // true// 方式二:let reg2 = /^[a-zA-Z]{6,9}$/;console.log(reg2.test("helloworld")); // false/*** 正则表达式详解* [] :指定一个字符位置上出现的字符的范围 [abc] 该字符位置出现 a 或 b 或 c* () :指定一个单词整体  *		(abc|bcd|ddd) 这是该位置出现abc 或 bcd 或 ddd 字符串整体,非单个字符* * 元字符* 	. : 匹配换行和结束符的任意一个字符* \w : 表示匹配任意一个字母、数字或下划线  [_a-zA-Z0-9]* \d : 任意一个数字* ^  : 开始* $  : 结束* * 量词* + : 最少出现一次   等同{1,}* * : 0个以上            {0,}* ? : 0个或者1个         {0,1}* * {n}   : 出现n次* {n,}  : 最少出现n次* {n,m} : 最少出现n次,最多出现m次**//*** /^[a-z]{6,9}$/i  表示忽略大小写* /^[a-z]{6,9}$/g  执行全局匹配，而不是在第一个匹配后停止**///字母开头的,其它为任意字符,长度6~8的字符串let reg3 = /^[a-zA-Z].{5,7}$/;			console.log(reg3.test("q1wq#%"));// \w的使用reg3 = /^[\w]{2,3}$/;console.log(reg3.test("_1_"));//检测字符串是否符合当前的正则规则let reg4 = /^[a-zA-Z][\w]+$/;console.log(reg4.test("a112qwe312"));</script></body>
</html>