javascript(B站李立超老师)-03运算符

原创 已于 2025-01-26 12:45:16 修改 · 271 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

于 2025-01-26 12:42:54 首次发布

视频地址:JavaScript核心基础_讲师（李立超）_JS教程_哔哩哔哩_bilibili

推荐参考:现代JS教程:javascript-tutorial/zh.javascript.info: 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。

1.算符运算符

<!DOCTYPE html>
<html lang="zh">
<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>运算符</title>
    <script>
        /* 
            运算符（操作符）
                - 运算符可以用来对一个或多个操作数（值）进行运算
                - 算术运算符：
                    + 加法运算符
                    - 减法运算符
                    * 乘法运算符
                    / 除法运算符
                    ** 幂运算
                    % 模运算，两个数相除取余数

                - 注意：
                    - 算术运算时，除了字符串的加法，
                        其他运算的操作数是非数值时，都会转换为数值然后再运算
        */
        let a = 1 + 1
        a = 10 - 5
        a = 2 * 4
        a = 10 / 5
        a = 10 / 3
        a = 10 / 0 // Infinity
        a = 10 ** 4
        a = 9 ** .5 // 开方
        a = 10 % 2
        a = 10 % 3
        a = 10 % 4

        /* 
            JS是一门弱类型语言，当进行运算时会通过自动的类型转换来完成运算
        
        */
        a = 10 - '5' // 10 - 5
        a = 10 + true // 10 + 1
        a = 5 + null // 5 + 0
        a = 6 - undefined // 6 - NaN

        /* 
            当任意一个值和字符串做加法运算时，它会先将其他值转换为字符串，
                然后再做拼串的操作
            可以利用这一特点来完成类型转换
                可以通过为任意类型 + 一个空串的形式来将其转换为字符串
                    其原理和String()函数相同，但使用起来更加简洁
        */
        a = 'hello' + 'world'
        a = '1' + 2 // "1" + "2"

        a = true

        a = a + ''

        console.log(typeof a, a)
        

    </script>
</head>
<body>
    
</body>
</html>

2.赋值运算符

<!DOCTYPE html>
<html lang="zh">
<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>赋值运算符</title>
    <script>
        /* 
            赋值运算符用来将一个值赋值给一个变量
                =
                    - 将符号右侧的值赋值给左侧的变量
                ??=
                    - 空赋值
                    - 只有当变量的值为null或undefined时才会对变量进行赋值
                +=
                    - a += n 等价于 a = a + n
                -=
                    - a -= n 等价于 a = a - n
                *=
                    - a *= n 等价于 a = a * n
                /=
                    - a /= n 等价于 a = a / n
                %=
                    - a %= n 等价于 a = a % n
                **=
                    - a **= n 等价于 a = a ** n

               

        */
        let a = 10
        a = 5 // 将右边的值 赋值 给左边的变量
        let b = a // 一个变量只有在=左边时才是变量，在=右边时它是值

        a = 66
        a = a + 11 // 大部分的运算符都不会改变变量的值，赋值运算符除外

        a = 5
        // a = a + 5 // 10
        a += 5 // 在a原来值的基础上增加5
       
        a = null

        a ??= 101

        console.log(a)
        

    </script>
</head>
<body>
    
</body>
</html>

3.一元±

<!DOCTYPE html>
<html lang="zh">
<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>一元±</title>
    <script>
       /* 
            一元的±
                + 正号
                    - 不会改变数值的符号
                - 负号
                    - 可以对数值进行符号位取反
                
                当我们对非数值类型进行正负运算时，会先将其转换为数值然后再运算
       */
       let a = -10
       a = -a

       let b = '123'
       
       b = +b // b = Number(b)

       console.log(typeof b, b)
       

    </script>
</head>
<body>
    
</body>
</html>

4.自增和自减

<!DOCTYPE html>
<html lang="zh">
<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>自增和自减</title>
    <script>
        /* 
            ++ 自增运算符
                - ++ 使用后会使得原来的变量立刻增加1
                - 自增分为前自增(++a)和后自增(a++)
                - 无论是++a还是a++都会使原变量立刻增加1
                - 不同的是++a和a++所返回的值不同
                    a++ 是自增前的值 旧值
                    ++a 是自增后的值 新值

        */
        let a = 10
        
        // let b = a++
        // console.log("a++ =", b)

        let b = ++a
        // console.log("++a =", b)
        // console.log(a)

        let n = 5
        //           5 + 7 + 7
        let result = n++ + ++n + n

        // console.log(result)

        /* 
            -- 自减运算符
                    - 使用后会使得原来的变量立刻减小1
                    - 自减分为前自减(--a)和后自减(a--)
                    - 无论是--a还是a--都会使原变量立刻减少1
                    - 不同的是--a和a--的值不同
                        --a 是新值
                        a-- 是旧值
        */

        a = 5
        
        // console.log('--a', --a)
        console.log('a--', a--)
        
        console.log(a)
        
        

        
        

    </script>
