技术文章 | jishuwenzhang

北京html5培训之JavaScript学习笔记(D2)


  
第2天北京html5培训课堂笔记
(本课程共8天)
 

一、北京html5培训运算符

运算符(Operators,也翻译为操作符),是发起运算的最简单形式。
分类:
数学运算符(Arithmetic operators)
比较运算符(Comparison operators)
逻辑运算符(Logical operators)
赋值运算符(Assignment operators)
按位运算符(Bitwise operators)
条件 (三元) 运算符(Conditional operator)

1.1 数学运算符

一般说的数学运算指的是纯数字参与的运算。+,-,*,/,%(取余操作),()
运算顺序:先算乘除取余,再算加减,有小阔号的先算括号里面的。

1 console.log(1 + 2);
2 console.log(1 - 2);
3 console.log(1 * 2);
4 console.log(1 / 2);
5 // % 取余操作。得到的结果是余数。余数的范围[0,n-1]
6 console.log(12 % 3);
7 console.log(10 % 3);
8 console.log(11 % 3);
9 console.log(15 % 5);
 
l 纯数字字符串参与数学运算时,不用parseInt()进行数据转换,在参与时会自动进行隐式转换(转换为number类型)参与数学运算(加法除外)。

1 // 纯数字字符串参与数学运算时,会进行隐式转换。加法是不能进行隐式转换是连接
2 console.log("12" - 2);     //10
3 console.log("12" * 2);    //24
4 console.log("12" / 2);    //6
5 console.log("12" % 2);    //0
6 console.log("12" + 2);    //122拼接作用
 
l NaN参与数学运算时,得到的结果是NaN

1 // NaN参与运算
2 console.log(NaN + 2);
3 console.log(NaN - 2);
4 console.log(NaN * 2);
5 console.log(NaN / 2);
6 console.log(NaN % 2);
7 console.log(NaN + NaN);
l Infinity参与数学运算时
1 // Infinity参与数学运算
2 console.log(12 + Infinity);
3 console.log(12 - Infinity);
4 console.log(12 * Infinity);
5 console.log(12 / Infinity);
6 console.log(15 % Infinity);      //15
7 console.log(Infinity + Infinity);
 
l boolean和null参与运算时也会进行隐式转换。
true → 1 ,false → 0 ,null → 0

1 // true,false,null进行数学运算时隐式转换。
2 console.log(2 + true);
3 console.log(2 + false);
4 console.log(2 + null);
5 console.log(2 - true);
6 console.log(2 * false);
7 console.log(false / 2);
 
l undefined参与数学运算时。

1 console.log(2 + undefined);
2 console.log(2 - undefined);
3 console.log(2 * undefined);
4 console.log(2 / undefined);
5 console.log(2 % undefined);
 
 
 
l 非纯数字字符串参与运算时,得到的结果是NaN(加法除外)

1 // 非纯数字字符串参与时,得到的结果都是NaN加法除外
2 console.log(2 + "你好");
3 console.log(2 - "你好");
4 console.log(2 * "你好");
5 console.log(2 / "你好");
6 console.log(2 % "你好");
 

1.2 Math对象

Math对象是js内置的一个功能非常的强大的数学对象。具有很多属性和方法。
l Math.random() 得到的是0-1之间的随机数[0,1)。

1 console.log(Math.random());
 
l Math.pow(num,power) 幂的方法   第一个参数num表示底数,第二个参数power表示指数。

1 console.log(Math.pow(4,3));
 
l Math.sqrt(num) 开方的计算  num表示要开方的数。

1 console.log(Math.sqrt(64));
 
l Math.PI  属性得到的结果是π

1 console.log(Math.PI);
 

1.3 比较运算符

>   大于
<   小于
>= 大于等于
<= 小于等于
== 等于
=== 全等于
!= 不等于
!== 不全等于
 
比较运算符得到的结果都是布尔值(true,false)
l 纯数字参与

1 console.log(7 > 8);
2 console.log(7 < 8);
 
 
l ==  等于,尽可能让两侧的值相等。

1 console.log("12" == 12);
2 console.log(true == 1);
3 console.log(false == 0);
4 console.log(null == 0);
 
l === 全等于,尽可能让两侧的值不相等,不但要判断数值是否相等,还要判断数据类型是否相等。

1 console.log("12" === 12);
2 console.log(true === 1);
3 console.log(false === 0);
4 console.log(null === 0);
5 console.log(12 === 12);
 
l != 不等于,进行判断时,不要直接判断不等于的关系。而是看他的对立面==。当==为真时,!=一定为假;当==为假时,!=一定为真。

1 console.log("12" != 12);
2 console.log(true != 1);
3 console.log(false != 0);
4 console.log(null != 0);
 
