1. Toy模板网首页
  2. > Toy博客

Javascript-中常用运算符

7月前 作者：为梦想而战@大学生 分类：Toy博客 阅读(33) 违法举报

这篇具有很好参考价值的文章主要介绍了Javascript-中常用运算符。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

数据类型

常见运算

算术运算符

比较运算符

逻辑运算符

赋值运算符

自增/减运算符

三目运算符

位运算符

数据类型

在 JS 中有以下两大类：

  • 基本数据类型

    • 数值类型（Number）

      • 整数 (int)

      • 浮点数（float）

    • 布尔类型（Boolean），有两个值：true 和 false

    • 字符串（String），它可以是单引号包裹的数据，也可以是双引号包裹的数据。在 JS 推荐使用单号

    • 空（null），表示不存在

    • 未定义（undefined），表示变量定义了，但是没有给它赋值就使用这个变量。

    • 不是数字（NaN - Not a Number），判断是否为数字，如果不是返回 true， 如果是返回 false

  • 引用数据类型

    • 数组（Array），它是用于存储一组相同类型的数据

    • 对象（Object），在 JS 万物皆对象

判断数据类型我们在 JS 中是通过typeof 运行符来实现的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
</head>
<body>
<script>
    // 1. 定义一个整数类型的变量
    let num = 10
    console.log(num, typeof num); // 在控制台中输出变量的值以及变量的类型
​
    // 2. 定义一个浮点类型的变量
    let money = 10000.5
    console.log(money, typeof money);
​
    // 3. 定义一个布尔类型的变量
    let bool = false
    console.log(bool, typeof bool);
​
    // 4. 定义一个字符串类型的变量
    let str1 = "hello"
    console.log(str1, typeof str1);
    let str2 = 'world'
    console.log(str2, typeof str2);
​
    // 5. 空值类型，它只有一个值 null
    let nullVal = null
    console.log(nullVal, typeof nullVal);
​
    // 6. 未定义
    let age
    console.log(age, typeof age)
​
    // 7. 判断是否为数字
    let n = 'a'
    console.log(isNaN(n), typeof isNaN(n))
</script>
</body>
</html>

常见运算

算术运算符

在 JS 算术运算符包含 加、减、乘、除、取模等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>算术运算数</title>
</head>
<body>
<script>
    // 数值类型的算术运算
    let a = 10
    let b = 2
    // 加法运算
    let r = a + b
    console.log(r);
    // 减法运算
    r = a - b
    console.log(r);
    // 乘法
    r = a * b
    console.log(r);
    // 除法
    r = a / b
    console.log(r);
    // 取模，得到除法的余数
    r = a % b
    console.log(r);
    // 幂运算
    r = a ** b
    console.log(r)
​
    console.log('-----------------------------')
​
    // 布尔类型的算术运算
    let b1 = true
    let b2 = true
    r = b1 + b2
    console.log(r)  // 当两个布尔值进行加法运算时，会把 true 变为 1，false 变为 0 后再作运算
    r = b1 - b2
    console.log(r)
    r = b1 / b2
    console.log(r)
    r = b1 * b2
    console.log(r)
​
    // 字符串的算术运算
    let s1 = '30'
    let s2 = '20'
    r = s1 + s2
    console.log(r)   // 字符串作加法操作其实就是进行字符串拼接操作
    r = s1 - s2
    console.log(r, typeof r)  // 当字符串作减法操作时，它会看这个字符串能不能转换为数字，如果能则转换后再计算，如果不能则输出 NaN
    r = s1 * s2
    console.log(r, typeof r) // 当字符串作乘法时，也会先看这个字符串能不能转换为数字，如果能则按数值进行计算，否则输出 NaN
​
    console.log('-----------------------------')
​
    // 空值
    let n1 = null
    let n2 = null
    r = n1 + n2
    console.log(r, typeof r)
​
    let n3 = 5
    r = n1 + n3
    console.log(r, typeof r)  // 当空值进行算术运算时，它会转换为数值 0，然后再作计算
​
    // 未定义
    let un1 = undefined
    let un2 = undefined
    r = un1 + un2
    console.log(r)   // 未定义类型不能进行算术运算