</head>
<body>
    
</body>
</html>

5.逻辑运算符

<!DOCTYPE html>
<html lang="zh">
<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>逻辑运算符</title>
    <script>
        /* 
            ! 逻辑非
                - ! 可以用来对一个值进行非运算
                - 它可以对一个布尔值进行取反操作
                    true --> false
                    false --> true
                - 如果对一个非布尔值进行取反，它会先将其转换为布尔值然后再取反
                    可以利用这个特点将其他类型转换为布尔值

                - 类型转换
                    转换为字符串
                        显式转换
                            String()
                        隐式转换
                            + ""
                    转换为数值
                        显式转换
                            Number()
                        隐式转换
                            +
                    转换为布尔值
                        显式转换
                            Boolean()
                        隐式转换
                            !!

            && 逻辑与
            || 逻辑或
        */

        let a = true

        a = !a

        // console.log(a)
        
        a = 123

        a = !!a

        console.log(typeof a, a)
        

    </script>
</head>
<body>
    
</body>
</html>

6.逻辑运算符

<!DOCTYPE html>
<html lang="zh">
<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>逻辑运算符</title>
    <script>
        /* 
            && 逻辑与
                - 可以对两个值进行与运算
                - 当&&左右都为true时，则返回true，否则返回false
                - 与运算是短路的与，如果第一个值为false，则不看第二个值
                - 与运算是找false的，如果找到false则直接返回，没有false才会返回true
                - 对于非布尔值进行与运算，它会转换为布尔值然后运算
                    但是最终会返回原值
                    - 如果第一个值为false，则直接返回第一个值
                        如果第一个值为true，则返回第二个值

            || 逻辑或
                - 可以对两个值进行或运算
                - 当||左右有true时，则返回true，否则返回false
                - 或运算也是短路的或，如果第一个值为true，则不看第二个值
                - 或运算是找true，如果找到true则直接返回，没有true才会返回false
                - 对于非布尔值或运算，它会转换为布尔值然后运算
                    但是最终会返回原值
                    - 如果第一个值为true，则返回第一个
                        如果第一个值为false，则返回第二个
        */

        let result = true && true // true
        result = true && false // false
        result = false && true // false
        result = false && false // false

        // true && alert(123) // 第一个值为true，alert会执行
        false && alert(123) // 第一个值为false，alert不会执行

        //       true && true  -> true
        result = 1 && 2 // 2 
        //       true && false -> false
        result = 1 && 0 // 0
        //       false && false -> false 
        result = 0 && NaN // 0


        result = true || false // true
        result = false || true // true
        result = true || true // true
        result = false || false // false

        // false || alert(123) // 第一个值为false，alert会执行
        true || alert(123) // 第一个值为true，alert不会执行

        result = 1 || 2 // 1
        result = "hello" || NaN // "hello"
        result = NaN || 1 // 1
        result = NaN || null // null

        console.log(result)
        
        

    </script>
</head>
<body>
    
</body>
</html>

7.关系运算符

<!DOCTYPE html>
<html lang="zh">
<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>关系运算符</title>
    <script>
        /* 
            关系运算符
                - 关系运算符用来检查两个值之间的关系是否成立
                    成立返回true，不成立返回false
                >
                    - 用来检查左值是否大于右值
                >=
                    - 用来检查左值是否大于或等于右值
                <
                    - 用来检查左值是否小于右值
                <=
                    - 用来检查左值是否小于或等于右值

            注意：
                当对非数值进行关系运算时，它会先将前转换为数值然后再比较 
                当关系运算符的两端是两个字符串，它不会将字符串转换为数值，
                    而是逐位的比较字符的Unicode编码   
                    利用这个特点可以对字符串按照字母排序  
                注意比较两个字符串格式的数字时一定要进行类型转换  
        */
        let result = 10 > 5 // true
        result = 5 > 5 // false
        result = 5 >= 5 // true

        result = 5 < "10" // true
        result = "1" > false // true

        result = "a" < "b" // true
        result = "z" < "f" // false
        result = "abc" < "b" // true

        result = "12" < "2" // true
        result = +"12" < "2" // false

        // 检查num是否在5和10之间
        let num = 4
        // result = 5 < num < 10 // 错误的写法
        result = num > 5 && num < 10

        console.log(result)
        

    </script>
