【前端JS交互基础】运算符、流程语句-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端JS交互基础】运算符、流程语句。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、运算符

1.1 算术运算符

算术运算符用来执行数学运算。

JavaScript 基础到高级
Canvas游戏开发
原生JavaScipt案例合集
JavaScript +DOM基础

生活中常见的算术运算符有： + - * / %(取模，取余数)

// 表达式分为运算元和运算符
//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 < "10ab");//false
console.log(10 == "10ab");//false
console.log(1 == true);//true
console.log(0 == false);//true
console.log(0 == null);//false
console.log(1 === true);//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 < 8 || 9;

二、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 < 10){//条件表达式
//     console.log("Hello World!");//大括号包裹的，叫做循环语句
//     //变量操作
//     i++;
// }

//初始化变量
// var i = 0;
// //for循环
// for (;i < 10;){//条件表达式
//     console.log("Hello World!");//大括号包裹的，叫做循环语句
//     //变量操作
//     i++;
// }

//for循环
// for (var i = 0;i < 10;){//(初始化变量; 条件表达式)
//     console.log("Hello World!");//大括号包裹的，叫做循环语句
//     //变量操作
//     i++;
// }


//for循环
for (var i = 0;i < 10; i++){//(初始化变量; 条件表达式; 变量操作)
    console.log("Hello World!");//大括号包裹的，叫做循环语句
}

4.3 穷举思想

**概述：**我们想要得到一组数据，这些数据有特定的场景要求，计算机没有办法帮我们输出这些数据。我们需要人为的去编写一段程序，来实现这个功能：将所有可能符合要求数据，一一的列举出来，然后认为设置限制条件，将符合条件的数据筛选出来，不满足的跳过，继续验证下一个可能符合要求的数据，直到把所有可能的数据都验证一遍。这个方法就叫做穷举法，穷举法也叫全举法。

将可能符合要求的数据，使用for循环进行一一列举（遍历）;

在for循环的内部，使用if条件语句对这些可能符合条件的数据，进行一一验证，筛选出真正的符合条件的数据。

代码演示：提示用户输入一个大于0的整数，在控制台输出这个数字所有的约数

var num = Number(prompt("请输入一个大于 0 的整数","10"));

//按照穷举思想，先把所有可能的数据列举出来：一个数的约数，最小是1，最大是它本身
for(var i = 1; i <= num; i++){
    // console.log("i:",i);
    //按照约数的定义规则，判断是否是输出的这个数字的约数，判断条件：遍历的这个数字 i 可以整除 用户输入的数字 num
    if(num % i == 0){//取余的结果为0，即是其约数
        console.log(i,"是",num,"的约数！！");
    }
}

4.4 for循环嵌套

for循环嵌套，说白了就是 for循环里面嵌套 for循环

在页面文档中输出数据的方式： document.write(“内容”);

代码演示：在页面中输出 “九九乘法表”

<style>
    table{
        border-collapse:collapse;
    }

    td{
        padding: 4px 8px;
        border: solid 1px;
    }
</style>
<script>
    //向页面输出内容：可以是标签也可以是文本
    // document.write("<h2>Hello World!!</h2>");

    //页面上打印 九九乘法表
    // for (var i = 1; i <= 9; i++) {//外层循环控制行
    //     for (var j = 1; j <= i ; j++) {//内层循环控制列  此时内层循环作为外层循环的循环体存在
    //         document.write(j + "&times;" + i + "=" + (i * j) + "&nbsp;&nbsp;");
    //     }
    //     //上面内层循环执行完毕后，也就相当于这一行的结束，此时在这一行后面加换行符
    //     document.write("<br>")
    // }

    //加表格
    document.write("<table>")
    for (var i = 1; i <= 9; i++) {//外层循环控制行
        document.write("<tr>")
        for (var j = 1; j <= i ; j++) {//内层循环控制列  此时内层循环作为外层循环的循环体存在
            document.write("<td>")
            document.write(j + "&times;" + i + "=" + (i * j));
            document.write("</td>")
        }
        document.write("</tr>")
    }
    document.write("</table>")
</script>

3.6 综合小练习

输出100~999之间的水仙花数（水仙花数指的时每个数值位上的数值的立方和等于当前数字）

如 153 = 1³ + 5³ + 3³

// 穷举思想第一步：--列举出所有可能的值
for (var i = 100; i < 1000; i++) {
    // console.log("i:",i);

    //声明三个变量：接收百位数字的 b  接收十位数字的 s   接收个位数字的 g
    var b = parseInt(i / 100);
    // console.log("b:",b)
    var s = parseInt(i % 100 / 10);
    // console.log("s:",s);
    var g = parseInt(i % 10);
    // console.log("g:",g);

    //穷举思想第二步：通过设置条件，从可能的值中筛选出确定符合条件的值
    if(Math.pow(b,3) + Math.pow(s,3) + Math.pow(g,3) == i){
        console.log(i,"是水仙花数！！")
    }
}

四、控制语句

一般情况下，我们在执行循环时，只要是满足循环条件，那么循环体就会一直执行下去。

这个时候，我们想要在循环时，达到某种条件时，控制循环的执行，那么就用到控制语句。

控制语句有两个：break 和 continue

break 打断、中断。在JS中，可以应用于 switch 语句、循环语句（常见于 for 循环），用来跳出语句或者说是结束语句的执行

需求：遍历1-10之间的数字，当数字是6的时候，跳出循环；打印结果：1，2，3，4，5
```
for (var i = 1; i <= 10; i++) {
    if(i == 6){
        break;
    }
    console.log("i:",i);
}
console.log("循环执行完毕i:",i);
```
控制台效果：
continue 继续。在JS中，一般应用于循环语句中，用来跳过本次循环继续下一个循环

需求：遍历1-10之间的数字，当数字是6的时候，跳过本次循环继续下一次循环；打印结果：1，2，3，4，5，7，8，9，10
```
for (var j = 1; j <= 10; j++) {
    if(j == 6){
        continue;//跳过本次循环继续下一次循环
    }
    console.log("j:",j);
}
console.log("循环执行完毕j:",j);
```
控制台输出效果：

多层嵌套循环下，跳出或跳过指定循环文章来源地址https://www.toymoban.com/news/detail-512594.html

outter:for (var i = 1; i <= 5; i++) {
    inner:for (var j = 1; j <= 5 ; j++) {
        if(j == 3){
            // break;//跳出当前循环，当前循环为内层循环
            // continue;//跳过本次循环，继续下一次条件循环

            // break outter;//跳出指定标记的那一层循环
            continue outter;
        }
        console.log("i:",i,"j:",j);
    }
}

到了这里，关于【前端JS交互基础】运算符、流程语句的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！