</script>
</body>
</html>

比较运算符

比较运算也中关系运算。它是用于比较两个数之间的大小，结果为一个布尔类型的值。比较运算符包含：大于（>）、小于（<）、等于（==）、大于等于（>=）、小于等于（<=）、不等于（!=）、全等于（===）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较运算符</title>
</head>
<body>
<script>
    let n1 = 10
    let n2 = 20
    r = n1 > n2
    console.log(r, typeof r)
    r = n1 < n2
    console.log(r, typeof r)
    r = n1 >= n2
    console.log(r, typeof r)
    r = n1 <= n2
    console.log(r, typeof r)
    r = n1 == n2
    console.log(r, typeof r)
    r = n1 != n2
    console.log(r, typeof r)
    console.log('-------------------------------')
    let n3 = 5
    let n4 = 5
    let n5 = '5'
    r = n3 == n4
    console.log(r)
    r = n3 === n4
    console.log(r)
​
    r = n3 == n5  // 使用 == 等号的方式来进行比较时，是比较的两个变量转换为数值类型后的值的大小。
    console.log(r)
    r = n3 === n5 // 使用 === 等号的方式进行比较时，比较的是值的大小以及它的类型是否相同。只两者都相同才为 true，否则为 false
    console.log(r)
​
    console.log('-----------------------------')
​
    //----------布尔类型的比较运算---------------------
    let b1 = true
    let b2 = false
    r = b1 === b2
    console.log(r)    // 使用布尔值来做比较运算是没有意义的，因为比较运算的结果本身就是布尔类型的值。
​
    console.log('-----------------------------')
​
    let s1 = 'hello'
    let s2 = 'hallo'
    s1 = '100'
    s2 = '10'
    s1 = 'World'
    s2 = 'world'
    r = s1 === s2
    r = s1 > s2
    console.log(r)
</script>
</body>
</html>

逻辑运算符

逻辑运算符主要是指多个条件之间的关联关系，逻辑运算符有：与（&&）、或（||）以及非（!）这三种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算符</title>
</head>
<body>
<script>
    let n1 = 5
    let n2 = 6
    let b1 = true
    let b2 = false
​
    let r = n1 && n2 && b1
    console.log(r, typeof r) // 使用与运算时，只有全部都是 true ，结果才是 true，否则结果为 false
​
    r = n1 > n2 || b1 || b2
    console.log(r)   // 使用或运算时，只有全部为 false，结果才是 false，否则结果为 true
​
    r = !b1
    console.log(r)
    r = !b2
    console.log(r)  // 使用非运算时，如果本身为 true 则结果为 false，如果本身为 false 则结果为 true，即取反
​
    r = n1 < n2 & b2
    console.log(r)
    r = b1 & b2
    console.log(r)
    r = b1 | b2
    console.log(r)
</script>
</body>
</html>

在逻辑运算符中，也可以使用 & 号来表示与运算，使用 | 符号来表示或运算。它们与 && 以及 || 是有区别的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算符的区别</title>
</head>
<body>
<script>
    let a = 5
    let b = 0
    let bool = false
    //r = bool && a / b
    r = bool || a / b
    console.log(r)   // && 是具有短路效果的。|| 也是具有短路效果的
</script>
</body>
</html>

赋值运算符

在 JS 中赋值运算符有以下几种：

  • =：将它这符号右边的值赋给这个符号左边的变量

  • +=：把符号右边的值与这个变量之前的值相加后再赋给这个变量

  • -=：把符号右边的值与这个变量之前的值相减后再赋给这个变量

  • *=：把符号右边的值与这个变量之前的值相乘后再赋给这个变量

  • /=：把符号右边的值与这个变量之前的值相除后再赋给这个变量

  • %=：把符号右边的值与这个变量之前的值取模后再赋给这个变量

  • **=：把符号右边的值与这个变量之前的值幂运算后再赋给这个变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>赋值运算符</title>