</head>
<body>
    
</body>
</html>

8.相等运算符

<!DOCTYPE html>
<html lang="zh">
<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>相等运算符</title>
    <script>
        /* 
            ==
                - 相等运算符，用来比较两个值是否相等
                - 使用相等运算符比较两个不同类型的值时，
                    它会将其转换为相同的类型（通常转换为数值）然后再比较
                    类型转换后值相同也会返回true
                - null和undefined进行相等比较时会返回true
                - NaN不和任何值相等，包括它自身
            ===
                - 全等运算符，用来比较两个值是否全等
                - 它不会进行自动的类型转换，如果两个值的类型不同直接返回false
                - null和undefined进行全等比较时会返回false

            !=
                - 不等，用来检查两个值是否不相等
                - 会自动的进行类型转换
            !==
                - 不全等，比较两个值是否不全等
                - 不和自动的类型转换
        */
        let result = 1 == 1 // true
        result = 1 == 2 // false
        result = 1 == '1' // true
        result = true == "1" // true

        result = null == undefined // true
        result = NaN == NaN // false

        result = 1 === "1" // false
        result = null === undefined // false

        result = 1 != 1 // false
        result = 1 != "1" // false
        result = 1 !== "1" // true

        console.log(result)
        
    </script>
</head>
<body>
    
</body>
</html>

9.条件运算符

<!DOCTYPE html>
<html lang="zh">
<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>条件运算符</title>
    <script>
        /* 
            条件运算符
                条件表达式 ? 表达式1 : 表达式2
                - 执行顺序：
                    条件运算符在执行时，会先对条件表达式进行求值判断，
                        如果结果为true，则执行表达式1
                        如果结果为false，则执行表达式2
        */

        // false ? alert(1) : alert(2)

        let a = 100
        let b = 200
        // a > b ? alert('a大！') : alert("b大！")
        let max = a > b ? a : b

        // alert(max)

    </script>
</head>
<body>
    
</body>
</html>

10.运算符的优先级

<!DOCTYPE html>
<html lang="zh">
<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>运算符的优先级</title>
    <script>

        /* 
            和数学一样，JS中的运算符也有优先级，比如先乘除和加减。

            可以通过优先级的表格来查询运算符的优先级
                https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
                
                - 在表格中位置越靠上的优先级越高，优先级越高越先执行，优先级一样自左向右执行
                    优先级我们不需要记忆，甚至表格都不需要看
                    因为()拥有最高的优先级，使用运算符时，如果遇到拿不准的，可以直接通过()来改变优先级即可
        */
        let a = 1 + 2 * 3 // 7

        a = (1 && 2) || 3

        console.log(a)
        
        

    </script>
</head>
<body>
    
</body>
</html>