l !== 不全等于,进行判断时,不要直接判断不全等于的关系。而是看他的对立面===。当===为真时,!==一定为假;当===为假时,!==一定为真。
 

1 console.log("12" !== 12);
2 console.log(true !== 1);
3 console.log(false !== 0);
4 console.log(null !== 0);
 
l 纯数字的字符串和boolean以及null参与比较运算时,进行隐式转换。(但是需要注意,null在进行==或者是===判断时不等于0)

1 console.log("12" > 8);
2 console.log("10" < 8);
3 console.log(true >= 1);
4 console.log(false <= 1);
5 console.log(null > -2);
6 console.log(null <= 0);
7 console.log(null < 0);
8 console.log(null == 0);
9 console.log(null === 0);
 
l NaN,Infinity,undefined不会进行隐式转换。

1 console.log(undefined > 12);
2 console.log(undefined < 12);
3 console.log(undefined == 12);
4 console.log(undefined === 12);
5 console.log(undefined != 12);
6 console.log(undefined !== 12);
 
l 两边都是非纯数字字符串比较,不是看大小也不是看长短。看字符的Unicode编码。编码顺序越靠后越大。
数字,大写字母,小写字母。
依次每一位的字符编码,如果第一位相等,就再次比较后面的编码。
 

1 // 数字,大小字母,小写字母
2 console.log("12" > "a");
3 console.log("12" < "A");
4 console.log("a" < "A");
5 console.log("black" < "banana");
6 console.log("123" < "4");
 
小练习: 3 > 2 > 1  (false)

1 console.log(3 > 2 > 1);
2 console.log(3 > 2);
3 console.log(true > 1);

1.4 逻辑运算符

一般逻辑运算符值得是布尔值参与的运算。两边都是布尔值参与运算得到的结果也是布尔值。
分类:
逻辑与运算  &&
逻辑或运算  ||
逻辑非运算  !
 

1.4.1 逻辑与运算符&&

真值表
a && b真值表
a b 结果
true true true
true false false
false true false
false false false
总结:逻辑与运算,都真才真,一假则假。
用布尔值验证:

5 console.log(true && true);
6 console.log(true && false);
7 console.log(false && true);
8 console.log(false && false);
 

1.4.2 逻辑或运算||

真值表
a || b真值表
a b 结果
true true true
true false true
false true true
false false false
 
总结:逻辑或运算,一真则真,都假才假。

1.4.3 逻辑非运算!

逻辑非: !
1 console.log(!true);    //false
2 console.log(!false);   //true;
 
1 console.log(!true);
2 console.log(!false);
3 console.log(!!!!!!!!!true);
 
 
l 非布尔值参与逻辑运算时,会进行隐式转换。转换为boolean值参与运算。得到的结果不一定是布尔值。
false:0,NaN,””(空字符串),undefined,null。
true:非0数字(Infinity),非空字符串。

1 console.log(true && "你好");
2 console.log(false && "");
这涉及短路语法。
 

1.5短路语法

①逻辑与&&
将逻辑与比喻成串联电路,判断过程,想象成电流通过的过程。
 
 
 
 
 
 
电流通过:如果a为真,电流能够通过流通到b,结果就是b;如果a为假,电流不能通过,停留在a,结果为a。

1 console.log(true && "你好");
2 console.log(true && 0);
3 console.log("" && 0);
4 console.log(undefined && "hello");
5 console.log("hello" && false);
6 console.log(Infinity && 4);
 
②逻辑或||
将逻辑或比喻成并联电路,判断过程,想象成电流通过的过程。
 
 
 
 
 
 
电流经过时:如果a为真,电流直接从a完成循环,结果为a;如果a为假,电流从a不能经过,流经到b,我们结果是b。

1 console.log("hello" || false);
2 console.log("hello" || true);
3 console.log(false || true);
4 console.log(false || false);
5 console.log("" || 4);
6 console.log(0 || "你好");
7 console.log(NaN || "你好");
8 console.log(Infinity || undefined);
 
 
 
 
 
总结:(逻辑与 && ) 如果a能被转换为false,那么返回a;否则,返回b。
    (逻辑或 || ) 如果a能被转换为true,那么返回a;否则,返回b。
 
逻辑运算顺序:先非,与,最后或。
练习1:false || !false && false || true;

false || !false && false || true;
4 =  false || true && false || true
5 = false || false || true
6 = false || true
7 = true
练习2:4 && "hello" || !false || !true && null;
sum = 4 && "hello" || !false || !true && null;
1     = 4 && “hello”  || true || false && null
2     = “hello” || true || false
3     = “hello” || false
4     = “hello”

1.6 赋值运算符

