首页 > 编程语言 >前端基础之JavaScript运算符

前端基础之JavaScript运算符

时间:2024-03-21 16:24:48浏览次数:33  
标签:10 Infinity 前端 JavaScript NaN 运算符 false 赋值

一、什么是运算符

运算符,顾名思义就是在运算中的符号,例如加法中的 ”+“ 就是一个运算符。严谨来说,运算符是一种告诉编译器执行特定的数学或逻辑操作的符号

二、运算符的分类

JavaScript 中的运算符可以分为多种类型,包括算术运算符、赋值运算符、比较运算符、逻辑运算符、位运算符等。以下是这些运算符的详细解释:

1. 算术运算符

  • +:加法运算符,用于相加两个值。
  • -:减法运算符,用于相减两个值。
  • *:乘法运算符,用于相乘两个值。
  • /:除法运算符,用于相除两个值。
  • %:取模运算符,返回除法操作的余数。
  • ++:递增运算符,将操作数的值增加 1。
  • --:递减运算符,将操作数的值减少 1。

加法运算
(1)两个字符串进行加法运算,则作用是连接字符串,并返回;

(2)任何字符串 + “ ”空串做运算,都将转换为字符串,由浏览器自动完成,相当于调用了String ( )

运算顺序

  • 先乘除取余,再算加减,有括号先算括号

特殊NaN

  • 只要NaN参与运算得到的结果也是NaN

隐式转换

  • 隐式转换:null转换成0,undefined转换成NaN等

2. 赋值运算符

  • =:赋值运算符,用于将右侧的值赋给左侧的变量。
  • +=-=*=/=:分别表示加、减、乘、除后再赋值给左侧的变量。

例如: a+=3 等价于 a=a+3

3. 比较运算符

  • =====:相等运算符,分别表示相等和严格相等。
  • !=!==:不相等运算符,分别表示不相等和严格不相等。
  • ><>=<=:大于、小于、大于等于、小于等于运算符。

(1)特殊NaN

  • NaN是Not a Number的缩写,表示一种特殊的浮点数,它与任何数值都不相等,包括自己。
isNaN(NaN) // true
isNaN(Infinity) // false
isNaN(-Infinity) // false
isNaN("hello") // true
isNaN(true) // false
  • 在比较两个NaN值时,它们并不严格相等,而是被视为相等(因为JavaScript中的所有NaN值都被视为“不同”)。
  • 但是,在非严格比较中,如果两个NaN值同时出现在同一个运算中,则它们被视为相等。

(2)Infinity

  • Infinity是JavaScript中的一个特殊数字,表示正无穷大或负无穷大。

  • 它是双精度浮点数类型的最大或最小值。

  • Infinity ===Infinity 其他要根据情况而定

Infinity == Infinity // true
Infinity != Infinity // false
Infinity > Infinity // false
Infinity < Infinity // false
Infinity >= Infinity // true
Infinity <= Infinity // true
  • 注意,尽管两个Infinity值在比较中被认为是相等的,但它们并不严格相等。
  • 只有在它们都作为右操作数用于逻辑运算时才会被认为是相等的。
  • 此外,由于Infinity是一个特殊的数字类型,因此不能使用typeof运算符来检查其类型。
  • 相反,可以使用isFinite函数来检查一个值是否有限制:
isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(10) // true

(3)null

null >=0 
// true

null <=0 
// true

null==undefined
// true 

(4)字符串

  • 字符串是比较字符的编码顺序,从前往后 0-9,a-z,A-Z

(5)比较顺序

  • 从前往后比较,前面比较的结果再与后面比较 例如:3>2>1 结果为false

4. 逻辑运算符

  • &&:逻辑与运算符,当两个操作数都为真时返回真。
  • ||:逻辑或运算符,当两个操作数中有一个为真时返回真。
  • !:逻辑非运算符,用于取反操作数的值。
  • NaN 0 控制符 null undefined为false。非0 非空 非NaN的数字 非空字符串转化成true

注意:一定要注意到底什么时候返回的是布尔值(比较的时候),什么时候返回的是数据(逻辑运算的时候)

思考题:

!5 && '5'输出结果是____
5

5. 位运算符

  • &:按位与运算符。
  • |:按位或运算符。
  • ^:按位异或运算符。
  • ~:按位非运算符。
  • <<:左移运算符。
  • >>:有符号右移运算符。
  • >>>:无符号右移运算符。

6.一元运算符

(1)++a

  • 先增加后赋值
  • 先增加后赋值,即先将变量的值加一,然后再返回原来的值,并将其赋值给表达式的右侧变量。
var a = 10;
// undefined

var res2 = ++a;
// undefined

res2
// 12

a
// 11
  • ++ 在前面时
  • 先将变量 a 的值加一得到 11
  • 然后返回原来的值 10 并将其赋值给 res2 变量
  • 因此 res2 的值为 12

(2)a++

  • 先赋值后增加
  • 先赋值后增加,即先将变量的值赋给表达式的左侧变量,然后再将变量的值加一。
var a = 10;
// undefined

var res1 = a++;
// undefined

res1
// 10

a
// 11
  • ++ 在后面时
  • 先将变量 a 的值赋给 res1 变量,得到 10
  • 然后将变量 a 的值加一得到 11
  • 所以 res1 的值为 10

