初识Javascript（二）
1、算术运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* 算术运算符（基础数字运算） + - * / %(求余数） 当不是数字之间的运算的时候 + 号两边一旦有字符串（引号引起来的部分），那么+号就不再是数学运算了,而是拼接，最终结果是字符串 - / * % 尽量将字符串转换成数字（隐式类型转换） NaN : Not a Number */ var a = "5"; var b = 2; var c = "aa"; console.log(a+b);//结果是52 console.log(a-b);//结果是3 console.log(a+c);//结果是5aa console.log(a-c);//结果是NaN </script> </body> </html>
2、赋值运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* 赋值运算符 += -= *= /= %=(取余等于) ++ -- 两个都存在隐式类型转换，会全部转换为数字 ++x x++ */ // var a = 5; // a = a + 4; // console.log(a); var x = 4; var y = x++; // 先 y = x 再 x = x+1 console.log(x); console.log(y); var x = 4; var y = ++x; // 先 x = x+1 再 y = x console.log(x); console.log(y); var a = 10; var b = 6; console.log(a%=b); </script> </body> </html>
3、逻辑运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* 针对布尔值 true false && 与 两边都为真，结果才为真，其他为假 || 或 两边都为假，结果才为假，其他都是真 ! 非 取反，真变假，假变真 当逻辑运算符，两边不一定是布尔值的时候 && 遇到假就停，但是不会进行类型转换,没有假时取最后一个 || 遇到真就停，但是不会进行类型转换，没有真时取最后一个 ！ 隐式类型转换，将后面的数据先转换为布尔值再取反 */ // var a = false && false; // alert(a); // var a = false || true; // alert(a); // var a = !false; // alert(a); // var a = true && 0 && 5 && 8; // var a = 0 || false || 0; // var a = !"5"; var a = true && 8 && !NaN && true; alert(a); </script> </body> </html>
4、for循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> for(var i = 0 ; i < 9; i ++){ console.log(i); } for(var i = 0 ; i < 9 ; i ++){ for(var j = 0; j < 4; j ++){ console.log(i+";"+j);//i;j } } //外层每循环一次内层全部循环 for(var i = 2; i < 8 ; i ++){ if(i == 5){ //break;//2 3 4 中断循环，终止循环，结束循环，未执行的代码不执行 continue;//2 3 4 6 7跳出本次循环 } console.log(i); } </script> </body> </html>
5、if判断
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* if ==> 布尔值 判断符 > < >= <= == != !== === == 只判断值是否一样 "5"==5 === 不仅仅判断值，还判断类型是否一样 "5" === 5 当if的条件 运算完后不是布尔值的时候 会被强制性的转换为布尔值 哪些值，在转换为布尔值的时候为false 0 number false boolean "" string null object/null undefined undefined NaN number NaN :Not a Number number类型 一般在非法运算的时候才会 出现NaN isNaN(参数) 非常讨厌数字 首先尽量把参数转换成数字， 当参数是 数字，返回 false 当参数不是数字，返回 true 在if里面，能用布尔值做条件判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间 在两个值比较的时候，能用三等判断的时候，就用三等判断 */ // if(" "){ // alert("真");//条件为真的时候执行 // }else{ // alert("假");//条件为假的时候执行 // } //当真语句只有一行的时候，可以去掉大括号，还可以直接写在条件的后面 if(9>8){ alert("真"); } if(9>8) alert("真"); // 真语句一行，假语句一行 三目运算 9<8?alert("true"):alert("false");//条件?真语句:假语句; // 当三目的真假语句都是给同一个变量赋值的时候，可以更近一步简写 // 5>3?a=5:a=3; a=5<3?5:3; alert(a); var x = 10; if(x>20){ alert(">20"); }else if(x>15){ alert(">15"); }else if(x>=10){ alert(">=10") }else{ alert("<10"); } </script> </body> </html>
6、switch选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> // var name = "Anni"; // if(name === "Lucy"){ // alert(name + "好漂亮"); // }else if(name === "Peter"){ // alert(name + "好帅"); // }else if(name === "Jone"){ // alert(name + "好阔爱"); // }else{ // alert(name + "你是谁"); // } //上述例子可以有以下写法 //break 来阻止代码自动地向下一个 case 运行 var name = "Anni"; switch(name){//你要判断的变量 case "Lucy": alert(name + "好漂亮"); break; case "Peter": alert(name + "好帅"); break; case "Jone": alert(name + "好阔爱"); break; default: //默认 alert(name + "你是谁"); break; } </script> </body> </html>
7、while 与 do while
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> var i = 0; for(;i<5;){ console.log(i); i++; } //while的结构与上述的for循环结构类似 var i = 5; while(i< 10){ console.log(i); i++; } //do while 先执行一次再进入循环 var i = 100; do{ //至少执行一次 console.log(i); }while(i < 9); </script> </body> </html>
8、字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* string 字符串 索引、下标、偏移量——从0开始 str[index];——通过索引取字符串 str.length;——获取长度 空格也算 value.toString();——转换字符串 str.substring();——截取字符串 会比较参数值的大小，小的参数在前面,负数变为0 str.slice()——切片,不会交换位置，负数从右到左数 str.split()——字符串切割，返回数组 ****** str.indexOf——查找字符串，成功返回索引，反之返回-1 ****** str.toUpperCase()——全部转换大写 str.toLowerCase()——全部到小写 */ // var str = "wo shi shui"; // alert(str.length); //11 // alert(str[5]);//可读 // str[0] = "W"; // console.log(str);//只能读不能修改 // var str = "woshishuiwozaina"; // console.log(str.substring(2,5));//结果是：shi // console.log(str.substring(-3,5));//结果是：woshi // console.log(str.substring(8,3));//结果是：hishu // console.log(str.slice(2,5));//结果是：shi // console.log(str.slice(-5,-2));//结果是：zai var str = "woshishuiwozaina"; // console.log(str.split("i")); // alert(str.indexOf("b")); //结果是：-1 // alert(str.indexOf("h")); //结果是：3 alert(str.indexOf("h",4)); //结果是：6 </script> </body> </html>
9、数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* 数组 主要用来存放数据 arr.length 查看数组内元素的个数 arr[] 可以读可写 arr.push 在后面添加 能同时添加多个值 arr.unshift() 在前面添加 能同时添加多个值 arr.pop() 删除数组的最后一个 arr.shift() 删除数组的第一个 arr.splice() ****** 一个参数 (3) 表示数组的长度 (0, 1) 从第0位开始删除第一个 返回删除的那个 (2, 3, 'a') 从第二位开始后面三位全部替换成 a (2, 0, 'a') 第二位开始前面插入 a arr.sort() 顺序来排序 arr.reverse() 倒序排序 arr.join() ***** arr.join('a') 以`a`为界限拼接字符串 */ // var arr = ["aaa","bbb","ccc"]; // console.log(arr.length); // console.log(arr[1]); // arr[1] = "ddd"; // console.log(arr);//可写 // var arr = new Array(); // arr[0] = "aaa"; // arr[1] = "bbb"; // arr[2] = "ccc"; // console.log(arr); var arr = ["aaa","bbb","ccc"]; console.log(arr); arr.push("bbb","ccc");//往数组后面 追加 console.log(arr); arr.unshift("aaa","bbb");//往数组前面 追加 console.log(arr); arr.pop();//删除数组最后一位 console.log(arr); arr.shift();//删除数组的第0位 console.log(arr); arr.splice(3);//数组的长度为3 console.log(arr); arr.splice(1,2);//从小标1开始 删除两位 console.log(arr); arr.splice(1,2,"hh"); console.log(arr); arr.splice(1,0,"qq","ww"); console.log(arr); var arr1 = [1,-5,6,-8]; // console.log(arr1.sort());根据ASCII码排序 arr1.sort(function (a,b) { // return a - b;//从小到大 // return b-a;//从大到小 return 3;//（随便一个正数）倒序 // return 0;//顺序 }); console.log(arr1); var arr2 = ["我","是","谁"]; var str = arr2.join(""); console.log(str); console.log(typeof str); </script> </body> </html>
10、数字方法和数学方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* number数字 在js里面的小数和整数统一都是数字，-2^53-2^53，超出范围之后精度就会不准确 number方法 Number()——参数中必须能被转换成数字，否则返回NaN: parseInt(解析的参数)——将参数转换为数字，整数部分遇到不是数字就停 parseFloat()——将参数转换为数字，不是数字就停，否则直到小数部分遇到不是数字就停 Num.toFixed(n)——四舍五入保留n位小数 NaN（Not a Number） NaN 不等于自己 */ // var a = "55"; // console.log(Number(a)); // console.log(typeof Number(a)); var a = "5q5.69a99"; console.log(parseInt(a)); console.log(parseFloat(a)); var c = 56.89; console.log(c.toFixed());//结果是：57 console.log(c.toFixed(1));//结果是：56.9 /* Math 数学函数 Math.pow(16, 2)——十六的平方 256 Math.round(5.5)——四舍五入（整数） Math.ceil(0.2)——向上取整 Math.floor(0.9)——向下取整 Math.max()——取参数中最大的值 Math.min()——取参数中最小的值 Math.random()——0-1的随机数[0,1) Math.random()*m+n 生成 n ~ (m+n) Math.PI——π Math.abs()——求绝对值 */ console.log(Math.pow(2,3));//结果是：8 console.log(Math.round(8.99));//结果是：9 console.log(Math.ceil(-6.5));//结果是：-6 console.log(Math.floor(9.99));//结果是：9 var x = Math.max(12,2,-5,8); console.log(x);//结果是：12 var y = Math.min(12,2,-5,8); console.log(y);//结果是：-5 console.log(Math.random());//结果是：[0，1）的随机数 console.log(Math.random()*20 + 10);//结果是：[10，30）的随机数 console.log(Math.PI);//结果是：π的值 console.log(Math.abs(-5));//结果是：5 </script> </body> </html>