赋值运算符是赋一个基于它右边操作数值的值给它左边的操作数。最简单的赋值运算符是等于(=),将右边的操作数值赋给左边的操作数。那么 x = y 就是将 y 的值赋给 x。
含义:将右侧的数据运算之后,赋值给左边。
在变量原基础上,进行右侧的运算,将运算的值再赋值给左边的变量。
= 直接赋值,将等号右侧值直接赋值给左侧的变量
+= 加等于
-= 减等于
*= 乘等于
/= 除等于
%= 取余等于
++ 递加
-- 递减
 

1 var a = 10 ;
2 a += 2;//等价于 a = a + 2;
3 console.log(a);//12

5 a -= 2; //等价于 a = a - 2;
6 a *= 2;//等价于 a = a * 2;
7 a /= 2; //等价于a = a / 2;
8 console.log(a);
 
++,可以书写在变量前也可以书写在变量后。再参与运算时,有区别。
++书写在变量前, ++a;表示变量先自加1,用新值参与运算。
++书写在变量后,a++;表示直接使用变量的值参与运算,运算后,在自加1。
 

1 var b = 4;
2 // ++在变量后,使用之前的值参与运算。运算后自加1
3 console.log(b ++);    //4
4 // b = b + 1
5 console.log(b);       //5

7 var c = 4;
8 // ++在变量前,变量先自加1然后使用计算后的值参与运算。
9 console.log(++ c);  //5
10 console.log(c);     //5
 
注意:不管++在前还是在后,之后再使用都是自加的结果。

3 var a = 10 , b = 20 , c = 30;
4 var sum = a ++ + ++ b + ++ c + ++ a;
5 // a ++ 之后在使用a = 11
6 //  再 ++a是 11 + 1 = 12.
7         // = 10 + 21 + 31 + 12
8         // = 74
 

1.7 综合运算

顺序:贴身的(! ++ --)→ 数学 → 比较 → 逻辑 → 赋值
计算:
var a = 4;
var sum = 1 * (2 + 3) && a++ || 5 > 6 && 7 < 8 || 9;
console.log(sum);

sum = 1 * (2 + 3) && a++ || 5 > 6 && 7 < 8 || 9
    =  1 * (2 + 3) && 4 || 5 > 6 && 7 < 8 || 9
= 5 && 4 || 5 > 6 && 7 < 8 || 9
= 5 && 4 || false && true || 9
= 4 || false || 9
= 4 || 9
= 4
练习:
var a = 4;
1 + 2 && 3 * a++ % 5 || 6 < 7 == 8 / !false

9   1 + 2 && 3 * a++ % 5 || 6 < 7 == 8 / !false
10 = 1 + 2 && 3 * 4 % 5 || 6 < 7 == 8 / true
11 = 3 && 2 || 6 < 7 == 8
12 = 3 && 2 || true == 8
13 = 3 && 2 || false
14 = 2 || false
15 = 2
 

二、北京html5培训流程控制语句

js 中执行顺序是从上到下。我们可以通过流程控制语句改变js语句的执行顺序,让某些语句先执行,某语句不执行。
通过条件来控制语句的执行顺序。
  条件分支语句分类:if语句,三元表达式,switch语句。

2.1 if语句

l 结构:if ……else …… 如果……否则……
9 if(条件表达式){
10      当满足条件表达式时,执行的结构体
11 }else{
12      不满足条件表达式时,执行的结构体
13 }
 
条件表达式:条件表达式自行进行判断,返回结果是true,false。
结构体:就是js书写的许多语句。用{}包裹。

1 var a = parseInt(prompt("请输入你这次考试的成绩"));
2 if(a >= 60){
3 alert("考试及格");
4 }else{
5 // 隐含含义a < 60
6 alert("没有及格");
11 }
当score >= 60是true,执行if语句后面的结构。当条件表达式为false,执行else后面的结构体。
 
l else可以省略。当不满足条件表达式时,直接跳出if语句,执行if语句后面的其他js语句。

1 if(score >= 60){
2 alert("考试及格");
3 }
4 alert("谢谢你参与这次考试");
l 如果结构体只有一条语句,可以省略不写大括号(但是要求大家书写大括号)
7 var a = parseInt(prompt("请输入你这次考试的成绩"));
8 if(a >= 60)
9 alert("考试及格");
10 else
11 alert("没有及格");
12 alert("谢谢你参与这次考试");
 
l 多分支的if语句
if(){
}else if(){
}else if(){
}……
else{}
多分枝的if语句可以书写多个else if语句

