javascript
1.数据类型转换
- 数据类型转换分为两种
- 显式转换(强制转换):通过js的方法,转换成自己想要的数据类型
- 隐式转换:在js进行某些运算的时候 自动完成转换数据类型
1.1 强制转换为number
- Number(要转换的数据)
- 作用:将数据转换成number类型,如果转换不了则是返回NaN
<script>
// Number类型转换
// 1.number类型
var n1 = 10;
console.log( Number(n1) );//10
// 2.string类型转换
var n2 = "10";
console.log( Number(n2));//10
var n3 = "10px";
console.log(Number(n3));//NaN
var n4 = "px10abc";
console.log(Number(n4));//NaN
var n5 = "";
console.log(Number(n5));//0
// 3.boolean类型
var n6 = true;
console.log(Number(n6));//true----1
var n7 = false;
console.log(Number(n7));//false----0
// 4.undefined
var n8 = undefined;
console.log(Number(n8));//NaN
// 5.null
var n9 = null;
console.log(Number(n9));//0
// 总结:Number可以转换的有:string类型(纯数字,""-0 " "-0) boolean(true-1 false-0) null(0)
</script>
- parseInt(要转换的数据)
- 主要是针对字符串数据操作
- 作用:将数据转换成number类型,从左往右转换,遇到不能转换的或者是末尾结束,如果一开始都不能转换则是NaN 并且取整(舍弃小数)
var n1 = "10.5";
console.log(parseInt(n1));//10
var n2 = "10.5px";
console.log(parseInt(n2));//10
var n3 = "px10.5";
console.log(parseInt(n3));//NaN
var n4 = "11px123";
console.log(parseInt(n4));//11
var n5 = undefined;
console.log(parseInt(n5));
- parseFloat(要转换的数据)
- 主要针对字符串数据操作
- 作用:将数据转换成number类型,从左往右转换,遇到不能转换的或者是末尾结束,如果一开始都不能转换则是NaN 保留小数
<script>
// parseFloat: 将数据转换成number类型,从左往右转换,遇到不能转换的或者是末尾结束,如果一开始都不能转换则是NaN 保留小数
var n1 = "10.8";
console.log(parseFloat(n1));//10.8
var n2 = "10.8px";
console.log(parseFloat(n2));//10.8
var n3 = "px10.8";
console.log(parseFloat(n3));//NaN
var n4 = "11.8px1234";
console.log(parseFloat(n4));//11.8
var n5 = undefined;
console.log(parseFloat(n5));//NaN
</script>
1.2 强制转换为string
- String(要转换的数据)
- 作用:将数据强制转换为string类型 直接在数据外面加""
<script>
// String():将数据强制转换为string类型 直接在数据外面加""
var s1 = 10;
console.log(String(s1));// "10"
var s2 = null;
console.log(String(s2));// "null"
var s3 = undefined;
console.log(String(s3)); //"undefined"
var s4 = true;
console.log(String(s4));// "true"
</script>
- 要转换的数据.toString(num)
- num表示转换num进制的字符串 不写默认是10进制
<script>
// toString
var n1 = 10;
console.log(n1.toString());//"10"
var n2 = true;
console.log(n2.toString());// "true"
// undefined没有tostring方法
var n3 = undefined
// console.log(n3.toString());//报错
var n4 = null
// null 没有tostring方法
console.log(n4.toString());//
</script>
1.3 强制转换为Boolean
-
Boolean() : 强制转换为Boolean类型 结果为true,false
<script> // Boolean(要转换的数据) 将数据转换boolean类型 转换结果只有两种true和false // 1.number类型转换 非0即真(只要不是0 都是true) var b1 = 1; console.log(Boolean(b1));//true var b2 = 0; console.log(Boolean(b2));//false // 2.string类型转换 有值即为真 var b3 = "中文wertyuewrty"; console.log(Boolean(b3));//true var b4 = ""; console.log(Boolean(b4));//false //3.undefined var b5 = undefined; console.log(Boolean(b5));//false // 4.null var b6 = null; console.log(Boolean(b6));//false // 5.NaN var n7 = NaN; console.log(Boolean(n7)); //总结:Boolean结果为false的有:0 null undefined "" NaN </script>
2. 小方法
2.1 toFixed
- 要保留的数据.toFixed(n) 保留n位小数
<script>
// toFixed(n) 保留n位小数 给number类型用的
var n1 = 3.1415926;
console.log(n1.toFixed(3));
var n2 = "3.1415926";
console.log(n2.toFixed(2));//报错
</script>
2.2 isNaN
- isNaN(检测的数据): 检测数据是不是 不是一个数
- 判断之前会先用Number方法强制转换 再进行判断
// isNaN 检测数据是不是 不是一个数
// 判断之前会先用Number方法强制转换 再进行判断
var n3 = 10;
console.log(isNaN(n3));//n1不是一个数 false
var n4 = "123"; // 先用Number方法转成 123
console.log(isNaN(n4));//123不是一个数 false
var n5 = "123你好";//Number类型转换是NaN
console.log(isNaN(n5));//true
3.运算符与表达式
3.1 运算符和表达式的概念
10 + 20 表达式
10 20 称为操作数
+ 运算符
- 运算符: 连接一个以上的操作数中间的符号叫做运算符
算术运算符 + - * / % ++ --
赋值运算符 = += -= /= %=
逻辑运算符 && || !
三目运算符 条件 ? true执行的结果 : false执行的结果
比较运算符 > < >= <= == != ===
- 表达式:由操作数和运算符组成的式子就叫表达式
算术表达式 操作数和算术运算符组成
赋值表达式 操作数和赋值运算符组成
逻辑表达式 操作数和逻辑表达式组成
三目表达式 操作数和三目表达式组成
比较表达式 操作数和比较运算符组成
3.2 算术运算符
算术运算符: + - * /取余 % ++ --
<script>
// 算术运算符
var a = 10 + 4
console.log(a);//14
var b = 10-4;
console.log(b);//6
console.log(10*4);//40
console.log(10/4);//2.5
console.log(11%4);//3 取余
console.log(12%4);//0
// 1.求n的倍数
var n = 9;
console.log(100%n == 0);//true 是9的倍数 false 不是9的倍数
// 2.判断当前这个数是不是偶数 都是2的倍数
console.log(11%2==0)//true 偶数 false 奇数
// 3.精度缺失 在运算过程中 是先转换成二进制进行计算 在转换过程中会造成精度缺失
console.log(0.1+0.2);//0.30000000000000004
console.log(0.7+0.1);//0.7999999999999999
console.log(0.1*0.7);//0.06999999999999999
// 4.隐式转换 在运算过程中 数据自动进行数据类型的转换
// 隐式转换的规律:都会转换number类型进行运算
console.log(100 * false);//0
console.log(100 * "123");//12300
console.log(100 * "123px");//NaN
console.log(100 / true);//100
console.log(100+null); //100
console.log("100"- 10);//90
// 特殊:+ 字符串遇到+会拼接 除了字符串数据,其他的还是会隐式转换
console.log(100 + "123");// "100123"
console.log(100+true);// 101
</script>
- 自加/自减 ++ –
<script>
// 自加++ i++ 自加1 i = i+1
// 1.基础用法
var a = 10;
a++;//a = a+1
console.log(a);//11
var b = 10;
++b;//b = b+1;
console.log(b);//11
// 2.++和-- 参与运算
/*
++在前 先自加1 然后再运算(打印)
++在后 先运算(打印) 再自加1
*/
var x = 10;
var y = x++;// y=10 x=11
console.log(x, y);//11 10
var n1 = 10;
var n2 = ++n1;// n2=11 n1=11
console.log(n1, n2);// 11 11
//练习1
var s = 10;
var t = 10;
console.log(s++, ++t);//10 11 s=11 t=11
console.log(s, t);//11 11
// 练习2:
var a = 10;
var b = ++a + a++ + a++; //b=11+11+12=34 a=13
var c = a++ + ++b + b++;//c=13+35+35=83 b=36 a=14
console.log(a, b, c);//14 36 83
// 练习3
/*
--在前 先自减1 然后再运算(打印)
--在后 先运算(打印) 再自减1
*/
var x = 10;
var y = --x + x-- + --x;//y = 9+9+7=25 x=7
var z = y-- + --y + x--;// z = 25+23+7=55 x=6 y=23
console.log(x, y, z);// 6 23 55
</script>
3.3 赋值运算符
= += -= *= /= %=
<script>
//赋值运算符 = += -= *= /= %=
var a = 10;
console.log(a);//10
var b = 10;
b+=10;// b = b+10
console.log(b);//20
var c = 10;
c-=5;
console.log(c);//5
var d = 20;
d*=10;
console.log(d);//200
var e = 20;
e/=5;
console.log(e);//4
var f = 101;
f%=10;
console.log(f);//1
</script>
3.4 比较运算符
> >=
< <=
!=
==
===
<script>
/*
比较运算符
> >=
< <=
!=
==
===
*/
// 1.基础判断
console.log(10 > 20);//false
console.log(10 > 10);//false
console.log(10 >= 10);//true
console.log(10 < 20);//true
console.log(10 <= 10);//true
console.log(10 != 20);//true
console.log(10 !=10) ;//false
console.log(10==10);//true
// 两个字符比较 一位一位的比较 而且比较的ASCII字符编码
// "1" 49 > "2" 50 false
console.log("1000000" > "2");//false
// "a" 97 > "A" 65
// "a"-"z" 97-122 "A"-"Z" 65-90
console.log("a" > "A");
//2 ==和===的区别是什么 面试题
console.log(10=="10");//true ==在进行比较的时候 会进行隐式转换 尽量都会转成number类型
console.log(10==="10")//false ===在进行比较的时候 不会隐式转换 必须一模一样才可以
console.log("10"==="10");//true
console.log(null==null);//true
console.log(undefined==undefined);//true
//3.特殊: null在判断相等的时候 不会进行隐式转换
console.log(null==0);//false
console.log(undefined==0)//NaN==0 false
console.log(null==undefined);///true
console.log(NaN==NaN);//false 任何两个NaN都不相等
console.log(null>=0);//true
console.log(null<=0);//true
</script>
3.5三目运算符
- 作用:用于判断
- 语法 条件 ? 条件为true的时候执行的代码(只能写一行代码) : 条件为false执行的代码
<script>
1==1?console.log("你好"):console.log("不好")
"a"==="A"?console.log("1"):console.log("2")
</script>
4.逻辑运算符
或|| 与&& 非!
- 基础操作
// 逻辑运算符 ||或 &&与 !非 运算符左侧两侧是跟的条件
// 1. ||或 只要有一个true 结果就为true
var a = true || false;
console.log(a);//true
var b = 1==1 || 1>2;// true || false
console.log(b);//true
var c = "a"=="A" || "11"===11;// var c = false
console.log(c) //false
// 2. &&与 只要都为true的时候 结果才为true
var a1 = 1>2 && 2>1; //var a1 = false && true
console.log(a1);//false
var b2 = "a"=="a" && "b"=="b";// true && true
console.log(b2);
// 3 非 ! 取反
var a = 2;
console.log(!a);
- &&短路运算
- 如果第一个条件就为false 第二个条件不执行 执行到哪就把哪的值给左侧
- 如果第一个条件就为true 再去执行第二个条件 执行到哪就把哪的值给左侧
// 3.1 &&短路运算
// 如果第一个条件就为false 第二个条件不执行 执行到哪就把哪的值给左侧
var a1 = 1;
var b1 = 1;
var c1 = --a1 && --b1;//var c1= 0 a1=0 b1 = 1
console.log(a1,b1,c1);// 0 1 0
// 如果第一个条件为true 再去执行第二个条件 执行到哪就把哪的值给左侧
var x = 10;
var y = true && x--; // y=10 x=9
console.log(x,y);// 9 10
var a2 = 10;
var b2 = 2;
var c2 = --a2 && --b2;//var c2 = 9 && 1 a2=9 b2=1
console.log(a2,b2,c2);//9 1 1
- || 短路运算
- 如果第一个条件为true 第二个条件不执行 执行到哪就把哪的值给左侧
- 如果第一个条件为false 再执行第二个条件 执行到哪就把哪的值给左侧
//3.2 或|| 短路
// 如果第一个条件为true 第二个条件不执行 执行到哪就把哪的值给左侧
var x = 10;
var z = true || x--;// z=true
console.log(x,z);//10 true
// 如果第一个条件为false 再执行第二个条件 执行到哪就把哪的值给左侧
var x = 10;
var z = false || --x; // var z = 9 x=9
console.log(x,z);// 9 9
var x1 = 1;
var y1 = 10;
var z1 = --x1 || --y1;//var z1 = 0 || 9 z1 = 9 x1=0 y1=9
console.log(x1,y1,z1);//0 9 9
var x2 = 10;
var y2 = 10;
var z2 = --x2 || --y2;//var z2 = 9 x2 = 9 y2 = 10
console.log(x2,y2,z2);// 9 10 9
5.流程控制语句
流程控制语句:重要实际操作
5.1.流程控制语句介绍
-
顺序结构(代码依次从上往下执行)
console.log(1) console.log(2) console.log(3)
-
选择结构(分支语句) if if-else if-else if-else switch
-
循环结构:for while do-while for-in
5.2.选择结构(分支语句)
5.2.1 单分支
- if
- 语法: if(条件){ 条件成立的时候执行的代码 }
- 注意事项
- if后面的大括号可以省略 不加大括号 只能控制后面一行代码
- if的判断条件不一定是表达式 只要能确定真假就行
<script>
// 1.单分支 if(判断条件) { 条件成立执行的代码}
//需求:如果我的钱超过10000 我就挣钱娶媳妇
var price = 8000;//这是我目前的存款
if(price > 10000){ // false 条件不成立
// 条件成立执行的代码
console.log("挣钱娶媳妇");
console.log("度蜜月");
}
// 注意事项1:if后面的大括号可以省略 不加大括号 只能控制后面一行代码
if(true)console.log(123);
if(false){console.log(456);console.log(789)};
// 注意事项2:if的判断条件不一定是表达式 只要能确定真假就行
if(0){
console.log("你在说什么")
}
</script>
5.2.2 双分支
- if-else
- 语法: if(判断条件){条件成立执行的代码 }else{条件不成立执行的代码}
- 注意事项:如果是双分支语句 if和else一定要搭配使用
<script>
// 2.双分支 if(判断条件){ 条件成立执行的代码} else{ 条件不成立执行的代码}
// 需求:如果你二阶段考核分数不过90 你就末班 如果超过90 就进入三阶段
var store = 90;
if(store >= 90){ //条件成立
console.log("进入三阶段")
}else{//条件不成立
console.log("恭喜你要深造了一次")
}
// 注意事项:如果是双分支语句 if和else一定要搭配使用
if(true){
console.log(123)
}else{
console.log(456)
}
</script>
5.2.3 多分支
- if-else if -else
- 注意事项:else不是必须的
- 语法:
if(条件1){
满足条件1执行的代码
}else if(条件2){
满足条件2执行的代码
}else if(条件3){
满足条件3执行的代码
}
.........
else{
以上条件都不满足的时候 执行的代码
}
//需求 成绩0-59 不及格 60-79 中等 80-100优秀 不在0-100中间 成绩无效
var store = 101;
if (store > 0 && store <= 59) { //0-59 大于0 store > 0 && 小于等于59 store <=59
console.log("不及格")
} else if (store > 59 && store <= 79) {// 60-79 大于59 store >59 && 小于等于79 store <=79
console.log("中等")
} else if (store > 79 && store <= 100) {//80-100
console.log("优秀")
} else { //以上条件都不满足的时候 执行这里的代码
console.log("成绩无效")
}
// 注意事项 else不是必须的
var num = 12;
if(num==10){
console.log("10")
}else if(num==11){
console.log("11")
}
5.2.4 switch语句
-
语法
switch(){ case 情况1 : 匹配到情况1所执行的代码; break; case 情况2 : 匹配到情况2所执行的代码; break; case 情况3 : 匹配到情况3所执行的代码; break; ...... default:上述情况都不匹配的时候 执行的代码 }
<script>
/*
*/
// break 终止的意思 如果满足这一项,直接终止后面的代码执行
var a = "%";
switch (a) {
case "+": console.log("+"); break;
case "-": console.log("-"); break;
case "*": console.log("*"); break;
case "/": console.log("/"); break;
default: console.log("没有找到")
}
var c = 90;
switch(c){
case 100:console.log("满分");break;
default:console.log("没有找到");
}
// switch 比较适用于简单的字符串或者数字判断
</script>
6.循环结构
6.1 for循环
什么时候需要使用for循环 多次重复执行 多次有规律的执行
for循环的作用 可以让特定的代码执行指定的次数
- for循环的语法
for(表达式1;表达式2;表达式3){ 循环体(重复执行的代码) }
for(初始化循环变量;循环条件;更新循环变量值){循环体(重复执行的代码)}
for(var n=0;n<5;n++){ console.log("今天吃饭了") }
执行过程
1.初始化循环变量 var n = 0
2.判断循环条件 n<5
条件成立 执行循环体
条件不成立 结束循环
3.更新循环变量 n++
4.回到步骤2
- 基础用法
<script>
/*
for(表达式1;表达式2;表达式3){ 循环体 }
for(初始化循环变量;循环条件;更新循环变量值){ 循环体}
*/
for (var n = 1; n < 10; n++) { // n = 1 2 3 4 5 6 7 8 9 10
console.log("你今天吃饭了吗")
}
console.log(n);//10
</script>
- 循环数组
//循环数组
//array 数组类型 ["123",2,true,undefined,null] 数组可以存储多个数组 可以存储任意类型的数据
var arr = ["你好吗", 123, true, undefined, null];
console.log(arr);
//获取数组中的某一项 语法 数组名[下标]
// console.log(arr[0])
// console.log(arr[1])
// console.log(arr[2])
// console.log(arr[3])
// console.log(arr[4])
//
for (var i = 0; i < 5; i++) { // i = 0 1 2 3 4 5
// console.log(i);// 0 1 2 3 4
console.log(arr[i]);// "你好吗" 123 true undefined null
}
- 循环生成标签
body>
<button>生成</button>
<ul>
</ul>
<script>
var arr = ["赵四成精", "刘能变形", "中国老年人才网正式上线", "拍婚纱照 新郎被劈死"]
// 需求 点击生成按钮 生成四个新闻
// 1.获取元素
var btn = document.getElementsByTagName("button")[0];
var list = document.getElementsByTagName("ul")[0];
// 2.添加点击事件
btn.onclick = function () {
for (var i = 0; i < 4; i++) { // i = 0
// 将原先的内容获取到 + 新内容
// arr[0] arr[1] arr[2] arr[3]
list.innerHTML += "<li>" + arr[i] + "</li>"
/*
i=0 "<li>赵四成精</li>"
i = 1 "<li>赵四成精</li>" + "<li>刘能变形</li>"
i = 2
*/
}
}
</script>
</body>
- 循环添加点击事件
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//点击哪个按钮 将哪个按钮的文本内容输出
var btn = document.getElementsByTagName("button");
// btn[0].onclick = function(){
// console.log(btn[0].innerText)
// }
// btn[1].onclick = function(){
// console.log(btn[1].innerText)
// }
// btn[2].onclick = function(){
// console.log(btn[2].innerText)
// }
// btn[3].onclick = function(){
// console.log(btn[3].innerText)
// }
// btn[4].onclick = function(){
// console.log(btn[4].innerText)
// }
for(var i = 0;i<5;i++){ // i = 0 1 2 3 4 5
btn[i].onclick = function(){
// console.log(btn[i].innerText);// 出现报错信息 因为此时i的值是5
// console.log(i);//5
}
}
</script>
</body>
6.2 while与do-while
6.2.1 while语句
/*
while语句
1.初始化循环变量
while(条件){
循环体(重复执行的代码);
更新循环变量
}
*/
var a = 0;
while(a < 3){
console.log("你好");
a++;
}
6.2.2 do-while的语法
/* do-while语句
1.初始化循环变量
do{
循环体;
更新循环变量
}while(条件)
*/
var b = 0
do{
console.log("摆烂");
b++;
}while(b<3);
6.2.3 while和do-while的区别
- while:先判断后执行 最开始不成立 一次也不执行
- do-while :先执行后判断 最开始不成立 也会执行一次
// while和do-while有什么区别
var x = 0;
while(x > 0){ //先判断后执行 最开始不成立 一次也不执行
console.log("马上下课了");
x++;
}
var x = 0;
do{// 先执行后判断 最开始不成立 也会执行一次
console.log("还没有下课呢");
x++;
}while(x<0)