【JavaScript】运算符和语句

最新推荐文章于 2024-11-16 14:11:26 发布

李斯啦果

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量856

点赞数 13

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_64538862/article/details/136702609

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.运算符

1.1算数运算符

数学运算符也叫算数运算符，主要包括加，减，乘，除，取余（模）

+：求和
-：求差
*：求积
/：求商
%：取模

取余应用场景：判断某个数字是否被整除

优先级：先乘除取余后加减，有括号先算括号里面的

1.2赋值运算符

赋值运算符：=，+=，-=，*=，/+，%=

📖Note：

左操作数必须为一个变量

1.3一元运算符

一元运算符：+，-（正负号），++，--

1️⃣自增：

符号：++

作用：让变量的值+1

2️⃣自减：

符号：--

作用：让变量的值-1

++和--的使用场景：通常用来计数

前置++和后置++的区别：

单独使用时没有区别，都会使i自增1
前置++和后置++参与运算就有区别

1.4比较运算符

比较运算符：比较俩个数据的大小

>，>=，<，<=，==，===，！==

==：只判断值，不判断类型
===：左右两边是否类型和值都相等
！==：左右两边是否不全等

建议使用===（全等）

📖Note：

字符串比较：比较的是ASCII码，按顺序从左向右依次比较
NaN不等于任何值，包括它本身
尽量不要比较小数，存在精度问题
比较运算符也存在类型转换

1.5逻辑运算符

逻辑运算符：解决多重条件判断

符号	名称	特点
&&	逻辑与	左右都为真才真
\|\|	逻辑或	有一个为真则为真
！	逻辑非	取反，假变真，真变假

逻辑运算符里的短路

只存在于&&和|| 中，当满足一定条件是右边的代码不执行

原理：通过左边式子就能得到表达式的结果

符号	短路条件
&&	左边为false就短路
\|\|	左边为true就短路

为假的五种情况：

undefined && 任意值 undefined
null && 任意值 null
0 && 任意值 0
空字符串 && 任意值 false
false && 任意值 false

不短路的情况下，&&和 || 运算结果都是最后被执行表达式的值

案例：

判断闰年：四闰百不闰，四百年一闰（能被4整除且不能被100整除，或者能被400整除）

1.6运算符优先级

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++，--，！
3	算术运算符	先乘除取余后加减
4	关系运算符	>，>=，<，<=
5	相等运算符	==，!=，===，!==
6	逻辑运算符	先&&后\|\|
7	赋值运算符	=
8	逗号运算符	,

2.分支语句

表达式：一组代码的集合，JS解释器会将其计算出一个结果

语句：js整句或命令，js语句是以分号结束（可以省略），如：if语句，for循环语句

表达式和语句区别：

表达式计算出一个值，但语句表示执行一件事

程序三大流程控制结构：顺序结构，分支结构，循环结构

分支语句：可以让我们有选择性的执行想要的代码

包含：

if语句
三元运算符
switch语句

2.1 if语句

三种使用：单分支，双分支，多分支

1️⃣单分支语法：

if(条件){

满足条件要执行的代码

}

括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型，会发生隐式类型转换成布尔类型

2️⃣双分支语法：

if(条件){

满足条件要执行的代码

}

else {

不满足条件要执行的代码

}

3️⃣多分支语法：

if(条件1){

满足条件1要执行的代码

}

else if(条件2){

满足条件2要执行的代码

}

...... .....

else {

不满足以上所有条件要执行的代码

}

2.2三元运算符

三元表达式：条件？满足条件执行的代码：不满足条件执行的代码

使用场景：一般用来取值

案例：

用户输入一个数，如果数字小于10，则前面进行补0，比如05

2.3.switch语句

语法：

switch(数据) {

case 值1：

代码1

                break

case 值2：

代码2

                break

default ：

代码n

                break

}

📖Note：

找到跟小括号里数据全等的case值，并执行里面对应的代码
若没有===的则执行default里的代码
switch-case语句一般用于等值判断，不适合区间判断
switch-case一般需要配合break关键字使用，没有break会造成case穿透

简单计算器

用户输入俩个数字和一个运算符（+，-，*，/）可以计算出结果