(3)--

  • 减一操作符,它可以用于减少变量的值。
let a = 10;
console.log(a); // 输出:10

a--;
console.log(a); // 输出:9

let b = "hello";
b--;
// NaN

console.log(b); 
// NaN
  • 首先声明了一个变量 a 并将其设置为 10
  • 然后我们使用 -- 操作符将 a 的值减一,因此 a 的新值为 9
  • 最后,我们将 -- 操作符应用于字符串变量 b,这将导致错误,因为不能从字符串中减去数字。

6. 其他运算符

  • ?::条件(三元)运算符,用于简单的条件判断。

    • 三元运算符是一个条件运算符,它将根据条件的真假来返回两个表达式中的一个。它的一般形式如下:

      condition ? expr1 : expr2
      

      其中,"condition"是一个逻辑表达式,如果它返回true,则执行并返回expr1,否则执行并返回expr2。

  • ,:逗号运算符,用于在表达式中分隔多个表达式,返回最后一个表达式的值。

三、运算优先级

  • () -> 一元 -> 算数 -> 比较 -> 逻辑 -> 赋值
  • 括号最高
  • 一元运算
  • 算数运算
  • 关系运算
  • 相等运算
  • 逻辑运算 先&& 再 ||
  • 赋值运算

标签:10,Infinity,前端,JavaScript,NaN,运算符,false,赋值
From: https://www.cnblogs.com/xiao01/p/18087637

相关文章

  • 前端基础之JavaScript流程控制
    一、if判断在JavaScript中,if语句是一种常见的条件语句,用于根据条件执行不同的代码块。除了基本的if语句外,还有if...else、if...elseif...else等变体,用于处理多个条件的情况。1.if语句if语句用于在条件为真时执行特定的代码块。语法:if(condition){//当条件......
  • 前端基础之JavaScript对象
    一、什么是对象现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如,一本书、一辆汽车、一个人可以是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字......
  • 前端基础之JavaScript函数
    一、什么是函数在JavaScript中,函数是一种可重复使用的代码块,用于执行特定任务或计算。函数可以接受参数,执行特定的操作,并返回一个值。二、函数的声明函数可以通过函数声明、函数表达式或箭头函数来定义。函数声明:functionfunctionName(parameters){//函数体......
  • JavaScript 实现通过 id 数组获取可展示的 name 拼接字符串
    JavaScript实现通过id数组获取可展示的name拼接字符串场景有一个包含许多对象的数组,每个对象都包含了一个标识(id)和一个名称(name)。想要从这个数组中选出特定的一些对象,这些对象的标识(id)在另一个数组中已经给出。然后,想把这些选出来的对象的名称(name)连接成一个字符串,用逗号分......
  • 测试面经 之 如何判断 Bug 是前端问题还是后端问题
    常见软件测试问题,如何判断一个Bug是Bug,并且如何判断该bug是前端问题还是后端问题。1.记录Bug:首先,作为一个专业的测试,无论该bug怎样,是否太浅显,都需要及时记录该问题。将该问题的标题,问题描述,复现步骤,环境版本,测试环境,测试账号,服务器端日志,报错截图,接口入参和......
  • [踩坑回顾]前端项目打包编译之后,页面访问异常:exports is not defined.
    周一遇到的问题,是qiankun框架的一个vue2子项目,使用yudao开源框架二次开发。 排查:1.开发环境正常。2.项目迁移前使用的babel、package配置均未被使用过。3.考虑打包使用的命令错误。发现未按照官方教程使用npm进行编译,后端同事用pom.xml文件使用pnpm命令进行编译。 解......
  • 前端学习-vue学习009-侦听器
    官方教程链接侦听器:import{ref,watch}from'vue'constcount=ref(0)watch(count,(newCount)=>{console.log(`newcountis:${newCount}`)})pre标签:识别json对象中的\n\t等转义字符,展示原始的JSON对象结构。v-ifv-elseasyncawaitfetch<template>......
  • C++内置 new /delete 运算符浅析
    全文目录malloc()/free()原型解析简化版本用法举例new/delete静态/动态类型new/delete运算符原型常用但没有注意区分的例子使用new分配对象的生存期那new/delete都做什么事呢几个注意点写在最后malloc()/free()提到new/delete运算符就不得不说malloc()/f......
  • 尚硅谷Vue3入门到实战,最新版vue3+TypeScript前端开发教程
    1.创建Vue3工程npmcreatevue@latest或者npminitvue@latest输入项目名和需要的工具后进入项目如果项目报错使用命令安装Node.js的项目依赖包npmi启动vue项目,查看项目是否创建完成npmrundev直接删掉src然后创建src文件夹,在该文件夹中创建main.ts和App.vue文件......
  • 9.JavaWeb& javaScript基础
    目录导语:一、JavaWeb概述二、JavaScript基础概念:功能:1.基本语法(1)与html结合方式(2)注释(3)数据类型(4)变量(5)运算符(6)流程控制语句:(7)JS特殊语法:案例:99乘法表2.基本对象(1)Function:函数(方法)对象(2)Array:数组对象(3)Boolean(4)Date:日期对象(5)Math:数学对象(6)Number(7)String(8......