JavaScript 算术运算符

最新推荐文章于 2024-10-30 09:00:00 发布
最新推荐文章于 2024-10-30 09:00:00 发布
阅读量446 收藏
点赞数
分类专栏： 前端JavaScript 文章标签： javascript 前端 运算符
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html_z/article/details/128837721
版权
这篇文章介绍了JavaScript中的基本运算符，包括加减乘除及求余数，三元运算符，赋值运算符，以及比较和逻辑运算符的用法。通过示例代码展示了如何使用这些运算符进行数值和逻辑判断，并提供了实际的场景应用，如判断数字奇偶性和条件表达式的运用。
摘要由CSDN通过智能技术生成

JavaScript 算术运算符

  • 加减乘除以及取模（求余数）、++、–

    <!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>
  </head>
  <body></body>
  <script>
    // + - * /
    console.log(10 + 20); // 30
    console.log(10 - 20); // -10
    console.log(10 * 20); // 200
    console.log(10 / 20); // 0.5

    // % 取模或者叫求余数
    // 判断一个数的奇偶性
    function parity(a) {
      if (a % 2 == 0) {
        console.log(a + "这个数是一个偶数");
      } else {
        console.log(a + "这个数是一个奇数");
      }
    }
    parity(11);
  </script>
</html>

  • 三元运算符

    <!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>
  </head>
  <body></body>
  <script>
    // 三元运算符
    // 判断条件?语句一:语句二

    var a = 1 > 2 ? "真" : "假";

    console.log(a); // 假
  </script>
</html>

  • 案例小知识

    • 在一个表单输入框输入任意一个数字，通过点击按钮判断是否为奇偶数。

      <!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>
  </head>
  <body>
    <input type="number" id="num" />
    <button type="button" id="btn">求奇偶数</button>
  </body>
  <script>
    // 求奇偶数

    // 获取按钮的 DOM 对象
    var btn = document.getElementById("btn");
    // 获取文本框的 DOM 对象
    // 获取 input 元素文本框内容通过 value 属性
    var num = document.getElementById("num");
    btn.onclick = function () {
      var numValue = num.value;
      var result = numValue % 2 == 0 ? "偶数" : "奇数";
      alert(result);
    };
  </script>
</html>

      在这里插入图片描述

  • 赋值运算法

    <!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>
  </head>
  <body></body>
  <script>
    // 赋值运算符 =
    var a = 10,
      b = 10,
      c = 10,
      d = 10,
      e = 10;

    // += -= /= *= %=
    b += 5; // b+5 在赋值给b  b=b+5
    c *= 5; // c*5 在赋值给c  b=b*5
    d /= 5;
    e %= 5;

    console.log(a, b, c, d, e);
    // 10 15 50 2 0
  </script>
</html>

  • +和字符串的运算，做字符串的拼接

  • 比较运算符

    • 比较运算符的返回值 是一个boolean类型的值[true、false]

    • =比较值是否相等，不比较类型

      <!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>
  </head>
  <body></body>
  <script>
    // 比较运算符的返回值 是一个boolean类型的值 [true、false]

    // = 比较相等
    var a = 5 == 5; // 将 5==5 的比较结果赋值给a
    console.log(a); // true

    var b = 5 == "5"; // 只比较数值 不比较类型
    console.log(b); // true
  </script>
</html>

    • ===比较值是否相等，以及类型是否相等

      <!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>
  </head>
  <body></body>
  <script>
    // === 比较值和类型
    var c = 5 === 5;
    console.log(c); //true
    var d = 5 === "5";
    console.log(d); //false
  </script>
</html>

    • !=不等于

    • !==不绝对等于

      <!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>
  </head>
  <body></body>
  <script>
    // != 不等于 只比较值
    var a = 5 != "5";
    console.log(a); //false
    // !== 比较值以及类型
    var b = 5 !== "5";
    console.log(b); // true
  </script>
</html>

    • >、>=、<、<=

      <!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>
  </head>
  <body></body>
  <script>
    // < > <= >=
    console.log(10 < 5); // false
    console.log(10 > 5); // true
    console.log(10 >= 10); // true
    console.log(10 <= 10); // true
  </script>
</html>

  • 逻辑运算符

    • &&相当于and

      <!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>
  </head>
  <body></body>
  <script>
    // && 短路与 比较两个Boolean类型的表达式
    // 当两个都为 true 则结果为 true
    // 当有一个false 则结果为 false
    // 当两个都为 false 则结果为 false

    var a = 10 > 5; // true
    var b = 10 < 5; // false
    var c = a && b;
    console.log(c); // false
  </script>
