第二节条件语句和与或非

条件语句（实现分支结构）

单向分支 if

if (表达式) {

code...

}

双向分支 if...else

if (表达式) {

code...

} else {

code...

}

多向分支 if... else if

if (表达式) {

code...

} else if (表达式) {

code...

} else if (表达式) {

code...

} else {

code...

}

多向分支 switch...case

一个变量在不同值情况下的不同操作，我们可以改写为 switch case 判断

（他只能应用于等于什么值做什么事情，不能用户大于或者小于啥值做啥）

switch (值) {

case 可能的值: code....; break;

//=>每一种情况结束都要设置break（以供当此条件成立并处理完事情后，通知代码不在向下执行）

case 可能的值: code....; break;

//每一种case情况都是基于 === 进行比较的（严格比较，需要保证数据类型的一致）

case 可能的值: code....; break;

default: code....; //=>等价于else，而且最后一个判断结束无需设置break

}

var num = 6;

switch (num) {

case 5:

num++;

break;

case 6:

num--;

// break;

case 7:

num--

// break;

default:

num = 0;

}

console.log(num);

如果忘记写break，无论你是否满足case的要求，都会往下执行一直到遇到breake或者default结束；

分支结构嵌套

if (表达式) {

code....

}

code ...

} else {

code...

}

循环语句（实现循环结构）

while 循环

while (循环条件) {

code...

}

do...while循环

do {

code...

} while (循环条件)

总结：while循环是先判断后循环，而do–while循环是先循环后判断。

for 循环

for (循环变量; 循环条件; 循环变量变化) {

code ...

}

//循环输出 0-10

for (var i = 0; i <= 10; i ++) {

console.log(i)

}

跳转语句

break语句结束整个循环

continue语句结束当前循环

return语句返回函数值（后面看）

【案例解说具体含义】

for(var i=0;i<10;i++){

if(i<5){

i++;//

continue;

}

if(i>7){

i+=2;

break;

}

i+=1;

}

console.log(i);

for(var i=1;i<=10;i+=2){

if(i<=5){

i++;//

continue;

}else{

i-=2;

break;

}

i--;

console.log(i);

}

console.log(i);

for (var i = 0; i < 10; i++) {

console.log(i);

break;

}

console.log(i);

i++和++i的理解

题解1

var i = 5;

var b=i++;

console.log(b);

题解2

var i = 5;

var b=++i;

console.log(b);

题解3

vari = 5;

i = (i++) + (i++) + (++i) + (++i);

console.log(i)

三元运算

1、【语法】：

条件?条件成立执行的语句：条件不成立执行的语句

var num=5

if(num>=5){

num++

}else{

num--

}

改写成三元运算符

num>=5?num++:num--

2、【特殊情况】

条件成立，我想做一件事情，不成立我什么不做，可以用 undefined/null/void 0来做占位符

var num=5;

num>=5?num++:undefinde;

num>=5?num++:null;

num>=5?num++:void 0;

3、【多条语句】

如果条件成立之后，想同时执行多条语句，我们可以用“小括号”把执行语句包起来，并且语句与语句之间用“逗号”进行分割

var num=5;

var a=3;

num>=5?(num++,a--):null;

4、【思考题】

把下面的代码改成三元运算符

var num=12;

if(num>0){

if(num<10){

num++;

}else{

num--;

}

}else{

if(num==0){

num++;

num=num/10;

}

条件判断里面的相互转换规则

==和!=

===和!==

对象==对象的时候，如果引用地址相同，就相等，如果引用地址不同就不等

对象==数字类型的时候，都先转换为数字，再比较

对象==字符串类型的时候，把对象转换为字符串，再进行比较

对象==布尔数据类型的时候，都先转换为数字，在比较

数字==字符串，都先转换数字类型，再比较

数字==布尔，都先转换为数字类型，再比较

字符串==布尔，都先转换为数字类型，再比较

总结：对于不同的数据类型转换规律：

1）对象和字符串比较的时候，是对象先转为字符串然后再进行比较

2）除了第一种，不同数据类型比较都是先转换为number数字，再进行比较

特殊情况总结：

null==undefined true

null===undefined false

null 和 undefined 和其它值永远不相等

NaN 和其它值永不相等

1==true

1==false

2==true

[]==true

![]==true

[]==[]

var ary1=[1,2];

var ary2=ary1

ary1==ary2;

与或非

&& || ！

开关灯案例:

【相关知识铺垫】

1、元素包含的常用属性：

className: 存储的是字符串，代表当前元素的类名

id：存储的是字符串，代表当前元素的id名

innerHTML：存储当前元素的所有内容，包含标签

innerText：存储当前元素的文本内容

style：存贮当前元素的所有行内样式

onclick：点击事件属性

onmouseover：鼠标滑过事件

onmouseout：鼠标离开事件

2、通过id 获取一个元素：document.getElementById("id名字")

var Obox1=document.getElementById("box1");

console.log(Obox1)

</script>

3、通过标签名去获取一类标签:[context].getElementsByTagName;

var olis=document.getElementsByTagName("li"); // 获取文档中左右的li标签

var box1=document.getElementById("box1");

var lis=box1.getElementsByTagName("li");// 获取box1 下面所有的li元素

4、通过style属性去添加或者修改元素的样式

var Obox1=document.getElementById("box1");

Obox1.style.backgroundColor="pink";

</script>

5、给元素添加类名

var Obox1=document.getElementById("box1");

Obox1.className="current";

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin:0;

padding:0;

}

