第二节条件语句和与或非

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

单向分支 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 } }

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,723评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,003评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,512评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,825评论 1赞 290
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,874评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,841评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,812评论 3赞 416
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,582评论 0赞 271
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,033评论 1赞 308
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,309评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,450评论 1赞 345
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,158评论 5赞 341
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,789评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,409评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,609评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,440评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,357评论 2赞 352

第二节 条件语句和与或非

与或非

开关灯案例:

案例之隔行变色

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

推荐阅读更多精彩内容

第二节条件语句和与或非