新人学习笔记之（JavaScript运算符）

最新推荐文章于 2024-07-12 10:42:54 发布
最新推荐文章于 2024-07-12 10:42:54 发布
阅读量758 收藏 9
点赞数 17
分类专栏： JavaScript 文章标签： 学习 笔记 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83311390/article/details/139253216
版权

目录

一、运算符

        1.运算符（operator）也被称操作符，最用于实现赋值、比较和算数运算等功能的符号。

        2.javascript中常用的有

二、算术运算符

        1.算数运算符概述

        2.浮点数的精度问题

        3.表达式和返回值

三、递增和递减运算符

        1.递增和递减运算符概述

        2.递增运算符

        3.前置递增和后置递增小结

四、比较运算符

        1.比较运算符概述

        2.小结

五、逻辑运算符

        1.逻辑运算符概述

        2.逻辑与&&

        3.逻辑或||

        4.逻辑非!

        5.短路运算（逻辑中断）

        6.逻辑中断（短路操作）

六、赋值运算符

        1.概念：用来把数据赋值给变量的运算符

七、运算符优先级

一、运算符
        1.运算符（operator）也被称操作符，最用于实现赋值、比较和算数运算等功能的符号。
        2.javascript中常用的有

                （1）算术运算符

                （2）递增递减运算符

                （3）比较运算符

                （4）逻辑运算符

                （5）赋值运算符

二、算术运算符
        1.算数运算符概述

                （1）概念：算术运算符使用的符号，用于执行两个变量或值的算术运算。

                （2）

运算符描述示例
+加 10 + 20 = 30;
-减 20 - 10 = 10;
*乘 10 * 20 = 200;
/除 10 / 20 = 0.5;
%取余数（取模）返回除数的余数 9 % 2 = 1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log(1 + 1); // 2
        console.log(1 - 1); // 0
        console.log(1 * 1); // 1
        console.log(1 / 1); // 1
        // 1. % 取余 （取模）
        console.log(4 % 2); // 0
        console.log(5 % 3); // 2
        console.log(3 % 5); // 3
    </script>
</head>
<body>
    
</body>
</html>
        2.浮点数的精度问题

                （1）浮点数值的最高精度是17位小数，但在进行算术运算时其精准度远远不如整数。

                （2）所以：不要直接判断两个和浮点数是否相等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 2. 浮点数 算数运算里面会有问题
        console.log(0.1 + 0.2); // 0.30000000000000004
        console.log(0.07 * 100); // 7.000000000000001
        // 3. 我们不能直接拿着浮点数来进行相比较 是否相等
        var num = 0.1 + 0.2
        console.log(num == 0.3); // false
    </script>
</head>
<body>
    
</body>
</html>
        3.表达式和返回值

                （1）表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

                （2）简单理解：是由数字、运算符、变量等组成的式子

                （3）表达式最终都会都会有一个结果返回给我们，我们称为返回值

三、递增和递减运算符
        1.递增和递减运算符概述

                （1）如果需要反复给数字变量添加或减去1，可以使用（++）和递减（--）运算符来完成

                （2）在JavaScript中，递增（++）和递减（--）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们称之为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

                （3）注意：递增和递减运算符必须和变量配合使用

        2.递增运算符

                （1）前置递增运算符

                        1）++num前置递增，就是自加1，类似于 num = num + 1，但是++num写起来更简单。

                        2）使用口诀：先自加，后返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1. 想要一个变量自己加1   num = num + 1 比较麻烦
        var num = 1;
        num = num + 1; // ++num
        console.log(num); // 2
        // 2. 前置递增运算符  ++ 写在变量的前面
        var age = 10;
        ++age; // 类似于 age = age + 1
        console.log(age);
        // 3. 先加1 后返回值
        var p = 10;
        console.log(++p + 10); // 21
    </script>
</head>
<body>
    
</body>
</html>

                （2）后置递增运算符

                        1）num++后置递增，就是自加1，类似于num = num + 1，但是num++写起来更简单

                        2）使用口诀：先返回原值，后自加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 10;
        num++ // num = num + 1
        console.log(num);
        // 1. 前置自增和后置自增如果单独使用 效果是一样的
        // 2. 后置自增 口诀 先返回原值 后自加1
        var age = 10;
        console.log(age++ + 10);
        console.log(age);
    </script>
</head>
<body>
    
</body>
</html>
        3.前置递增和后置递增小结

                （1）前置递增和后置递增运算符可以简化代码的编写，让变量的值+1比以前的写法更简单

                （2）单独使用时，运行结果相同

                （3）与其他代码连用时，执行结果会不同

                （4）后置：先原值运算，后自加（先人后己）

                （5）前置：先自加，后运算（先己后人）

                （6）开发时，大多数使用后置递增/减，并且代码独占一行，例如：num++; 或者 num--;

四、比较运算符
        1.比较运算符概述

                （1）概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果

                （2）