body{

background:darkturquoise;

}

#main{

width:300px;

border:1px solid green;

margin:0 auto;

}

#button{

width:100%;

height:50px;

background:lightblue;

text-align: center;

}

#imgbox{

display:block;

}

</style>

</head>

<body>

</div>

</body>

</html>

默认：图片是显示的，按钮的内容隐藏

点击按钮的时候，如果按钮原来是隐藏，

+ 按钮内容变成“显示”

+ 图片消失

点击按钮的时候，如果按钮是显示，

+ 按钮内容变成“隐藏”

+ 图片显示

var button=document.getElementById("button");

var oimg=document.getElementById("imgbox");

button.onclick=function(){

var value=button.innerText;

if(value=="隐藏"){

button.innerHTML="显示";

oimg.style.display="none";

}else{

button.innerHTML="隐藏";

oimg.style.display="block";

}

</script>

案例之隔行变色

css 实现

如果每隔三行实现一个变色，就是.main>li:nth-child(3n+1) .main>li:nth-child(3n+2) .main>li:nth-child(3n)

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin:0;

padding:0;

}

ul,ol{

list-style: none;

}

body{

background:lightseagreen;

}

.main{

width:500px;

/* border:1px solid #000; */

margin:50px auto;

color:#666;

}

.main>li{

height:40px;

line-height:40px;

text-indent: 20px;

}

.main>li:nth-child(even){

background:yellow;

}

.main>li:nth-child(odd){

background:lightgreen;

}

.main>li:hover{

background:lightblue;

}

</style>

</head>

<body>

<li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>

</ul>

</body>

</html>

js实现奇偶行变色

分析：隔行变色的原理：

操作的元素：li ，

让处于奇数的li 变一个颜色1

让处于偶数行的li 变一个颜色2

方法一：通过style行内属性来改变

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

ul,

ol {

list-style: none;

}

body {

background: lightseagreen;

}

#main {

width: 500px;

/* border:1px solid #000; */

margin: 50px auto;

color: #666;

}

#main>li {

height: 40px;

line-height: 40px;

text-indent: 20px;

}

</style>

</head>

<body>

<li>走在前沿的专家级课程：珠峰微信小程序实战开发课程</li>

</ul>

var omain = document.getElementById("main");

console.log(omain)

var lis = omain.getElementsByTagName("li");

for (var i = 0; i < lis.length; i++) {

if (i % 2 != 0) {

lis[i].style.backgroundColor = "yellow";

} else {

lis[i].style.backgroundColor = "pink";

}

</script>

</body>

</html>

方法二：通过添加类名

<style>

.color1{

background:lightsalmon;

}

.color2{

background:yellow;

}

</style>

for(var i=0;i<lis.length;i++){

if(i%2!=0){

lis[i].className="color1";

}else{

lis[i].className="color2";

}

全部用js实现，隔行变色，并且鼠标滑上去的时候，改变颜色，鼠标离开之后，还原原有的颜色

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin:0;

padding:0;

}

li{

height:30px;

line-height: 30px;

}

</style>

</head>

<body>

</ul>

</body>

</html>

原理：获取到所有的li元素，如果这个li是偶数我们就让它是一个颜色，如果不是偶数就是另一个颜色

var omain=document.getElementById("main");

var lis=omain.getElementsByTagName("li");

for(var i=0;i<lis.length;i++){

if(i%2==0){

lis[i].style.background="blue";

}else{

lis[i].style.background="yellow";

}

// 鼠标滑上li的时候，改变那个li的背景颜色

lis[i].onmouseover=function(){

// 把原有的颜色绑定上去

this.bgColor=this.style.backgroundColor;

this.style.background="lightpink";

}

// 鼠标离开的时候，恢复原有的颜色

lis[i].onmouseout=function(){

this.style.background=this.bgColor;

}

</script>

阿里引发的一道血案面试题

let a={

n:1,

}

let b=a;

a.x=a={

n:2

}

console.log(a.x);

console.log(b)

连等赋值：是按照从右向左

var a=b=20;

// 第一步：先创建一个值

// 第二步：b=20

// 第三步：var a=20；

a.x 的优秀级高，所以先给a.x进行赋值，再给a进行赋值；https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

答案：

undefined

{ n: 1, x: { n: 2 } }

第二节 条件语句和与或非

与或非

开关灯案例:

案例之隔行变色

阿里引发的一道血案面试题

推荐阅读更多精彩内容

第二节条件语句和与或非