【JS】一篇DOM详解笔记 | b站李立超
2201_75503057的博客
08-01 2067
这个系列可以叫作《前端从零开始系列》，花一周时间，把JS个人觉得笔记重点且常见的知识点，并且总结了起来。
4、尚硅谷-JavaScript基础-李立超-JavaScript事件
极客鼠之家
09-14 749
文章目录1、事件对象1.1、简单介绍1.2、案例说明1.3、案例中注意点1.4、效果图1.5、事件对象练习之div动态移动1.5.1、需求说明1.5.2、源码实现1.5.3、注意点1.5.4、效果图2、事件的冒泡2.1、简单介绍2.2、案例说明2.3、核心注意点2.4、效果图3、事件的委派4、事件的绑定5、完成bind函数6、函数的传播7、滚轮事件8、键盘事件 1、事件对象 1.1、简单介绍 在DOM对象上的某个事件被触发时候，会产生一个事件对象event,这个对象包含着所有事件有关的信息，包括导致事件的
李立超js笔记1-25
weixin_51958545的博客
10-28 336
如果需要更高的精度，可以考虑使用专门处理精确小数的库，例如 decimal.js 或 big.js。这些库可以提供更精确的小数运算。parseInt() 专门对付字符串的，把字符串转换为Number，如果开始不是字符串，他会首先将其转换为字符串。这样，我们得到了一个近似的结果 “0.30”，它在显示时会看起来像精确的 0.3。//false,因为加了＋号会变成数值,数值和字符串比较,字符串转换,则是12和2比较.: 算数运算时,除了字符串的加法,其他的运算操作数是非数值时,都会转换成数值再运算.
JavaScript视频 --李立超
毕业才是起点
12-29 1444
JavaScript简介 起源 95年，主要用于处理网页中的前端验证 – 检查用于输入的内容是否符合一定的规则 比如： 用户名长度 密码的长度 邮箱的格式等 现在常常用作页面的一些动态效果的展示： 甚至是一款 小游戏都可以使用JavaScript来完成 Node.js用在服务器上面 JS的标准命名ECMAScript，是网景公司把JavaScript捐出来了以后规定命名 ECMAScript是一个标准，这个标准需要由各个浏览器厂商来实现。 不同的浏览器使用的引擎是不一样的， JavaScript实现
Javascript 学习笔记（一）
Hi_KER的博客
02-27 909
Javascript学习笔记
javascript(B站李立超老师)-01入门
loveyouyhl的博客
05-20 468
B站李立超老师2022年javascript笔记01入门
javascript(B站李立超老师)-04流程控制
最新发布
loveyouyhl的博客
01-26 221
【代码】javascript(B站李立超老师)-04流程控制。
ScriptBasics:JavaScript-该项目是根据B站上李立超老师课程的手敲代码
05-29
JavaScript-该项目是根据B站上李立超老师课程的手敲代码 1.对于day17中所需要的JSON-js大家可以自行去下载,也可以通过下方地址下载 2.可以在github上自行搜索json2(现在是json3),然后自己download在本地
李立超JavaScript基础篇笔记
02-02
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。JavaScript不是Java的子集，两者之间没有直接关联。JS起初名为LiveScript，但在...
5、尚硅谷-JavaScript基础-李立超-BOM
极客鼠之家
09-15 776
文章目录1、何为BOM2、Navigator对象2.1、简单介绍2.2、案例说明2.3、效果图3、Location对象3.1、简单介绍3.2、案例说明3.3、效果图4、History对象4.1、简单介绍4.2、案例说明4.3、效果图5、定时调用6、轮播图实现7、定时器 1、何为BOM ECMAScript无疑是JavaScript的核心，但是想要在浏览器中使用JavaScript，那么BOM才是真正的核心（浏览器对象模型） BOM提供了很多对象，用于访问浏览器的功能，这些功能和任何网页内容无关 BOM将浏
JavaScript基础笔记-尚硅谷视频自己总结
01-13
JavaScript入门知识点总结，文档里面包含W3School里面方法
经典尚硅谷JavaScript视频
06-15
精心收藏 上百本经典前端电子书 总有基本合适你的 节省大家时间
html+js视频笔记
01-14
很好的html和javascript资料，很全面也很详细
JavaScript核心基础（李立超2022版）
weixin_45765215的博客
04-11 472
2022年李立超老师最新JavaScript基础主要内容包括:JS基本语法、变量、数据类型（原始值和类型转换等）、运算符、流程控制语句、对象、函数（箭头函数、作用域、作用域链、高阶函数、闭包、递归等）、面向对象（类、属性、方法、构造函数、原型、原型链、旧类等）、数组（创建、遍历、方法、排序等）、内建对象（Map、Set、Math、Date、RegExp、JSON等）。
[JS]JavaScript基础学习笔记(黑马pink+尚硅谷李立超)
emmmm.....
01-11 3719
JavaScript 的书写位置 JavaScript 注释 JavaScript 输入输出语句 变量 数据类型 运算符 流程控制 对象 函数 严格模式 面向对象 Map Set
javascript(B站李立超老师)-02数据类型
loveyouyhl的博客
01-26 291
【代码】javascript(B站李立超老师)-数据类型。
javascript全笔记-基础版（尚硅谷视频李立超老师）
weixin_51717662的博客
10-16 5708
观看javascript视频整理的笔记，跟着视频所讲内容整理的关于javascript基础版笔记，包括javascript简介，javacript基础语法，常用对象，JavaScript DOM,BOM.
尚硅谷李立超JavaScript笔记
Maryal的博客
02-07 1985
李立超老师JavaScript笔记目录1.JS简介2.JS的HelloWorld3.JS代码编写的位置4.JS的基本语法5.字面量与变量6.标识符7.数据类型8.强制类型转换9.其他进制的数字算数运算符一元运算符自增自减逻辑运算符赋值运算符关系运算符 目录 1.JS简介 1.ECMAScript是JavaScript的标准 2.一个JS包含三个元素:ECMAScript,DOM(文档对象模型: 如何通过JS操作网页),BOM(浏览器对象模型: 如何通过JS操作浏览器) 3.JS是一种解释形语言，动态语言(和
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值