<script>
    let num1 = +prompt('请输入左操作数：')
    let sp = prompt('请输入运算符：')
    let num2 = +prompt('请输入右操作数：')

    switch(sp) {
        case '+' :
            document.write(num1 + num2)
            break
        case '-' :
            document.write(num1 - num2)
            break
        case '*' :
            document.write(num1 * num2)
            break
        case '/' :
            document.write(num1 / num2)
            break
        default:
            document.write('运算符非法，重新输入')
            break
    }
</script>

3.循环语句

3.1while循环

循环：重复执行某段代码

while循环语法：

while(循环条件) {

要重复执行的代码(循环体)

}

📖Note：

满足小括号里的条件为true才会进入执行代码
while大括号里的代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

循环的本质就是以某个变量为起始值，然后不断产生变化量，不断靠近终止条件的过程

循环具备的三要素：

变量起始值
终止条件（没有终止条件，循环是一直执行，造成死循环）
变量变化量

循环的执行过程：

判断变量是否满足循环条件，不满足不进入循环，满足则进入循环，执行循环体内的语句，再判断是否满足循环条件，重复上述步骤，直到不满足循环的条件

计算1~100之间所有奇数的和

continue和break

continue：结束本次循环，进行循环判断，进行下次循环

break：结束所在的循环

3.2for循环

for循环语法：

for(循环变量; 循环条件; 变化值) {

循环体

}

循环遍历数组：

for循环和while循环：

明确循环次数时推荐使用for循环：如遍历数组
不明确循环次数时推荐使用while循环

循环嵌套：

for(外部循环变量; 循环条件; 变化值) {

  for(内部循环变量; 循环条件; 变化值) {

        循环体

        }

}

案例：打印九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: inline-block;
            margin: 5px;
            padding: 5px;
            height: 25px;
            line-height: 25px;
            background-color: pink;
            border: 1px solid red;
            border-radius: 5px;

            text-align: center;

        }
    </style>
</head>
<body>
    

    <script>
        // 控制行
        for(let i = 1; i < 10; i++) {
            // 控制列
            for(let j = 1; j <= i; j++) {
                    document.write(`
                        <div>
                            ${i} x ${j} = ${i*j}
                        </div>          
                    `)
            }
            // 换行
            document.write('<br>')
        }
    </script>
</body>
</html>

4.数组

数组：可以按顺序保存数据的数据类型

声明语法：

let 数组名 = [数据1，数据2，..... ，数据n]

取值语法：

数组名[下标]

数组遍历：for循环

数组求和，求数组中的最大值

数组的增删查改：

查：

数组名[下标]

改：

数组名[下标] = 新值

增：

arr.push(新增的内容)：将一个或多个元素添加到数组的末尾，并返回数组的新长度
arr.unshift(新增的内容)：将一个或多个元素添加到数组的开头，并返回数组的新长度

删：

arr.pop()：从数组中删除最后一个元素，并返回该元素的值
arr.shift()：从数组中删除第一个元素，并返回该元素的值
arr.splice(start，deleteCount) ：删除指定元素

start：指定修改的起始位置

deleteCount：表示要移出的元素个数，如果省略则默认从开始位置删除直到数组结束

冒泡排序

原理：CSDN

案例：由输入的数据绘制柱状图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            /* 版心 */
            margin: 50px auto;
            /* 两倍间距 */
            justify-content: space-around;
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            /* 转换主轴方向 */
            flex-direction: column;
            justify-content: space-between;
        }

        .box div span {

            margin-top: -20px;
        }

        .box div h4 {
            margin-bottom: -35px;
            width: 70px;
            margin-left: -10px;
        }
    </style>
</head>

<body>

    <script>
        // 1. 利用循环弹出四次输入框， 会得到4个数据，放到数组里面
        let arr = []
        for (let i = 1; i <= 4; i++) {
        
            arr.push(prompt(`请输入第 ${i} 季度的数据`))
        }
        // console.log(arr)

        // 大盒子
        document.write(`<div class="box">`)

        // 渲染循环4个柱子
        for (let i = 0; i < arr.length; i++) {
            // 行内样式
            document.write(`
                 <div style="height: ${arr[i]}px;">
                    <span>${arr[i]}</span>
                    <h4>第${i + 1}季度</h4>
                </div>
            `)
        }

        document.write(`</div>`)
    </script>

</body>

</html>