</head>
<body>
<pre>
 =：将它这符号右边的值赋给这个符号左边的变量
 +=：把符号右边的值与这个变量之前的值相加后再赋给这个变量
 -=：把符号右边的值与这个变量之前的值相减后再赋给这个变量
 *=：把符号右边的值与这个变量之前的值相乘后再赋给这个变量
 /=：把符号右边的值与这个变量之前的值相除后再赋给这个变量
 %=：把符号右边的值与这个变量之前的值取模后再赋给这个变量
 **=：把符号右边的值与这个变量之前的值幂运算后再赋给这个变量
  </pre>
​
<script>
    let a = 10   // 使用 = 进行赋值运算，它是将等号右边的值赋给等号左边的变量
    console.log(a)
​
    a += 10  // 它等价于 a = a + 10
    console.log(a)
​
    a -= 10   // 它等价于 a = a - 10
    console.log(a)
​
    a *= 10   // 它等价于 a = a * 10
    console.log(a)
​
    a /= 10   // 它等价于 a = a / 10
    console.log(a)
​
    a %= 10  // 它等价于 a = a % 10
    console.log(a)
​
    a **= 10  // 它等价于 a = a ** 10 即 0 的 10 次方
    console.log(a)
</script>
</body>
</html>

自增/减运算符

严格来说，它是属于算术运算符中，我们在这里把单独拿出来进行讲。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自增自减运算符</title>
</head>
<body>
<script>
    let a = 20
    console.log(a)
    //a = a + 1
    //a += 1
    //a++             // 这就是自增，它是在原来值的基础上加 1
    ++a
    console.log(a)
​
    //a -= 1
    //a--         // 这就是自减，它是在原来值的基础上减 1
    --a
    console.log(a)
</script>
</body>
</html>

问题：a++ 和 ++a 有什么区别？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自增两种写法的区别</title>
</head>
<body>
<script>
    let a = 10
    let b = a++ + ++a + a++ + ++a
    console.log(b, a)   // 50  48
</script>
</body>
</html>

根据上面的代码运行的结果以及分析的过程，我们发现：++ 后是先使用它的值，然后自己再加 1，而 ++ 在前是先自己加 1 后，再把结果进行相加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自增两种写法的区别</title>
</head>
<body>
<script>
    let a = 10
    //let b = a++ + ++a + a++ + ++a
    //console.log(b, a)   // 48  14
​
    let b = ++a - a-- + --a + a++ - a--
    //  b = 11  - 11  + 9   + 9  - 10
    //     a=11  a=10   a=9  a=10  a=9
    console.log(b, a)   // 8 9
</script>
</body>
</html>

总结：++在前是先自增再运算，++在后是先运算再自增。

三目运算符

三目运算符出现的目的是为了简化 if 语句。它的语法格式为：变量 = 表达式 ? 值1 : 值2。当表达为 true 时，取值1，否则取值2。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三目运算符</title>
</head>
<body>
<script>
  let a = 100
  let b = 15
  let c  = a > b ? 'a大于b' : 'a小于b'
  console.log(c)
</script>
</body>
</html>

位运算符

位运算符会涉及到二进制的计算，会有补码、原码、反码。位运算符有 & 、| 、^ 、<< 、>> 以及 >>>文章来源地址https://www.toymoban.com/news/detail-820998.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位运算符</title>
</head>
<body>
<script>
    let a = 5
    let b = 6
​
    //let c = a & b  // 4
    //let c = a | b  // 7
    //let c = a ^ b   // 3
    //let c = a << 2   // 20
    let c = a >> 2   // 1
    console.log(c)
</script>
</body>
</html>

