运算符和关系表达式 逻辑运算符和逻辑表达式 运算符优先级 js转义符(了解) null与undefined比较 NaN与isNaN 字符串比较 数据类型转换 流程控制"/>
关系运算符和关系表达式 逻辑运算符和逻辑表达式 运算符优先级 js转义符(了解) null与undefined比较 NaN与isNaN 字符串比较 数据类型转换 流程控制
01-运算符与表达式
1.1-关系运算符和关系表达式
- 1.关系运算符：八种
-
>：大于，左边大于右边 -
<：小于，左边小于右边 -
>=：大于等于，左边大于或者等于右边 -
<=：小于等于，左边小于或者等于右边 -
==：等于，左边等于右边 -
!=：不等于，左边不等于右边 -
===：全等，左边等于右边且类型一致 -
!==：不全等，左边不等于右边或者类型不一致
-
<script>/**1.关系运算符（比较运算符）：比较两个数据之间的关系（某种条件是否成立）* 八种： > >= < <= == != ===全等 !== 不全等* 2.关系表达式：由关系运算符组成的式子 例如: 2 > 1* 只要是表达式，就会有运算结果* 3.关系表达式的结果一定是布尔类型：true代表成立，false代表不成立*///1.基本使用console.log ( 5 > 3 );//true 成立console.log ( 100 < 1 );//false 不成立//2.相等与不等:只比较数据的值，不比较数据的类型//注意：一个 = 号表示赋值运算符 两个 == 是比较运算符，它们作用不一样，不要搞混淆了console.log ( 1 == 1 );//true 常用console.log ( "1" == 1 );//true 他们的值一样，只是数据类型不一样//3.全等不全等： 先比较数据的值，再比较数据的类型console.log ( "1" === 1 );//false 两者的值虽然相等都是1，但是他们数据类型不一样，所以不成立</script>
1.2-逻辑运算符和逻辑表达式
- 1.逻辑运算符：三种
- &&：逻辑与 ，读作并且
- ||：逻辑或，读作或者
- !：逻辑非，读作取反
- true（真）变false（假），false（假）变true（真）
- 2.逻辑表达式：表达式1 逻辑运算符 表达式2
- 3.运算口诀
- 逻辑与表达式&&：一假则假
- 左右两边同时成立，才为真，否则为假
- 例如：有为青年找女朋友： 白富美：既要白，又要富，还要美。多个条件需要同时成立
- 左右两边同时成立，才为真，否则为假
- 逻辑或表达式||：一真则真
- 左右两边同时为假，才为假，否则为真
- 例如：小资青年找女朋友：要么白，要么富，要么美。多个条件任意一个成立即可
- 左右两边同时为假，才为假，否则为真
- 逻辑非!：取反
- 例如：屌丝青年找女朋友：女的。 非xxxx类似于一种否定逻辑
- 逻辑与表达式&&：一假则假
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body></body><script>/* 0.关系运算符：某种条件的关系（成立/不成立），例如我的年龄大于你的年龄30>201.逻辑运算符：多个条件之间的关系2.逻辑运算符只有三种* && :逻辑与 ，读作并且* || :逻辑或，读作或者* ! :逻辑非，读作取反* true（真）变false（假），false（假）变true（真）* 3.逻辑表达式: 表达式1 逻辑运算符 表达式2 *///1.逻辑与&&结果： 一假为假 （左右两边同时成立，才为真，否则为假）//表达式1 && 表达式2 运算结果//真 真 真//真 假 假//假 真 假//假 假 假console.log ( 100 > 50 && 10 > 9 ); //true 左右两边同时成立console.log ( 100 > 500 && 10 > 9 ); //false 因为左边不成立//普通丈母娘找女婿 ： 有车 有房 有存款 三个条件都要满足，缺一不可 //2.逻辑或 ||结果 : 一真则真 （左右两边同时为假，才为假，否则为真）//表达式1 || 表达式2 运算结果//真 真 真//真 假 真//假 真 真//假 假 假console.log ( 100 > 500 || 10 > 9 ); //true 只要有一边为真则为真console.log ( 100 > 500 || 8 > 9 ); //false 只有两边都不成立才为假//我的丈母娘找女婿 ：要么有车 要么有房 要么有存款 三个条件满足任何一个即可//3.逻辑非！ ： 又叫做取反 真变假 假变真// ！ 表达式 结果// 假 真// 真 假let res = !false;console.log ( res ); //true 假变真，真变假console.log ( ! ( 2 > 1 ) ); //false 2>1的结果是true 与true相反的就是false//有的丈母娘找女婿 ：只要不是外地的。 `非xxxx`类似于一种否定逻辑</script></html>
1.3-运算符优先级
- 不需要刻意的去记，因为开发中很少会遇到多个运算符参与的式子，万一遇到也可以通过()来提升优先级
- 运算符优先级：确定不同运算符的运算规则
- 1.() 小括号：优先级运算符 作用就是提升优先级：不被拆散
- 2.自增与自减
- 3.算术运算符（先乘除后加减）
- 4.比较运算符
- 5.逻辑运算符
- 6.赋值运算符
- 同级运算符从左往右运算
<script>let res = 3 + 2 - 5 * 0;console.log ( res );//5/**运算符优先级：确定不同运算符的运算顺序* 1.() 小括号：作用就是提升优先级* 2.自增与自减* 3.算术运算符（先乘除后加减）* 4.比较运算符* 5.逻辑运算符* 6.赋值运算符*/</script>
课堂小菜
let num = 2;
let res = num++ * (++num + num - num--); //2 *(4 + 4 - 4) num3
// ++或--这种自操作：在一个表达式中有多个的情况下，会互相影响（前面影响后面）
//1.先算num++,后置：先运算后自增 2 * (++num + num - num--),此时num会变成3
//2.括号提升了优先级：所以先算括号里面的 2 * (4 + num - num--) : num前置：先自增，后参与运算：3-=》4,num == 4
//3.+和-同级：先算左边 2 * (4 + 4 - num--) :num == 4
//4.后置--：先参与运算，后自减 2 * (4 + 4 - 4) : num == 3console.log(res, num); // 8 3
1.4-js转义符(了解)
- 转义符： \ 改变原来符号的作用就叫转义符
<script>
/*** 转义符： `\` 改变原来符号的作用就叫转义符* \" :输出双引号* \t:水平制表符，说人话就是多打几个空格* \n:换行符* \\:显示一个\**/console.log ( "出来混了\\那么多年，从最开始的3万，到后来的五万，最后十五万，\n我也\"没有\"想到\t我最后会欠这么多钱");//出来混了\那么多年，从最开始的3万，到后来的五万，最后十五万，
//我也"没有"想到 我最后会欠这么多钱// 重点：记住单引号里面要使用单引号需要转义，双引号里面使用双引号需要转义
</script>
02-数据类型比较
1.1-null与undefined比较
- undefined与null的区别，两个都表示什么都没有
- null == undefined：成立，他们的值都是空
- null === undefined：不成立，他们的值相等但是数据类型不同
<script>/*JS总共有六种数据类型，其中五种基本数据类型，一种复杂数据类型*（1）null与undefined有什么区别* null == undefined 成立* null === undefined 不成立*///1.null与undefined的区别：需要记忆console.log ( null == undefined );//true 他们的值都是空console.log ( null === undefined );//false 他们的值相等 但是数据类型不同</script>
1.2-NaN与isNaN
- 1.NaN：Not a Number 不是一个数字
- （1）NaN是number数据类型中一个特殊的数值，是数学计算错误得到的一个结果
- 例如： ‘张三’ - 100,在数学上这是一种错误的计算，它的结果就是NaN
- （2）NaN与任何数字都不等，包含它本身
- （3）NaN与任何数字计算得到的都是NaN
- （1）NaN是number数据类型中一个特殊的数值，是数学计算错误得到的一个结果
- 2.isNaN(数据)：检测一个数据是不是NaN 得到的结果是布尔类型
- 例如：isNaN(NaN),结果为true
- 例如：isNaN(123),结果为false，表示123不是NaN
- 3.了解：number类型浮点数（小数）精度丢失问题
- （1）小数在进行数学计算时，会有一定的误差，这是计算机本身的bug，不仅是js语言，其他语言也有这个问题
- （2）解决方案：不要让两个小数比较大小，这种情况一般不会影响正常开发
<script>/*NaN: not a number 不是一个数字* 1.NaN是number数据类型中一个特殊的数值，是数学计算错误得到的一个结果* 2.NaN与任何数字都不相等，包括它的本身* 3.NaN与任何数字计算得到的都是NaNisNaN(数据):判断一个数据是不是NaN，结果为布尔类型 true：是 false:不是*///1.NaN:not a number 不是一个数字//NaN是number数据类型中一个特殊的数值，是数学计算错误得到的一个结果let num = '张三' - 100;//当某个表达式无法计算（计算错误时），会得到NaNconsole.log ( num ); //NaNconsole.log ( typeof NaN ); //number//2.NaN与任何数字都不等，包含它本身console.log ( NaN == 0 ); //falseconsole.log ( NaN == NaN ); //false//3.NaN与任何数字计算得到的都是NaNconsole.log ( NaN + 100 ); //NaN//4.isNaN(数据)：检测一个数据是不是NaN 得到的结果是布尔类型console.log ( isNaN ( NaN ) ); //trueconsole.log ( isNaN ( 123 ) ); //false//如果检测的数据不是number类型，js编译器会尝试着将这个数据转化为number类型，然后再判断//这种数据类型转换称为隐式转换：下一小节讲解console.log ( isNaN ( "abc" ) ); //true//5.number浮点数（小数）精度丢失//小数在进行数学计算时，会有一定的误差，这是计算机本身的bug，不仅是js语言，其他语言也有这个问题//解决方案：不要让两个小数比较大小，这种情况一般不会影响正常开发console.log ( 0.1 + 0.2 ); //0.300000000000004console.log ( 0.1 + 0.2 == 0.3 ); //falseconsole.log ( 0.4 + 0.5 ); //0.9console.log ( 1.1 - 0.2 ); //0.9000000000000001
</script>
1.3-字符串比较
- 1.字符串比较规则是按照字母的顺序挨个进行比较，与字符串长度无关
- 2.字符串比较区分大小写
<script>/*1.字符串比较规则，按照字母的顺序，挨个比较2.字符串的比较与长度无关3.字符串的比较区分大小写*/// 字符串的比较是挨个比较对应顺序位置的字母，与长度无关console.log('abc' > 'b'); // false，a比d小，所以abc比d小// 字符串的比较区分大小写，小写大于大写（与ASCII码表对应）console.log('a' > 'A'); // true，a对应ASCII码表为97，A为65
</script>
03-数据类型转换
1.1-显式数据类型转换
- 注意：数据类型的转变并不会改变原来变量的值，而是会产生一个新的值
- 例如：（1） let num = ‘10’;
- parseInt(num) ：
- 为什么要有数据类型转换？
- 有时候想要进行某种计算的时候，由于数据类型不同往往会产生一些错误的结果，为了避免这种结果，我们需要将某种数据类型转化为其他数据类型
- 例如：prompt()输入框得到的数据的类型是string，如果想要进行数学计算则需要转成number类型，否则会计算出错
- 有时候想要进行某种计算的时候，由于数据类型不同往往会产生一些错误的结果，为了避免这种结果，我们需要将某种数据类型转化为其他数据类型
- 什么是显示类型转换：程序员主动转换（可以理解为使用关键字来转换）
- 这种方式代码易读性更高
1-其他类型转换成number类型
<script>/**转换成number* 第一种方式：`parseInt()`* * 作用：转换整数* * 从左往右解析，遇到非数字结束（停止解析），将解析好的整数返回* * 如果第一个字符不是数字或者符号就返回NaN* 第二种方式：`parseFloat()`* * 作用：转换小数* * 与parseInt()最大的区别就是可以解析字符串的第一个小数点* 第三种方式: `Number()`* 作用：布尔类型转换成数字 * * 可以把任意值转换成数值，如果要转换的字符串只要有一个不是数字，返回NaN*/console.log ( Number ( "123" ) );//123console.log ( Number ( "123.1.1abc" ) ); //NaN 只要有一个字符不是数字，得到就是NaNconsole.log ( parseInt ( "123.1.1abc" ) ); //123 从左往右解析，遇到非数字结束console.log ( parseFloat ( "123.1.1abc" ) );//123.1 与parseInt唯一的区别就是可以识别第一个小数点//一般数字字符串使用parseInt和parseFloat，其他数据类型转数字使用Number（）console.log ( Number ( true ) ); //1布尔类型转换number会得到数字0(false)和1（true）console.log ( Number ( "" ) ); //0 空字符串转number会得到0//js基础面试题可能会遇到console.log(Number(undefined)); //NaNconsole.log(Number(null)); //0
</script>
2-其他类型转换成string类型
- 1.第一种方式：变量名 .toString()
- 如果变量的值为undefined或者null，则会报错
- 2.第二种方式：String(变量名)
- 与第一种方式的唯一区别就是如果变量的值为undefined或者null不会报错，会得到undefined或者null
<script>/**转换成字符串string* 第一种方式：`变量名.toString()`* * 如果变量的值为undefined或者null，则会报错* 第二种方式：`String(变量名)`* * 与第一种方式的唯一区别就是如果变量的值为undefined或者null不会报错，会得到undefined或者null*/let a = null;//1.常用： String ( )//特点：可以识别undefined与nullconsole.log ( String ( null ) );console.log ( typeof String ( a ) );// //2. 变量名.toString ()//特点：无法识别undefined与null，程序会报错console.log ( a.toString () );
</script>3-其他类型转换成boolean类型
- 只有一种方式： Boolean(变量名)
- 官网文档中有八种情况得到的false：0、-0、null、false、NaN、undefined、或者空字符串（""）、 document.all（js下个阶段会接触的东西）
- 其他一切均为true
- 关于Boolean（）描述
<script>/**转换成boolean* 只有一种方式: `Boolean(变量名)`* * 以下八种情况会得到false，其余的一切数据得到都是true* * 数字0、-0、null、false、undefined、空字符串”“、NaN*/console.log ( Boolean ( 0 ) ); //falseconsole.log ( Boolean ( -0 ) ); //falseconsole.log ( Boolean ( null ) ); //falseconsole.log ( Boolean ( false ) ); //falseconsole.log ( Boolean ( undefined ) ); //falseconsole.log ( Boolean ( '' ) ); //falseconsole.log ( Boolean ( NaN ) ); //false
</script>
1.2-隐式数据类型转换
显式转换：程序员主动调用语法去转换数据类型，语义更加明确
隐式转换：运算符两边数据类型不一致，编译器自动帮我们转换一致在计算，这是js的语法特点
- 隐式转换
- 1.转成string类型：+号两边如果有一边是字符串，则会把另一边转换成字符串，然后进行拼接
- 2.转成number类型：以下几种运算符会将任何数据转换成number类型再运算，如果无法转换则为NaN
- 数学正号 ： +num
- 当 +/-号写在一个变量名的前面，此时表示数学的正/负数
- 自增自减（++ --）
- 算术运算符（+ - * / %）
- 比较运算符(> < >= <= == != === !==)
- 说明：全等与不全等会先比较值（此时会隐式转换再比较），然后再比较数据类型
- 数学正号 ： +num
- 3.转成boolean类型：逻辑非（！）会将任何数据转为boolean类型再运算
- 4.+号有三种含义：数学正负号（转成number）、算术运算符（转成number）、字符串连接符（转成string)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* 1. 显式转换 ： 程序员主动使用语法来转换（阅读性最高）2. 隐式转换 ： 如果运算符两边数据类型不一致，编译器偷偷的帮我们转成一致再计算。(1)其他数据类型转number :数学正号 : +num自增自减： ++ -- 算术运算符： + - * / %关系运算符 : > < >= <=(2)其他数据类型转string : +(3)其他数据类型转boolean : !*/console.log('100' - 1); // Number('100') - 1 = 100 - 1 = 99//1.其他数据类型转number :// 数学正号 : +num// 自增自减： ++ -- // 算术运算符： + - * / %console.log(+'10'); // Number('10')console.log('张三' - 100); // Number('张三') - 100 = NaN - 100 = NaNconsole.log(10 - '1'); // 10 - Number('1') = 10 - 1 = 9//2. 其他数据类型转string : +console.log('1' + 1); //'1' + String(1) = '1' + '1' = '11'/* 容易混淆点 ： 把算术运算符 + 转换规则 与 连接符 + 转换规则搞混淆*/console.log('1' + true); //1true 连接符 ‘1’ + String(true) = '1' + 'true' = '1true'console.log(1 + true); //2 算术运算符 1 + Number(true) = 1 + 1 = 2console.log(1 + undefined); //NaN 算术 1 + Number(undefined) = 1 + NaN = NaNconsole.log(1 + null); //1 算术 1 + Number(null) = 1+ 0 = 1console.log('1' + null); //1null 连接 '1' + String(null) = '1' + 'null' = '1null'//其他数据类型转boolean : !//取反 ： true变false false变trueconsole.log(!1); //(1)!Boolean(1) = !true = falseconsole.log(!!''); //(1)!!Boolean('') (2)!!false (3)!true = false//课堂小彩蛋 ： 经典js面试题
console.log(undefined + null); // NaN
console.log(undefined - null); // NaN
console.log(undefined - undefined); // NaN
console.log(null - null); //0 </script>
</body>
</html>
04-流程控制
- 编程语言都有三大流程控制结构
- 顺序结构：代码从上往下顺序执行
- 分支结构：代码选择执行
- 循环结构：代码重复执行
05-分支结构
分支结构作用：代码根据条件执行
- 为什么要有分支结构？
- 现实世界中，我们在做某些事情的时候是有前提条件的，例如：我今天考试了，考的好与坏与回家的状态不一样的？
- 考的好：回家有赏
- 靠的不好：回家有伤
- 现实世界中，我们在做某些事情的时候是有前提条件的，例如：我今天考试了，考的好与坏与回家的状态不一样的？
1.1-if单分支结构
- 1.if结构语法：if(条件 true/false){ 条件成立时需要执行的代码 }
- 2.if结构补充说明：
- 1.大括号中可以是任何代码，不限数量
- 2.如果大括号中代码有且只有一行，则可以省略大括号。这种写法代码不规范，不是老司机的作风
- 3.注意点:小括号中的条件可以是哪些呢
- (1)关系表达式：结果一定是布尔类型
- (2)布尔类型的值：true和false
- (3)其他表达式和值：都会先转换成布尔类型再判断真和假
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>//1.默认情况下，代码是从上往下执行的（顺序结构）console.log ( "我今天考试了" );console.log ( "我回家了" );console.log ( "爸爸打了我一顿" );console.log ( "我睡觉了" );//需求：考试不及格爸爸才打我，及格了就不打//2.if分支结构：根据条件来执行代码/**if结构语法if ( 条件 true/false ){条件成立时需要执行的代码}*///示例1if(1>0){console.log ( "我被执行了" );}console.log ( "111" );//只有大括号内的代码才是根据条件执行的，大括号后面的代码还是顺序执行//需求实现let score = 80;console.log ( "我今天考试了" );console.log ( "我回家了" );if(score < 60){console.log ( "爸爸打了我一顿" );}console.log ( "我睡觉了" );//注意点：小括号中的条件可以是哪些呢/*(1) [通常]关系表达式：结果一定是布尔类型(2) 布尔类型的值：true和false(3) 其他表达式和值：都先转换成布尔类型再判断真会和假*/let num = 10;if(num){//num是10，转换成布尔类型是true，所以会执行大括号代码alert('num满足了条件');}</script>
</body>
</html>
1.2-if-else双分支结构
if（条件）{条件成立时需要执行的代码
}else{条件不成立时需要执行的代码
}
- 1.if-esle结构语法:用于两种互斥的条件判断
- 例如：如果(if)我的钱超过100块就洗脚(也就是说钱>=100)，否则(else)不洗脚（也就是说钱<100）
- 2.if-else结构注意点
- if大括号中的代码与else大括号的代码只会执行一个，不会同时执行
- if-else语句的作用主要就是为了提高代码的运行效率,虽然可以用两个if语句来代替if-else语句，但是两个if语句需要判断两次，而if-else只需要判断一次
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body><script>//需求：(1)如果不及格，爸爸就打我 (2)如果及格，爸爸给我买奥迪//1.用if实现let score = 80;console.log ( "我今天考试了" );console.log ( "我回家了" );if(score >= 60){//及格console.log ( "爸爸给我买了一辆奥迪" );}if(score < 60){//不及格console.log ( "爸爸打了我一顿" );}console.log ( "我睡觉了" );//2.if-else结构：用于两个互斥的条件//优点：只需要一次判断/*语法if(条件){条件成立时需要执行的代码}else{条件不成立时需要执行的代码}if-else结构注意点：if大括号中的代码与else大括号的代码一定会执行一个，不会同时执行*/score = 80;console.log ( "我今天考试了" );console.log ( "我回家了" );if(score >= 60){//及格console.log ( "爸爸给我买了一辆奥迪" );}else{//不及格console.log ( "爸爸打了我一顿" );}console.log ( "我睡觉了" );//if-else结构注意点：if大括号中的代码与else大括号的代码一定会执行一个，不会同时执行//世界上最遥远的距离不是生与死，而是我在if里，你在esle里，看起来那么近却永远不能在一起if(5 > 3){alert('执行了if中的语句')}else{alert('执行了else中的语句');}
</script>
</html>
1.3-if-else if-else多分支结构
-
1.if-else if-else结构语法：
if(条件1){
条件1成立时需要执行的代码
}else if(条件2){
条件2成立时需要执行的代码
}else if(条件3){
条件3成立时需要执行的代码
}else{
以上所有条件都不成立时需要执行的代码
} -
2.注意点：
- (1) if-else if -else结构中必须以if开头，中间的else if可以是多个，末尾的else可以省略（一般都不会省略）
- (2)if-else if-else语句中所有的大括号中的代码只会执行其中一个，不会执行多个
<script>//需求：(1)如果不及格，爸爸就打我 (2)如果60-70，爸爸给我买奥迪 （3）如果70-80分，爸爸给我买保时捷//(4)如果超过80分，爸爸给我买法拉利/*** if-elseif-else结构语法：用于多种条件判断if(条件1){条件1成立时需要执行的代码}else if(条件2){条件2成立时需要执行的代码}else if(条件3){条件3成立时需要执行的代码}else{以上所有条件都不成立时需要执行的代码}* 注意点：* (1) if-else if -else结构中必须以if开头，中间的else if可以是多个，末尾的esle可以省略（一般都不会省略）* (2)if-else if-else语句中所有的大括号中的代码最多只会执行一个，不会执行多个*/let score = 50;console.log ( "我今天考试了" );console.log ( "我回家了" );if(score >= 80){console.log ( "爸爸给我买了一辆法拉利" );}else if(score >= 70){ //隐藏条件: score < 80console.log ( "爸爸给我买了一辆保时捷" );}else if(score >= 60){ //隐藏条件: socre < 70console.log ( "爸爸给我买了一辆奥迪" );}else{ //隐藏条件： score < 60console.log ( "爸爸打了我一顿" );}console.log ( "我睡觉了" );</script>
更多推荐
关系运算符和关系表达式 逻辑运算符和逻辑表达式 运算符优先级 js转义符(了解) null与undefined比较 NaN与isNaN 字符串比较 数据类型
发布评论