概述
day04 运算符和流程控制语句
1.回顾
5种基本数据类型
number 数值类型
string 字符串类型
boolean 布尔类型
undefined 未定义
null 空对象
1种特殊数据类型(复杂数据类型 引用数据类型 对象数据类型)
array 数组
object 对象
function 函数
null和undefined的区别
undefined 未定义 声明变量没有赋值 var a; 没有存储空间
null 空对象 有存储空间
Number(要转换的数据)
将数据转换为number类型 如果转换不了结果为NaN
Number("12");
总结：Number方法可以转换的有 string类型(纯数字,"") boolean类型(true false)
null
强制转换为string类型的方法有哪些
String(要转换的数据) 要转换的数据.toString()//null和undefined没有toString
强制转换为boolean类型的方法有哪些
Boolean(要转换的数据)
转为false的有：0 NaN null undefined "";
2.运算符和表达式
2.1算术运算符
-
算术运算符：+ - * / % ++ --
2.2赋值运算符
-
= += -+ *= /= %=
2.3比较运算符
> < >= <= == !=(不等于) ===(恒等 全等)
<script>
//比较运算符 > < >= <= == !=(不等于) ===(恒等 全等)
console.log(30 > 20)//true;
// 1.两个字符比较 如果是字符串比较 比较的是ASCII码值 一位一位的进行比较
// "0"-48 "a"-97 "A"-65
console.log("1000" > "20");//false
console.log("1000" > "10");//true
console.log("a" > "A");//true
console.log("a" != "A");//true
// 2.==和===的区别？面试题
console.log(10 == 10);//true ==在进行比较的时候会进行隐式转换 尽量都会转为number
console.log(10 == "10");//true
console.log(10 === "10");//false ===在进行比较的时候不会隐式转换 只有左右两侧完全相等才是true
console.log("10" === "10");//true
// 3.特殊情况 null在判断相等的时候 不会隐式转换
console.log(null == 0);//false
console.log(null >= 0);//true
console.log(null <= 0);//true
console.log(null == null);//true
console.log(null == undefined);//true
</script>
2.4逻辑运算符
-
&&(与) ||(或) ！(非，取反的意思)
-
基础用法
// 1.基础用法 // 1-1 表达式1&&表达式2 两真为真 只有两个表达式的值都为true 结果才为true var a = true && true; console.log(a);//true var b = false && true; console.log(b);//false var c = 100 > 90 && 100 > 0 //true && true console.log(c)//true // 1-2 表达式1 || 表达式2 一真为真 只要有一个表达式的值为true 结果就为true var a = true || true; console.log(a);//true var b = true || false; console.log(b);//true var c = false || false; console.log(c);//false var d = 0 < 1 || 0 > 1; //true || false console.log(d)//true // 1-3 ！ 取反 结果true和false var a = true; console.log(!a); console.log(!1);//false
-
&&的短路情况
// && 和 || 短路运算 // &&短路运算 两真为真 // 2-1如果第一个条件为false，第二个条件不再执行 执行到哪就把哪的结果为左侧 var a1 = 1; var b1 = 1; var c1 = --a1 && --b1;// c1 = 0(false) a1 = 0 console.log(a1, b1, c1);// 0 1 0 // 2-2 如果第一个条件为true 执行第二个条件 执行到哪就把哪的结果为左侧 var a2 = 10; var b2 = 2; var c2 = --a2 && --b2;// c2 = 9 && 1 = 1 a2=9 b2=1 console.log(a2, b2, c2);//9 1 1
-
|| 的短路情况
// ||短路运算 一真为真 // 3-1 如果第一个条件为false，再执行二个条件 执行到哪就把哪的结果为左侧 var x1 = 1; var y1 = 10; var z1 = --x1 || --y1;// z1 = 0 || 9 = 9 x1 = 0 y1 = 9 console.log(x1, y1, z1);// 0 9 9 // 3-2 如果第一个条件为true 第二个条件就不执行 执行到哪就把哪的结果为左侧 var x2 = 10; var y2 = 10; var z2 = --x2 || --y2; // z2 = 9 x2=9 console.log(x2, y2, z2);//9 10 9
2.5三目运算符
-
表达式的值 ? 结果为true要执行的代码(只能写一行代码) ：结果为false要执行的代码
<script>
//语法：表达式 ? 结果为true要执行的代码(只能写一行代码) ：结果为false要执行的代码
//你的money大于100000的时候 你可以娶媳妇 否则你就努力搬砖挣钱娶媳妇
var price = 100001;
price > 100000 ? console.log("娶媳妇") : console.log("搬砖挣钱");
</script>
3.流程控制语句
==流程控制语句 重在实际操作==
3.1流程控制语句
-
顺序结构(从上往下执行
-
选择结构(分支语句)：if if-else if-else if -if switch
-
循环结构：for while do-while for-in
3.2选择结构(分支语句)
3.2.1单分支
-
语法：if(判断条件){ 条件成立执行的代码 }
<script>
// 1.if(判断条件){条件为true执行的代码}
if (1 == 1) {
console.log("条件为true");
}
if (1 === "1") {
console.log("true");
}
</script>
-
注意1：if后面的大括号可以省略 不加大括号只能控制紧跟的一句话;
// 注意1 if后面的大括号可以省略 不加大括号只能控制紧跟的一句话;
if (true && false) console.log("快吃饭了");
console.log(123);
-
注意2：if条件不是必须是判断 只要结果能确定true和false都可以
// 注意2 if条件不是必须是true和false 只要能确定true和false都可以
if (1) {
console.log("true");
}
if (NaN) {
console.log("true1");
}
3.2.2双分支
-
语法：if(判断条件){ 条件成立执行的代码 }else{条件不成立执行的代码 }
<script>
if (true) {
console.log("条件成立");
} else {
console.log("条件不成立")
}
if (null) {
console.log("条件成立1");
} else {
console.log("条件不成立1")
}
// 注意 if和else是成对出现
if (undefined) {
}else {
}
</script>
3.2.3多分支
if(条件1){
条件1成立执行的代码
}else if(条件2){
条件2成立执行的代码
}else if(条件3){
条件3成立执行的代码
}
......
else{ 不是必须的
//以上条件都不成立执行的代码
}
// 1 上课 2 打游戏 7 睡觉 其他时间都在学习
var day = 3;
if (day == 1) {
console.log("上课")
} else if (day == 2) {
console.log("打游戏")
} else if (day == 7) {
console.log("睡觉")
} else {
console.log("学习")
}
3.2.4switch语句
switch(匹配条件){
case 情况1: 匹配到情况1所执行的代码;break;
case 情况2: 匹配到情况2所执行的代码;break;
case 情况3: 匹配到情况3所执行的代码;break;
case 情况4: 匹配到情况4所执行的代码;break;
case 情况5: 匹配到情况5所执行的代码;break;
.....
default:上方所有情况都匹配不到的时候 执行这里
}
<script>
//1---学习 2----打游戏 3-约会 6---睡觉
var day = 1;
switch (day) {
case 1:
console.log("学习"); console.log(123);
break;
case 2: console.log("打游戏"); break;
case 3: console.log("约会"); break;
case 6: console.log("睡觉"); break;
default: console.log("摆烂");
}
</script>
4.循环结构
4.1for循环
-
什么时候使用for循环
-
多次重复执行
-
多次有规律的执行
-
-
for的作用
-
可以让特定的代码执行指定的次数
-
-
for循环的基础语法
for(表达式1;表达式2;表达式3;){
重复执行的代码(循环体)
}
for(初始化循环变量;循环判断条件;更新循环变量;){
循环体
}
//输出10次"今天要做核酸"
for(var i = 0;i<10;i++){
console.log("今天要做核酸")
}
-
for循环的执行过程
//输出10次"今天要做核酸"
for(var i = 0;i<5;i++){ // i = 0 1 2 3 4
console.log("今天要做核酸")
}
//i最后一次的值是5
执行过程
1.初始化循环变量 var i = 0
2.判断循环条件 0<10
条件成立 执行步骤3
条件不成立 结束循环
3.执行循环体
4.更新循环变量 i++
5.回到步骤2
<script>
//输出10次"今天要做核酸"
for (var i = 0; i < 5; i++) { //当i = 0 1 2 3 4
console.log("今天要做核酸")
}
console.log(i);//i最后一次的值是5
//输出10次"今天要做核酸"
for (var i = 10; i < 15; i++) { //当i = 10 11 12 13 14
console.log("今天要做核酸");
}
console.log(i);//i最后一次的值是15
for (var i = 0; i < 10; i += 2) { // i=0 2 4 6 8
console.log(i);//0 2 4 6 8
}
// 注意的点：一定要有结束条件，否者会造成死循环
</script>
4.2循环添加点击事件
<body>
<button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><button>按钮6</button><button>按钮7</button><button>按钮8</button><button>按钮9</button><button>按钮10</button>
<script>
//给10个button添加点击事件 输出结果1
var btn = document.getElementsByTagName("button");
// btn[0].onclick = function () {
// console.log(1);
// }
// btn[1].onclick = function () {
// console.log(1);
// }
// btn[2].onclick = function () {
// console.log(1);
// }
// // .....
// btn[9].onclick = function () {
// console.log(1);
// }
// 下标 0 1 2 3 4.....9
for (var i = 0; i < 10; i++) {// i = 0 1 2 3 4 5 6 7 8 9 10
btn[i].onclick = function () {
console.log(1);
}
}
// 需求:点击button按钮 输出对应的下标i;点击第一个button 0 第二个button 1 第三个button 2
for (var i = 0; i < 10; i++) {
btn[i].onclick = function () {
console.log(i);//10
}
}
//i 最后一次的值是10
//for循环的目的是给10个button按钮添加添加事件 并不会触发点击事件中的代码 只有点击的button的时候才会执行 等到那个时候执行 i的值已经是10
</script>
最后
以上就是俏皮香氛为你收集整理的JS学习第四天day04 运算符和流程控制语句的全部内容，希望文章能够帮你解决JS学习第四天day04 运算符和流程控制语句所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复