1 if(条件表达式1){
2    当满足条件表达式时,执行的结构体;
3 }else if(条件表达式2){
4     不满足条件表达式1,满足条件表达式2执行的结构体
5 }else if(条件表达式3){
6     不满足条件表达式1,不满足2,满足条件表达式3执行的结构体
7 }……
8 else{
9     前面所有的条件式都不满足时,执行的结构体。
10 }
 
1 var a = parseInt(prompt("请输入你这次考试的成绩"));
2 if(a >= 90){
3 alert("优秀");
4 }else if(a >= 80){
5 // 隐含含义a < 90
6 alert("良好");
7 }else if(a >= 60){
8 alert("及格");
9 }else{
10 // 隐含含义a < 60
11 alert("继续努力");
12 }
注意:多分支的if只会执行一个结构体。
多分支的if语句也可以省略不写else。当前面条件都不满足时,跳出if语句,执行后面的语句。

1 if(a >= 90){
2 alert("优秀");
3 }else if(a >= 80){
4 // 隐含含义a < 90
5 alert("良好");
6 }else if(a >= 60){
7 alert("及格");
8 }
9 alert("谢谢参与考试");
10 alert("这是后面的语句");
 
殊途同归:if语句后面的语句,不管if语句是否执行都会输出if后面的语句。

1 if(a >= 90){
2 alert("优秀");
3 }else if(a >= 80){
4 // 隐含含义a < 90
5 alert("良好");
6 }else if(a >= 60){
7 alert("及格");
8 }else{
9 // 隐含含义a < 60
10 alert("继续努力");
11 }
12 alert("谢谢参与考试");
13 alert("这是后面的语句");
 
跳楼现象:多分支的if语句,只会执行一次结构体,表示不满足前面所有的条件表达式。执行之后不会反复执行,直接跳出if语句。
经典案例:

1 var a = parseInt(prompt("请输入一个小于10的正整数"));
2 if(a <= 3){
3 a += 2;
4 }else if(a <= 5){
5 a += 3;
6 }else if(a <= 8){
7 a ++;
8 }else{
9 a += 5;
10 }
11 console.log(a);
当输入一个2满足a <= 3执行 a += 2;不再看后面的条件表达式,直接跳出if语句。
总结:多分支的if语句,有跳楼现象,只会执行一次结构体。
可以有多个else if但是只能有else
l if语句的嵌套
if语句中的结构体中还可以嵌套一个if语句。

1 var sex = prompt("请输入你的性别");
2 var age = parseInt(prompt("请输入你的年龄"));

4 if(sex == "男"){
5 // 男的22才结婚
6 if(age >= 22){
7 alert("可以");
8 }else{
9 alert("不可以");
10 }
11 
12 }else{
13 if(age >= 20){
14 alert("可以");
15 }else{
16 alert("不可以");
17 }
18 }

2.2 三元表达式

三元表达式也叫三元运算符。是唯一一个需要三个元素参与的表达式。
语法 : 表达式 ? 值1 : 值2
表示当表达式是true时取值1;当表达式为false时,取的是值2。
 

1 var a = 6 < 7 ? 1 : 2;
2 console.log(a);   //1
 
三元表达式也是条件分支语句,可以改写成if语句。

1 var a = true ? 1 : 2;
2 console.log(1);

4 var a = true;
5 if(a){
6 console.log(1);
7 }else{
8 console.log(2);
9 }
 
应用:当变量进行赋值时是2选1的情况。使用三元表达式非常简单。
 
当工作年限为不满1年,工资小于8000,年终奖为工资倍数的1倍,否则是1.2倍;
当工作年限为不满2年,工资小于10000,年终奖为工资倍数的1.5倍,否则是1.7倍;
当工作年限为超过2年,工资小于13000,年终奖为工资倍数的2.3倍,否则是3倍;

1 var year = parseInt(prompt("请输入工作年限"));
2 var salary = parseInt(prompt("请输入月薪"));
3 var beishu = 0;
4 if(year == 0){
5 beishu = salary < 8000 ? 1 : 1.2;
6 }else if(year == 1){
7 beishu = salary < 10000 ? 1.5 : 1.7;
8 }else{
9 beishu = salary < 13000 ? 2.3 : 3;
10 }
11 console.log("你的年终奖是" + beishu * salary);
 

爱创课堂是一家专门做前端培训的机构,由百度高级工程师,<javascript设计模式>作者张容铭老师亲自授课,全程20个项目实战。我们前端课程的五大优势:
1. 名师亲自授课,课程无缝隙对接企业
2. 免费学习一周
3. 签订就业协议,目前学员平均就业薪资12K
4. 采取小班教学模式(一个班20—30人)
5. :与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
 
扫描下方二维码或搜索微信公众号:icketang  
关注并回复:js  领取 js基础全套视频教程+课堂笔记+案例

 
访问:http://www.icketang.com/获取更多信息。