</html>

    • ||相当于or

      <!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>
  </head>
  <body></body>
  <script>
    // || 短路或  比较两个Boolean的表达式
    // 当一个为 true 则结果为 true
    // 当两个都为 true 则结果为 true
    // 当两个都为 false 则结果为 false
    var a = true;
    var b = false;
    console.log(a || b); // true
  </script>
</html>

    • !

      <!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>
  </head>
  <body></body>
  <script>
    // ! 逻辑非 取反

    var a = !true;
    console.log(a); // false
  </script>
</html>
BloggerM
关注
专栏目录
JavaScript 的运算符【一】(算术运算符)
妖怪的博客
12-07 375
运算符是处理数据的基本方法，用来从现有的值得到新的值。JavaScript 提供了多种运算符，覆盖了所有主要的运算
JavaScript算术运算符
weixin_44561520的博客
01-20 176
运算符可能不熟悉的人会有点陌生，不过看了这篇文章大概就会了。 运算符包括两种，一种算术运算符，一种赋值运算符。 算术运算符用于执行变量与/或值之间的算术运算。 赋值运算符用于给 JavaScript 变量赋值。 就只说算术运算符，算术运算符里面的加号 + 是用于把值加起来。算术运算符里面还有很多运算符，加减乘除对应 + - * /，意思大部分跟数学差不多 图中我定义x,y分别为5和2，（%这个符号在数学里面是百分比，但在这里不是，%相当余数，打个比方，5除以2还会留下1，那5%2就等于1）分别让x和y相加，
JavaScript算术运算符详解
weixin_44992737的博客
06-21 528
JavaScript算术运算符
6 个 JavaScript 算术运算符
web前端开发
12-02 324
英文 | https://javascript.plainenglish.io/the-6-javascript-arithmetic-operators-you-need-to-know...
JavaScript系列之算术运算符
老__L的博客
07-02 733
算术运算使用的符号，用于执行两个变量或值的算术运算。相加运算符（+）用于对两个操作数进行相加运算，如果操作数中有一方为字符串，则该运算符将两个操作数连接成一个字符串。减法操作符（-）将两个操作数相减，产生它们的差值。乘法运算符（*）计算操作数的乘积。除法运算符（/）计算了两个操作数的商，左边的数是被除数，右边的是除数当一个操作数除以第二个操作数时，取余运算符（%）返回剩余的余数。它与被除数的符号保持一致。
javascript 算术运算符
boonyaxnn的博客
11-29 353
例一:         var a=400;         alert("a="+a*100/50);       例二：         var a=3,b;         var b=a++;         alert("a="+a+",b="+b);
JavaScript 算术运算符和一元运算符
路虽远，行则必至！
06-24 787
一、算术运算符 运算符也叫操作符 【1】概念 通过运算符可以对一个或多个值进行运算，并获取运算结果 比如：typeof 就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回 当对非 Number 类型的值进行运算时，会将这些值转换为 Number，然后在运算 任何值和 NaN 做运算符都得 NaN 【2】讲解 +可以对两个值进行加法运算，并将结果返回 如果对两个字符串进行...
前端必知必会-JavaScript 算术运算符
最新发布
qq_24018193的博客
10-30 503
本文介绍了JavaScript 算术运算符的使用，如有问题欢迎私信和评论。
JavaScript算术运算符以及IF分支结构
Mayllllll的博客
09-14 222
表达式是对一个或者多个变量或者值（操作数）进行运算，并返回一个新值。
JavaScript算术运算符详解：从入门到精通
JavaScript算术运算符是编程中的基础工具，而JavaScript语言本身以其独特的特性和应用场景，成为网页开发不可或缺的一部分。通过学习这些基础知识，初学者可以在短时间内掌握JavaScript的基本用法，进一步深入探索更...
JavaScript 基本认识
HTML_Z的博客
01-26 3761
JavaScript 的基本认识：什么是 JavaScript、JavaScript 的注释以及基本语法结构
JavaScript 高级
HTML_Z的博客
04-16 3138
JavaScript 高级：原型、继承、函数。
web 数据类型
HTML_Z的博客
03-10 1289
数据类型简介、简单数据类型、获取变量数据类型、数据类型的转换
学习函数进阶
HTML_Z的博客
03-31 1057
函数的定义和调用、this的指向、严格模式、高阶函数、闭包、递归
变量 var
HTML_Z的博客
01-26 1048
JavaScript 中变量 var 的认识
JS 高级（继承、函数）
HTML_Z的博客
03-22 948
JS 高级：继承、函数（函数进阶）、高级函数、函数闭包、作用域、作用域链。
JavaScript 运算符
HTML_Z的博客
03-18 721
了解什么是运算符、算术运算符、三元运算符、赋值运算符、用于字符串的 + 运算符、比较运算符、逻辑运算符。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值