到了这里，关于Javascript-中常用运算符的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【JavaScript】相等运算符（== 和 ===）

    【JavaScript】相等运算符（== 和 ===）

    如果x和y的类型相同，JavaScript会用equals 方法比较这两个值或对象。 没有出现在表格中的情况都会返回 false。（表格中的方法都是内部规定的） 对于 toNumber 方法： 对于 toPrimitive 方法： 第二行代码之所以为 false，就是因为 true 先转化为数 1，因此开始比较 \\\'aaa\\\' == 1 ；然后 ‘

    2024年02月07日
    浏览(39)
  • JavaScript系列从入门到精通系列第九篇：JavaScript中赋值运算符和关系运算符以及Unicode编码介绍

    JavaScript系列从入门到精通系列第九篇：JavaScript中赋值运算符和关系运算符以及Unicode编码介绍

    文章目录 一：赋值运算符 1：= 2：+= 3：-= 4：*= 5：/= 6：%= 二：关系运算符  1：数值类型关系运算 (一)： (二)：= (三)： (四)：= 2：其他类型关系运算 三：Unicode编码表         =右侧的值可以赋值给左侧的变量。         上边这两个写法是一样的。                 

    2024年02月08日
    浏览(41)

  • JavaScript系列之条件运算符

    条件（三元）运算符是 JavaScript 仅有的使用三个操作数的运算符。一个条件后面会跟一个问号 （?） ，如果条件为 true ，则问号后面的表达式 A 将会执行；表达式 A 后面跟着一个冒号 （:） ，如果条件为 false ，则冒号后面的表达式 B 将会执行。本运算符经常作为 if 语句的简

    2023年04月08日
    浏览(40)
  • JavaScript运算符及优先级

    JavaScript运算符及优先级

    一、算数运算符 算术运算符（+，-， * ，/，%【重要】，++【重要】，--） 其中 + 的左边和右边有 \\\" \\\", 表示拼接 i++，表示先赋值后+1     ++i ，表示先+1后赋值  同理减法也是如此 算数运算中，+ 可以进行隐式迭代，将字符串数字转化为Number类型 二、比较算数运算符 比较运算

    2024年02月07日
    浏览(29)

  • 【JavaScript_1】入门知识、数据类型、运算符

    1、var变量赋值不需要强制转换，可以直接进行赋值。 var a=1; a=“hello”; 2、JavaScript的工作方式：先解析代码，获取所有被声明的变量，然后再一行一行地运行。 因此导致所有的变量声明语句都会被提升到代码的头部，这就叫做变量提升。 eg: console.log(a); var a=1;-----------var a;

    2024年02月12日
    浏览(36)

  • 探索JavaScript中强大的三元运算符：简洁、灵活、提升代码效率

    三元运算是一种在编程中常见的条件表达式。它使用三个操作数进行条件判断，并返回两个值中的一个，具体取决于条件的真假。 三元运算符的优势：相比于使用传统的 if-else 语句，三元运算符可以简化代码并提高代码的可读性。它可以使条件判断和返回结果在一行内完成，

    2024年01月16日
    浏览(43)
  • javascript打飞机程序8x8x飞机大战js打飞机程序，飞机大战知识点包含了JavaScript面向过程的全部知识点，包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。...

    javascript打飞机程序8x8x飞机大战js打飞机程序，飞机大战知识点包含了JavaScript面向过程的全部知识点，包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。...

    讲解了JavaScript编程语言制作游戏界面，添加游戏控制、制作元素动画、制作多元素场景，添加碰撞功能、制作精灵动画等功能 源码如下： html：

    2024年02月16日
    浏览(46)

  • MySQL常用运算符详细介绍

     在 MySQL 中，可以通过运算符来获取表结构以外的另一种数据。例如，学生表中存在一个 birth 字段，这个字段表示学生的出生年份。如果想得到这个学生的实际年龄，可以使用 MySQL 中的算术运算符用当前的年份减学生出生的年份，求出的结果就是这个学生的实际年龄了。

    2024年02月08日
    浏览(28)
  • C#常用运算符的优先级

    C#常用运算符的优先级

    运算符在C#编程语言中扮演着重要的角色，用于执行各种计算和操作。了解运算符的优先级是编写高效和正确代码的关键。本文将深入探讨C#中38个常用运算符的优先级划分和理解，并提供详细的说明和示例，以帮助读者更好地理解运算符的使用。 算术运算符用于执行基本的数

    2024年02月05日
    浏览(32)

  • js常用运算符和表达式

    JavaScript常用的运算符和表达式有： 用于执行基本的数学运算，包括加法（+）、减法（-）、乘法（*）、除法（/）、取余（%）等。 用于将值赋给变量，包括等号（=）、加等于（+=）、减等于（-=）、乘等于（*=）、除等于（/=）等。 用于比较两个值的大小或是否相等，包括等

    2024年02月09日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包