运算符名称说明案例结果
<小于号1 < 2true
>大于号1 > 2false
>=大于等于号2 >= 2true
<=小于等于号3 <= 2false
==判断号（会转型）37 == 37true
!=不等号37 != 37

false

=== !==全等37 === '37'false
        2.小结

                （1）

符号作用用法
=赋值把右边给左边
==判断判断两边是否相等（注意此时有隐式转换）
===全等判断两边的值和数据类型是否完全相同
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log( 3 >= 5); // false
        console.log(2 <= 4); // true
        // 1. 我们程序里面的等于符号 '==' 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
        console.log(3 == 5); // flase
        console.log('ljh' == 'hsl'); // false
        console.log(18 == '18'); // true
        console.log(18 != 18); // false
        console.log(18 != 12 ); // true
        // 2. 我们程序里面有全等 一摸一样 要求 两侧的值 还有 数据类型完全一致 才可以  true
        console.log(18 === 18); // true
        console.log(18 === '18'); // false
    </script>
</head>
<body>
    
</body>
</html>
五、逻辑运算符
        1.逻辑运算符概述

                （1）概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值，后面开发中经常用于多个条件的判断

                （2）

逻辑运算符说明案例
&&“逻辑与”，简称“与” andtrue && flase
||“逻辑或”，简称“或” ortrue || false
!“逻辑非”，简称“非” not!true
        2.逻辑与&&

                （1）两边都是true才返回true，否则返回false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1. 用我们的布尔值参与的逻辑运算 true && false == false
        // 2. 123 && 456 是值 或者是 表达式 参与逻辑运算？
        // 3. 逻辑与 短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1 结果为假 则返回表达式1
        console.log(123 && 456); // 456
        console.log(0 && 456); // 0
        console.log(1 && 1+2 && 456*123); // 56088
        console.log('' && 1+1 && 456*123); // ''
        // 如果有空的或者否定的为假 其余都是真的 0 '' null undefined NaN
    </script>
</head>
<body>
    
</body>
</html>
        3.逻辑或||

                （1）两边都为false 才返回false，否则返回true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 4. 逻辑或 短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
        console.log(123 || 456); // 123
        console.log(123 || 456 || 456+123); // 123
        console.log(0 || 456 || 456+123); // 456
    </script>
</head>
<body>
    
</body>
</html>
        4.逻辑非!

                （1）逻辑非（!）也叫做取反符，用来取一个布尔值相反的值，如true的相反值时false

        5.短路运算（逻辑中断）

                （1）短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值；

                （2）逻辑与

                        1）语法：表达式1 && 表达式2

                        2）如果第一个表达式的值为真，则返回表达式2

                        3）如果第一个表达式的值为假，则返回表达式1

        6.逻辑中断（短路操作）

                （1）逻辑或

                        1）语法：表达式1 || 表达式2

                        2）如果第一个表达式的值为真，则返回表达式1

                        3）如果第一个表达式的值为假，则返回表达式2

六、赋值运算符
        1.概念：用来把数据赋值给变量的运算符
赋值运算符说明案例
=直接赋值var userName = '我是值';
+=、-=加、减一个数后再赋值var age = 5; age +=5; 10
*=、/=、%=乘 除 取模 后再赋值var age = 2; 2 *= 10; 20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 10;
        // num += 5; // 15 加等于
        // num -= 5; // 5  减等于
        // num *= 5; // 50  乘等于
        // num /= 5; // 2   除等于
        // num %= 3 // 1    余数等于
        console.log(num);
    </script>
</head>
<body>
    
</body>
</html>
七、运算符优先级

        1.

优先级运算符顺序
1小括号()
2一元运算符 ++ -- !
3算术运算符先 * / % 后 +-
4关系运算符> >= < <=
5相等运算符== !== === !==
6逻辑运算符先&& 后||
7赋值运算符=
8逗号运算符,

        2.一元运算符里面的逻辑非优先级很高

        3.逻辑与 比 逻辑或 优先级高

