一、运算符
1.1 算术运算符
算术运算符用来执行数学运算。
生活中常见的算术运算符有: + – * / %(取模,取余数)
// 表达式分为运算元和运算符
//JS中算术运算符:+ - * / % ++ --
// + 除字符串类型外参与的运算,执行数学运算 true隐式转换成数字 1 进行数学运算 false和null隐式转换成 0进行数学运算
console.log(10 + 20);//30
console.log(10 + 4.6);//14.6
console.log(10 + true);//11
console.log(10 + false);//10
console.log(10 + null);//10
console.log(10 + undefined);//NaN
// + 作为正号进行运算
console.log(+10);//10
console.log(+ "10");//10 可以转换数字字符串
console.log(+ "10ab");//NaN
console.log(+ true);//1
console.log(+ false);//0
console.log(+ null);//0
console.log(+ "");// 0 空字符串转为0
console.log(+ undefined);//NaN
// + 字符串参数与的多元运算,属于字符串拼接
console.log(10 + "");// "10" "string"
console.log(10 + "10");//"1010"
console.log("10" + 10);//"1010"
console.log("10" + true);//"10true"
console.log("10" + false);//"10false"
console.log("10" + null);//"10null"
console.log("10" + undefined);//"10undefined"
console.log("10" + NaN);//"10NaN"
// - * / % true隐式转换成数字 1 进行数学运算 false和null隐式转换成 0进行数学运算 undefined参与的都是NaN
console.log(10 - 5);//5
console.log(0.3 - 0.1);//0.19999999999999998
console.log(10 * "10");// 100 number 除了 + 之外的其它数学运算,字符串或者其它非数值类型都会隐式转为数值类型进行运算
console.log(10 * "10abc");// NaN number
console.log(10 - "");// 10
console.log(10 - false);// 10
console.log(10 / true);// 10
console.log(10 / null);// Infinity 无穷大
console.log(10 / undefined);// NaN
console.log(10 % null);// NaN
“+” 运算可以作为:加法运算、正号、字符串参与的运算作为字符串拼接
上面这些运算符同样适用于程序执行数学运算,在JS中除了上面几个,还有其它算术运算符: ++(自增) –(自增)
// 前++ 前--
var a = 1,
b = a;
console.log("a:",a,"b:",b);//a: 1 b: 1
--a;// --a ===> a = a - 1
++b;// ++b ===> b = b + 1
console.log("a:",a,"b:",b);//a: 0 b: 2
a = --a;
console.log("a:",a,"b:",b);//a: -1 b: 2
var c = ++b;
console.log("a:",a,"b:",b,"c:",c);//a: -1 b: 3 c:3
// 后++ 后--
var i = 1,
j = i;
console.log("i:",i,"j:",j);//i: 1 j: 1
i--;// i-- ===> i = i - 1
j++;// j++ ===> j = j + 1
console.log("i:",i,"j:",j);//i: 0 j: 2
//总结:根据实践结果,在自身操作前++和后++ 前--和后--问题上,没有什么区别
//第三方变量参与时,就不同了,如下观察结果
var s = j++;// 1. 先赋值 2. 再加加
console.log("i:",i,"j:",j,"s:",s);//i: 0 j: 3 s:2
i = i--;//这种方式只有面试的时候脑残面试官才会出这样的问题
console.log("i:",i,"j:",j,"s:",s);//i: 0 j: 3 s:2
//数学中的运算顺序:先乘除后加减
//程序中的运算同样是有顺序的:如上面的算术运算符,优先级 前++、前--、正负号(+ -) >> * / % >> + - >> 赋值运算符 = >> 后++ 后--
**练习:**使用 prompt() 方法提示用户输入两个数字,对这两个数字进行加法运算并打印求和结果。
如:用户输入 10 和 20这两个数字,求和后 结果为 30
1.2 比较运算符
比较运算符也叫关系运算。
比较运算符比较的结果是一个布尔值。
比较运算符有: > = (全等于) !(全不等于)
//纯数值进行比较 按照值得大小
console.log(10 > 20);//false
console.log(3.14 == Math.PI); //false
//数值和其它基本数据类型进行比较 将其它类型转为数值类型进行运算
console.log(10 > "5");//true
console.log(10 > "10ab");//false
console.log(10 = 10);//true 等价于 判断10大于10 或者 10等于10吗?
console.log(null === null);//true
console.log(undefined === undefined);//true
console.log(NaN === NaN);//false
console.log(Infinity === Infinity);//true
console.log(null == undefined);//true ES3中,才新增undefined数据类型,这个数据类型衍生自null 所以在比较值的时候他们是相同的
console.log(null === undefined);//false 数据类型不同 null数据类型为"object" undefined数据类型为"undefined"
//数字字符串之间的比较 按照ASCII码从左向右逐个进行比较表进行比较 ASCII码表中 0-9 对应的 ASCII值 48-57
console.log("24" > "15");//true
console.log("10" > "5");//false
console.log("234" > "25");//false
**练习:**使用prompt()提示用户输入两个数字,利用比较运算符比较其值大小
例如:用户输入 a = 150 和 b = 18, 那么a >= b 比较的结果是 true
1.3 逻辑运算符
用来进行逻辑运算,运算符有: & && | || ! (逻辑非)
①逻辑与&&
将逻辑与比喻成串联电路,判断过程,想象成电流通过的过程。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q3ehsjE9-1687653616765)(02 运算符 与 Math对象.assets/image-20201228160908860.png)]
电流通过:如果a为真,电流能够通过流通到b,结果就是b;如果a为假,电流不能通过,停留在a,结果为a
②逻辑或||
将逻辑或比喻成并联电路,判断过程,想象成电流通过的过程。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ddRXG2U-1687653616766)(02 运算符 与 Math对象.assets/image-20201228160957966.png)]
电流经过时:如果a为真,电流直接从a完成循环,结果为a;如果a为假,电流从a不能经过,流经到b,我们结果是b。
真值表
逻辑与 && 运算:两边都为真才是真,有一个为假则为假。
a | b | a && b 结果 |
---|---|---|
true | true | true |
true | false | false |
false | true | false |
false | false | false |
逻辑或 || 运算:有一个为真即为真,两边都为假结果才为假
a | b | a || b 结果 |
---|---|---|
true | true | true |
true | false | true |
false | true | true |
false | false | false |
//逻辑运算符:逻辑与(& &&)同时满足才满足 逻辑或(| ||)只要有一个满足即满足 逻辑非(!)
console.log(true);//true
console.log(!true);//false
console.log(10);//10
console.log(!10);//false
console.log(-10);//-10
console.log(!(-10));//false
console.log(0);//0
console.log(!0);//true
//除了0之外的所有数字,进行逻辑非操作,得结果都是 false
console.log("hello");//"hello"
console.log(!"hello");//false
console.log("");// ""
console.log(!"");//true
//非空字符串进行逻辑非操作,所得结果都是false
console.log(null);//null
console.log(!null);//true
console.log(undefined);//undefined
console.log(!undefined);//true
console.log(NaN);//NaN
console.log(!NaN);//true
// && 和 || 具有短路效果,可以提高程序的执行效率 短路效果解释:
//逻辑与 两边同时满足才满足
//当第一个值是true的情况下,第二值决定最终结果
console.log(true && false);//false
console.log(true && true);//true
//当第一个值不成立,那么使用 && 的情况下,就不需要在进行后面的判断就能直接得出结果不满足
console.log(false && true);//false
//逻辑或 有一个满足即满足
//当第一个值是false的情况下,第二个值决定最终结果
console.log(false || true);//true
console.log(false || false);//false
//当第一个值条件成立,最终结果就是成立的,那么就不需要再去判断后面的结果了,这就是 || 短路效果
console.log(true || false);//true
//上面 || 和 && 进行运算,最终结果是 true 或 false
// 如果使用 | 和 & 进行布尔运算 最终结果是 0 或 1
console.log(true | false);//1
console.log(true & false);//0
所有的基本数据类型进行逻辑运算时,如何进行运算:
// 通过上一个案例逻辑非(!)的操作,我们总结出: 数值0、空字符串""、null、undefined、NaN、false都被当作条件不成立,在进行逻辑非操作时返回true
console.log(10 && 5);//5
console.log(10 && 0);//0
console.log(10 && "hello");//"hello"
console.log("" && "hello");//""
console.log("" || "10");// "10"
console.log("" || null);// null
console.log(undefined && null);// undefined
练习:
-
false || !false && false || true;
false || !false && false || true = false || true && false || true = false || false || true = false || true = true
-
4 && “hello” || !false || !true && null;
4 && "hello" || !false || !true && null; = 4 && "hello" || true || false && null = "hello" || true || false = "hello" || false = "hello"
补充: 逻辑运算符优先级 ! >> && >> ||
1.3 赋值运算符
不同于前面运算符运算顺序从左向右,赋值运算符运算顺序是从右往左的。
如: var num; num = 10; 将右边的字面量10赋给左边的变量num
赋值运算符:= += -= *= /= %=
//声明一个变量num
var num;
console.log("num:",num);//num:undefined
//赋值运算符:= += -= *= /= %=
//对变量 num 进行赋值操作
num = 10;
console.log("num:",num);//num:10
num += 20;// 等价于 num = num + 20
console.log("num:",num);//num:30
num *= 10;//等价于 num = num * 10
console.log("num:",num);//num:300
num %= 7;//等价于 num = num % 7
console.log("num:",num);//num:6
num /= 3;//等价于 num = num / 3
console.log("num:",num);//num:2
1.4 运算符的优先级
运算优先级: 贴身(前++、前–、正+、负-、逻辑非!) >>> 算术运算符(先乘除后加减) >>> 比较运算符(先> >= >逻辑运算符(先逻辑与&&,再逻辑或||)>>> 赋值运算符 >>> 后++、后–
**运算顺序:**除赋值运算符运算顺序从右往左,其它都是从左往右
1.5 三元运算符
语法: 条件表达式 ? 条件表达式成立执行的语句 : 条件表达式不成立执行的语句
示例:
var a = 100,
b = 50;
var maxNum = a > b ? a : b;
console.log("a 与 b中的最大值是:", maxNum);//a 与 b中的最大值是: 100
练习:提示用户输入两个任意大于0的整数,获取其中的最小值
1.6 运算符综合练习
var a = 4;
var sum = 1 * (2 + 3) && a++ || 5 > 6 && 7
二、Math对象
这是JS中内置的一个对象,叫做算术对象。
Math 对象用于执行数学任务。
只要是对象,那么就具有特征与行为,体现到程序中就是属性和方法。
Math对象作为JS中的内置对象,给它内置了很多属性和方法。
Math将自己本身当作对象,可以直接调用这些属性和方法。
Math对象调用属性和方法的方式 Math.属性 Math.方法()
2.1 Math对象的属性
PI 获取圆周率Π=3.14…
2.2 Math对象的方法
random() 获取0-1之间的随机数 左闭右开[0,1)
round(num) 获取参数num的四舍五入的值
pow(x,y) 获取x的y次幂
sqrt(num) 获取参数num的开平方跟
//获取圆周率Π=3.14...
console.log(Math.PI);//3.141592653589793 JS中只能获取到小数点后15位
//pow(底数x,指数y) 获取x的y次方
console.log(Math.pow(2,4));//16
//sqrt(num) 获取开平方根
console.log(Math.sqrt(9));//3
//random() 获取 [0,1) 之间的随机数
console.log(Math.random());//每次结果不同
//获取 [0,10) 之间的随机数
console.log(Math.random() * 10);
//获取 [0,10) 之间的随机整数
console.log(parseInt(Math.random() * 10))
//获取 [0,10] 之间的随机整数
//round(num) 获取指定的四舍五入值
console.log(Math.round(Math.random() * 10))
三、条件语句
条件if语句,用来指定符合条件后需要执行的语句,不符合条件不执行。
类似于选择器,选择正确的答案,必须符合题干条件。
条件语句有很多种语法格式,如下:
-
只有if关键字的条件语句
if(条件表达式){
当条件表达式成立的情况下才会执行的语句
}
案例:判断一个人的年龄是否满18岁,如果满足了,那么你可以进入网站继续观看暴力电影
var age = parseInt(prompt("请输入您的年龄","18")); if(age >= 18){ alert("可以观看...") }
满足条件,执行大括号中的语句体;不满足条件,跳出if语句,继续执行if语句后面的代码。
-
存在 else 的if语句
if(条件表达式){
当条件表达式成立的情况下才会执行的语句
}else{
条件表达式不成立执行的语句
}
案例:判断一个人的年龄是否满18岁,如果满足了,那么你可以进入网站继续观看暴力电影;如果不满18岁,那么请在家长陪同下进行观看。
var age = parseInt(prompt("请输入您的年龄","18")); if(age >= 18){ alert("可以观看...") }else{ alert("警告!!请在家长陪同下进行观看!!") }
通过观察,不难发现,if…else语句 可以和 三元运算进行转换,如上代码,可以用三元表达式优化,如下:
age >= 18 ? alert("可以观看...") : alert("警告!!请在家长陪同下进行观看!!");
-
if else存在的多条件判断语句
if(条件一){
条件一满足执行的语句体
}else if(条件二){
不满足条件一,满足条件二执行的语句体
}…else if(条件N){
不满足N之前的条件,满足条件N执行的语句体
}else{
以上所有的条件都不满足执行的语句
}
思考?假设公司员工可以根据工龄,领取对应的福利商品:满10年的老员工,发红包2万元,购物卡1000元一张;满5年但是不满10年的老员工,发红包8000元,购物卡1000元一张;满3年但是不满5年的老员工,发红包3000元,购物卡800元一张; 满1年但是不满3年的老员工,购物卡1500元一张;不满一年的员工,购物开300元两张。
-
省略大括号的情况
如果if语句的大括号只有一条语句,那么我们就可以省略大括号。
如果有两条执行语句,省略大括号的情况下,直接报错
四、选择语句
switch语句,这是一个选择语句,根据条件去匹配对应的值,匹配成功,执行这条匹配下的语句。
- 语法格式
switch(表达式){
case 值1:
语句体1;
break;
case 值2:
语句体2;
break;
…
case 值N:
语句体N;
break;
default:
以上都不满足执行的语句体;
break;
}
注:default 语句可以写在 switch 中的任何位置,都是在 case 值都匹配不到的时候执行,习惯上放到最后。
default也可以省略,当不满足所有case时,不执行任何操作,直接跳出switch。
break是控制语句,打断的意思;这里用来跳出 switch 语句。也就是遇到break 语句就结束了。
需求一:请输入1-7之间的数字,判断今天是星期几`
需求二:请输入1-12之间的数字,判断当前月份的季节
-
变种
switch 中的表达式书写 true, 在 case 后面去写条件表达式。当 case 后面条件表达式成立,即执行对应的语句体,否则继续向下匹配,直到匹配成功,遇到 break 跳出。
需求三:根据用户输入的性别和年龄,判断用户是否满足结婚年龄(男:23 女:20)
四、循环语句
生活见到的循环事件有:商场的电梯、传送带、拖拉机传送带、工厂中的机器、驴拉磨。
循环指的其实就是只要符合一定的条件,就会不停的执行某个动作。直到通过外力或者不符合条件后,才会结束循环。
在程序中的循环有三种:while循环、do…while循环、for循环。
4.1 do…while循环
语法格式
do{
循环体
}while(条件表达式);
不难发现,do…while 和 while循环最大的区别在于:do…while不管条件是否成立,都会至少执行一次循环。
需求:实现 10 次 “Hello World!” 的控制台输出。
练习:输出 1 – 100 之间,可以同时被 3 和 7 整除的整数(do…while实现)。
4.2 for循环
语法格式:
for(初始化变量; 条件表达式; 变量操作){
循环体
}
//需求:在控制台输出 10 次"Hello World"
//while循环向for循环的演变
//初始化变量
// var i = 0;
// //while循环
// while (i
4.3 穷举思想
**概述:**我们想要得到一组数据,这些数据有特定的场景要求,计算机没有办法帮我们输出这些数据。我们需要人为的去编写一段程序,来实现这个功能:将所有可能符合要求数据,一一的列举出来,然后认为设置限制条件,将符合条件的数据筛选出来,不满足的跳过,继续验证下一个可能符合要求的数据,直到把所有可能的数据都验证一遍。这个方法就叫做穷举法,穷举法也叫全举法。
将可能符合要求的数据,使用for循环进行一一列举(遍历);
在for循环的内部,使用if条件语句对这些可能符合条件的数据,进行一一验证,筛选出真正的符合条件的数据。
代码演示:提示用户输入一个大于0的整数,在控制台输出这个数字所有的约数
var num = Number(prompt("请输入一个大于 0 的整数","10"));
//按照穷举思想,先把所有可能的数据列举出来:一个数的约数,最小是1,最大是它本身
for(var i = 1; i
4.4 for循环嵌套
for循环嵌套,说白了就是 for循环 里面嵌套 for循环
在页面文档中输出数据的方式: document.write(“内容”);
代码演示:在页面中输出 “九九乘法表”
table{
border-collapse:collapse;
}
td{
padding: 4px 8px;
border: solid 1px;
}
//向页面输出内容:可以是标签也可以是文本
// document.write("Hello World!!");
//页面上打印 九九乘法表
// for (var i = 1; i <= 9; i++) {//外层循环控制行
// for (var j = 1; j <= i ; j++) {//内层循环控制列 此时内层循环作为外层循环的循环体存在
// document.write(j + "×" + i + "=" + (i * j) + " ");
// }
// //上面内层循环执行完毕后,也就相当于这一行的结束,此时在这一行后面加换行符
// document.write("
")
// }
//加表格
document.write("
")
for (var i = 1; i <= 9; i++) {//外层循环控制行
document.write("")
for (var j = 1; j <= i ; j++) {//内层循环控制列 此时内层循环作为外层循环的循环体存在
document.write("")
document.write(j + "×" + i + "=" + (i * j));
document.write("")
}
document.write("")
}
document.write("")
3.6 综合小练习
输出100~999之间的水仙花数(水仙花数指的时每个数值位上的数值的立方和等于当前数字)
如 153 = 1³ + 5³ + 3³
// 穷举思想第一步:--列举出所有可能的值
for (var i = 100; i
四、控制语句
一般情况下,我们在执行循环时,只要是满足循环条件,那么循环体就会一直执行下去。
这个时候,我们想要在循环时,达到某种条件时,控制循环的执行,那么就用到控制语句。
控制语句有两个:break 和 continue
-
break 打断、中断。在JS中,可以应用于 switch 语句、循环语句(常见于 for 循环),用来跳出语句或者说是结束语句的执行
需求:遍历1-10之间的数字,当数字是6的时候,跳出循环;打印结果:1,2,3,4,5
for (var i = 1; i
控制台效果:
-
continue 继续。在JS中,一般应用于循环语句中,用来跳过本次循环继续下一个循环
需求:遍历1-10之间的数字,当数字是6的时候,跳过本次循环继续下一次循环;打印结果:1,2,3,4,5,7,8,9,10
for (var j = 1; j
控制台输出效果:
-
多层嵌套循环下,跳出或跳过指定循环
outter:for (var i = 1; i
控制台效果:
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
移动开发是一门涉及到移动应用软件的开发工作,随着智能手机市场的蓬勃发展,越来越多的企业开始注重移动应用的开发。在这篇文章中,将介绍移动开发的基本概念、技能要求和最新趋势,帮助初学者更好地了解和掌握移动开发。 基础概念 移动开发主要是指针对智能手机、平板电脑等移…
服务器托管,北京服务器托管,服务器租用,机房机柜带宽租用
咨询:董先生
电话13051898268 QQ/微信93663045!
上一篇: SQL查询中的小技巧:SELECT 1 和 LIMIT 1 替代 count(*)
下一篇: 二叉树