1.回顾
js的数据类型
5种基本的数据类型
number 数值
string 字符串
boolean 布尔
undefined 未定义
null 空对象
一种特殊的数据类型(复合 引用 对象)
object 对象
array 数组
function 函数
typeof 检测数据类型
typeof null object
typeof undefined undefined
typeof true boolean
typeof 123 number
typeof "你好" string
null和undefined有什么区别
undefined 未定义 声明变量但是没有赋值 没有存储空间 var a;
null 空对象 有存储空间
== 和===的区别
== 在判断的时候 会隐式转换
=== 不会隐式转换
数据的转换
显式转换/强制转换 通过js的方法 强制将数据转化为某种数据类型
隐式转换： 在进行某些运算的时候 自动转换数据类型
Number() 强制转换为number类型
string类型(纯数字 ""-0 " "-0) boolean(true-1 false-0) null-0
parseInt()
强制转为number类型 从左往右转换 遇到不能转换的或者是末尾结束 如果从一开始就不能转换则是NaN 取整(舍弃小数)
parseInt("abc12.6cd");//NaN
parseInt(null);//NaN
parseFloat()
强制转为number类型 从左往右转换 遇到不能转换的或者是末尾结束 如果从一开始就不能转换则是NaN 保留小数
parseFloat("12.5px");12.5
String(undefinded) 转换为string类型 在转换的数据加引号
"null" "undefined"
toString()
null.toString() // 不能转
undefined.toString() 不能转
Boolean
number(非0即真) string类型(有值即真) null-false undefined-false NaN-false
要保留的额数据.toFixed(n) 保留n位小数
isNaN 检测数据是不是 不是一个数
//会先隐式转换number类型 再进行判断
isNaN(10) false
isNaN("嘿嘿")
算术表达式
+ - * / % ++ --
赋值表达式
= += -= a+=2 a=a+2
三目
条件?true执行的代码(只能写一行代码):false执行的代码(只能写一行代码)
true?console.log("今天吃早饭了吗"):console.log("起床起晚了");
console.log(123)
2.逻辑运算符
或|| 与&& 非!
-
基础操作
// 逻辑运算符 ||或 &&与 !非 运算符左侧两侧是跟的条件
// 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
3.流程控制语句
1.流程控制语句介绍
-
顺序结构(代码依次从上往下执行)
console.log(1) console.log(2) console.log(3)
-
选择结构(分支语句) if if-else if-else if-else switch
-
循环结构：for while do-while for-in
2.选择结构（分支语句）
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>
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>
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")
}
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>
3.循环结构
3.1 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>
3.2 while与do-while
/*
while语句
1.初始化循环变量
while(条件){
循环体(重复执行的代码);
更新循环变量
}
*/
var a = 0;
while(a < 3){
console.log("你好");
a++;
}
/* do-while语句
1.初始化循环变量
do{
循环体;
更新循环变量
}while(条件)
*/
var b = 0
do{
console.log("摆烂");
b++;
}while(b<3);
-
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)
9849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