清袖*
关注
  • 17
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript学习笔记 delete运算符
12-12
} 二、delete的返回值 delete是普通运算符，会返回true或false。规则为：当被delete的对象的属性存在并且不能被删除时 返回false，否则返回true。 这里的一个特点就是，对象属性不存在时也返回true，所以返回值并非...
Javascript学习笔记-详解in运算符
01-19
一、判断 语法 prop in objectName 如果objectName指向的对象中含有prop这个属性或者键值，in运算符会返回true。 代码如下: var arr = [‘one’,’two’,’three’,’four’]; arr.five = ‘5’; 0 in arr;//true ...
新人学习笔记之（JavaScript循环）
2401_83311390的博客
05-28 795
JavaScript循环
新人学习笔记之（流程控制分支）
2401_83311390的博客
05-28 387
流程控制分支
lua学习笔记_lua goto
2401_84182271的博客
04-30 703
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8m1N0Ihi-1665330518835)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20221004001207777.png)]元表并不是一个普通的表，而是一套自定义的计算规则，用这些规则，可以实现表与表之间的运算。而这些规则，都以函数的方式，写在元表中，所以又称为元方法(就是写在元表里面的方法)元表 metatable。没有元表，返回nil。
【Typescript】学习笔记（一）之基础类型_typegoose typegoose 学习
2401_84181975的博客
05-06 826
console.log(message.toUpperCase()) //报错：对象可能为“未定义”。request(options.url, options.method) //这里会报错。console.log("x坐标: ", point.x)console.log("y坐标: ", point.y)console.log("x坐标: ", point.x)console.log("y坐标: ", point.y)console.log("z坐标: ",point.z)方式一: 值。
JavaScript百炼成仙读书笔记
m0_46203525的博客
11-30 2574
JavaScript百炼成仙 作者：剽悍一小兔 没事儿的时候多读书还是蛮好的，这本书给我的感觉就像是真的在看修仙人士不断修炼去打怪升级一样，以不一样的视角重新温习了一遍前端的知识，和以往所读的其他书籍有些不同，看此书的时候心态就很放松，还可以学到以前以前遗漏的知识，读了之后很想看该书后续书籍。 目录 一、掌握JavaScript基础 二、基础考核 三、jQuery和DOM 四、Vue的妙处 五、Vue-cli项目 六、ES6语法 引言：目标和结果自己要分清楚。 一、JavaScript基础 1、声明变量
前端-js-基础知识学习笔记，字节跳动面试自我介绍
m0_63174811的博客
04-19 520
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
从四个维度，解读对于Java学习新人的建议：心态、 方法、阅读、笔记
m0_63328033的博客
01-21 1210
你要知道你的学习是通过看书，视频，也就是被动式的，说白了就是知识点还不是你的，所以你需要大脑被你的意识控制，通过反复的理解和记忆，才不会被忘记太多。至于其它书籍，包括由机械工业出版社编译的《Effectiva Java》《Java编程思想》都是比较权威和经典的著作，但是不推荐在初学就接触，不但不会提示效率，还会让你学习进度明显迟滞，会让你懂的很多，实际操作代码……还有一个核心环节，就是记笔记。开头这些章节，节奏慢一点，多锻炼自己的编程思维，思维理解扎实了，才能在提高篇更轻松的，用编程的思维来学习编程。
2024年一文搞定Dart入门（学习笔记），嵌入式工程师面经
2401_84520215的博客
05-06 671
只要是程序员，不管是Java还是Android，如果不去阅读源码，只看API文档，那就只是停留于皮毛，这对我们知识体系的建立和完备以及实战技术的提升都是不利的。真正最能锻炼能力的便是直接去阅读源码，不仅限于阅读各大系统源码，还包括各种优秀的开源库。腾讯、字节跳动、阿里、百度等BAT大厂 2019-2021面试真题解析资料太多，全部展示会影响篇幅，暂时就先列举这些部分截图网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
小聂的JavaScript学习日记，高级前端面试题及答案2024
m0_60452141的博客
04-20 845
浏览器分成两部分：渲染引擎和JS引擎。
JavaScript学习笔记之数组求和方法
10-22
主要介绍了JavaScript学习笔记之数组求和方法的相关资料,需要的朋友可以参考下
javascript学习笔记
11-24
ECMAScript提供了变量、数据类型、运算符、语句和函数等基本编程元素，是JavaScript的基础。 文档对象模型（DOM）是JavaScript处理HTML和XML文档的标准接口。通过DOM，JavaScript可以查找、访问和修改网页的结构。...
Lumos学习王佩丰Excel第四讲：排序与选择
Sunshine_XX的博客
07-10 289
自定义排序演示：工资条拆分的演示：如果遇到很长的表，标题只存在于顶端，打印出来观感不好，可以这样做：有些版本的excel复制筛选数据容易把背后隐藏的所有数据都复制上去，这时可选中定位条件的“可见单元格”选项，复制粘贴即可。并排表示且，错排表示或。ctrl+shift+↓+→全选，演示说明：回头学原理，先记住一句话，要想筛选对，条件表头不要对。
Autoware.universe 高效学习第三章 -- 智驾技术务虚会之智驾技术栈讨论 其一
cy1641395022的博客
07-10 669
Autoware.universe 高效学习第三章 -- 智驾技术务虚会之智驾技术栈讨论 其一
ROS基础学习-ROS运行管理
周陽讀書
07-11 732
ROS运行管理。
Qt/QML学习-动画元素
QT、QML
07-12 667
Qt/QML学习-动画元素
Python 学习中什么是异常处理，如何使用 try、except、finally ？
最新发布
Itmastergo的博客
07-12 598
异常是程序执行过程中发生的非正常事件，这些事件会中断正常的程序指令流。当程序遇到错误时，Python 会抛出一个异常对象，异常对象包含了错误的类型和相关的信息。
python学习笔记+运算符
02-28
Python学习笔记是一种记录和整理Python编程知识的方式，可以帮助学习者系统地学习和掌握Python语言的各种特性和用法。学习笔记通常包括Python的基础语法、常用数据类型、控制流程、函数、模块、面向对象编程等内容。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值