首页 > 编程语言 >JavaScript中的运算符

JavaScript中的运算符

时间:2024-10-09 15:51:20浏览次数:10  
标签:10 console log JavaScript 运算符 num var

一、运算符分类

运算符:(operator):也称之为叫操作符。是用来实现赋值、比较和执行运算等功能的符号

javaScript中常用的运算符:

  • 算数运算符
  • 递增和递减运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符

1.算数运算符

概述:算数运算使用的符号,用于执行两个变量或值得算数运算

运算符描述例子
+10 + 20 = 30
-10 - 20 = -10
*10 * 20 = 200
/10 / 20 = 0.5
%取余数(取模)9 % 2 = 1
  • 浮点数的精度问题

    • 浮点数值得最高精确度是17位小数,但是再进行计算得时候其精确度远远不如整数

    • var result = 0.1 + 0.2;   //结果不是0.3,而是:0.300000000000004
      console.log(0.07 * 100);  //结果不是7,而是:7.00000000000000001
      
    • 所以:不要直接判断两个浮点数是否相等!

  • 表达式和返回值

    • 表达式:是由数字、运算符和变量等以能求得数值得有意义排列方法所得组合
    • 简单的理解:是由数字、运算符、变量等组成得式子
    • 表达式最终都会有一个结果,返回给开发者,称之为返回值
console.log(1 + 1);  //2
console.log(1 - 0);  //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

//2. 浮点数算数运算里面会有问题
console.log(0.1 * 0.2); //结果不是3,而是:0.020000000000000004
console.log(0.07 * 100); //结果不是7,而是:7.000000000000001

//3.我们不能直接拿浮点数比较是否相等!
var num = 0.1 + 0.2;
// == 判断两边得数是否相等
console.log(num == 0.3)
//表达式:是由数字、运算符、变量等组成的式子,我们称之为表达式
//在程序员里,我们把右边表达式计算完毕后的结果,返回了给了左边。
var num = 1 + 1;


console.log(1 + 1); //1+1结果返回

2.递增和递减运算符

2.1 递增和递减运算符概述

如果需要反复给数字变量添加或减去1,可以使用递增(++)或递减(--)运算符来完成。

在javaScript中,递增和递减既可以放在变量名的前面也可以放在变量名的后面。

  • 放在变量名的前面,我们可以称为前置递增(递减)运算符
  • 放在变量名的后面,我们可以称之为后置递增(递减)运算符

**注意:**递增和递减运算符必须和变量配合使用

2.2 递增运算符

  • 前置递增运算符

    • 写法如:++num,这就是前置递增,类似于:num = num + 1;但是++num写起来会更简单。

    • **使用口诀:**先自加,后返回值。 如:var a = ++num; 先num加1,然后将加1后的结果返回给变量a

    • var num = 10;
      alert(++num + 10);  //21
      
  • 后置递增运算符

    • 写法如:num++,这就是后置递增,类似于:num = num + 1;但是num++写起来更加单。

    • **使用口诀:**先返回原来的值,后自加。

    • var num = 10;
      alert(10 + num++);  //20
      alert(num);	//11
      
var num = 1;
//希望加1后返回
num = num + 1;//2
//++num;
num++;
console.log(num);

//1.前置递增运算符。使用口诀:先自加,后返回值。 
// var age = 10;
// // ++age;
// age = ++age;
// console.log(age);

//2.后置递增运算符。使用口诀:先返回原来的值,后自加。
var p = 10;
console.log(10 + p++); //20
var a = 10;
++a;             //11
var b = ++a + 2; //14
console.log(b);  //14

var c = 10;
c++;              //11
var d = c++ + 2;  //13
console.log(d);  //13

var e = 10;         
var f = e++ + ++e;//22
console.log(f);     //22

//后置自增,先表达式返回值原值。后面的变量再自加1

var z = 10;
var z2 = z++ + z;
console.log(z2)

2.3 递减运算符

  • 前置递减运算符

    • 写法如:--num,这就是前置递增,类似于:num = num - 1;但是--num写起来会更简单。

    • **使用口诀:**先自减,后返回值。 如:var a = --num; 先num减1,然后将减1后的结果返回给变量a

    • var num = 10;
      alert(--num + 10);  //19
      
  • 后置递减运算符

    • 写法如:num--,这就是后置递增,类似于:num = num - 1;但是num--写起来更加单。
    • **使用口诀:**先返回原来的值,后自减。

3.比较运算符

3.1 概述

比较运算符是两个数据进行比较时所使用的运算符。比较运算后,会返回一个布尔值(true/false)作为比较运算的结果

3.2 运算符号

运算符名称说明案例运算结果
<小于号1 < 2true
>大于号1 > 2false
>=大于或等于(大于等于)2 >= 2true
<=小于或等于(小于等于)3 <= 2false
==判等号37 == 37;37 == ‘37’true
!=不等号37 != 37false
===全等(要求值和数据类型都一样)37 === ‘37’false
!==全不等37 !== ‘37’true

等号比较

符号作用用法
=赋值把右边给左边
==判断判断两边的值是否相等(不管类型)
===全等判断两边的值和数类型是否完全相同
console.log(3 >= 5);    //false
console.log(2 <= 4);    //true

//1.我们程序里面的等于符号是 == 默认转换数据类型,会把字符串的数据类型转换成数字型,只要求值相等就可以了
console.log(18 == 18); //true
console.log(18 == '18'); //true

console.log(18 != '18'); //false

//2.=== 要求两侧的值和数据类型要完全一样

console.log(18 === 18); //true
console.log(18 === '18'); //false

4.逻辑运算符

4.1 概述

逻辑运算符就是用来进行布尔值运算的运算符,其返回值也是布尔值。后面的开发中经常会用于多个条件的判断

逻辑运算符说明案例
&&“逻辑与”,简称”与",也可以是andtrue && false
``
!“逻辑非”,简称“非”,也可以是not!true

4.2 逻辑与(&&)

在这里插入图片描述

在这里插入图片描述

两边都是true,才返回true,否则返回false

4.3 逻辑或(||)

在这里插入图片描述

在这里插入图片描述

两边都是false,才返回false,否则返回true

4.4 逻辑非(!)

逻辑非,也叫取反符,用来取一个布尔值相反的值。如:true的相反值就是false

var isOK= !true;
console.log(isOK); //false

4.5 短路运算

逻辑中断

短路运算的原理:当有多个表达式(值)时,左边的表达式的值可以确定结果的时候,就不再继续运算右边的表达式的值。

  • 逻辑与

    • -- 如果第一个表达式的值为false,整个结果就是false了,后面的表达式不会被执行
      var flag1 = 1 > 2 && 5 > 3;
      
      
      console.log(123 && 456); //456
      console.log(0 && 456); //0
      console.log(123 && 456&&789); //789
      
    • -- 语法:表达式1 && 表达式2
      如果第一个表达式的结果为真,则返回表达式2
      如果第一个表达式的值为假,则返回表达式1
      
  • 逻辑或

    • -- 语法:表达式1 || 表达式2
      如果第一个表达式的结果为真,则返回第一个表达式1
      如果第一个表达式的结果为假,则返回第二个表示2
      
    • console.log(123 || 456);   //123
      console.log(0 || 456);   //456
      console.log(123 || 456 || 789);   //123
      
//变态另类:逻辑与:全真为真,否则为假;1)第一个为true,则返回第二个结果;2)第一个是false,则返回第一个结果
// true && true  //0表示false,其它数字全是true
console.log(123 && 456); //456
console.log(0 && 123); //0
console.log(123 && 456 && 789); //789

//逻辑与: && and,两侧都是true结果才是true,否则为false
console.log(3 > 5 && 3 > 2); //false
console.log(3< 5 && 3 > 2); //true

//逻辑或: || or,两侧都是false结果才是false,否则为true
console.log(3 > 5 || 3 > 2); //true
console.log(3 > 5 || 3 < 2); //false

//逻辑非  not  !
console.log(!true); //false

5.赋值运算符

5.1 概念

用来把数据赋值给变量的运算符。

赋值运算符说明案例
=直接赋值var a = 10;
+= -=加减一个数后赋值var age= 5; age+=5//10
*= /= %=乘除取模后赋值var age = 2; age*=5 //10

5.2 案例

var num = 10;
num += 5;  // 等同于 num = num + 5;
console.log(num);

var age = 2;
age *= 3;  //等同于 age = age * 3;
console.log(age);


var num2 = 10;
num2 /= 2; //等同于 num2 = num2 / 2;
console.log(num2);

6.运算符的优先级

优先级运算符顺序
1小括号()
2元运算符++ – !
3算数运算先* / % 后 + -
4关系运算符> >= < <=
5相等运算符== != === !==
6逻辑运算符先 && 后||
7赋值运算符=
8逗号运算符,
console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 === 144) && true); //true

var num = 10;
console.log(5 === num / 2 && (2 + 2 * num).toString() === '22'); //true


var a = 3 > 5 && 2 < 7 && 3 === 4;
console.log(a); //fasle

标签:10,console,log,JavaScript,运算符,num,var
From: https://blog.csdn.net/qq_63946637/article/details/142788625

相关文章

  • [Javascript] Using defineProperty to observe the object props changes
    constobj={a:1,b:2,c:{a:1,b:2,},};functionisObject(val){returnval!==null&&typeofval==="object";}functionobserve(obj){for(letkeyinobj){letv=obj[key];if(isObject(v)){......
  • 【javascript 编程】Web前端之JavaScript动态添加类名的两种方法、区别、className、c
    通过className来添加或删除类名添加类名获取元素el.className="类名1类名2...";多个类名用空格隔开。移除类名获取元素名el.className="";直接等于一个空字符串即可删除类名。通过classList来添加或删除类名添加一个类名获取元素名el.classList.add("类名");。......
  • [Javascript] Using Proxy to observe the object
    constobj={a:1,b:2,c:{d:1,e:2,},};functionisObject(val){returnval!==null&&typeofval==="object";}functionobserve(obj){constproxy=newProxy(obj,{get(target,key){constv......
  • C++ day04(友元 friend、运算符重载、String字符串)
    目录【1】友元friend1》概念2》友元函数 3》友元类 4》友元成员函数 【2】运算符重载1》概念2》友元函数运算符重载 ​编辑 3》成员函数运算符重载4》赋值运算符与类型转换运算符重载 5》注意事项【3】String字符串类【1】友元friend1》概念定义:......
  • 从混乱到整洁:JavaScript学习中的代码演变之旅
    学习中的代码演变在JavaScript的学习之旅中,初学者常产出略显混乱的代码,这实属正常。每个错误与不易理解的代码段都是成长的一部分,随着时间推移,你将逐渐掌握编写整洁代码的技巧。混乱中的创新追求完美并非初学者的首要任务,这样反而能激发你尝试多样化的解决方案。比如,在构建待办......
  • javascript学习——CSS 操作总结
    CSS操作CSS与JavaScript是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动。但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合。本章介绍如何通过JavaScript操作CSS。HTML元素的style属性操作CSS样式最简单的方法,就是......
  • javascript学习——DOM 概述
    DOM概述DOMDOM是JavaScript操作网页的接口,全称为“文档对象模型”(DocumentObjectModel)。它的作用是将网页转为一个JavaScript对象,从而可以用脚本进行各种操作(比如增删内容)。浏览器会根据DOM模型,将结构化文档(比如HTML和XML)解析成一系列的节点,再由这些节点组......
  • JavaScript数组合并方法(concat()函数)
    在JavaScript中,concat方法用于连接两个或多个数组,并返回一个新数组。这不会改变现有的数组,而是返回一个包含了连接元素的新数组。解法1:基本的concat使用方法letarray1=[1,2,3];letarray2=[4,5];letarray3=array1.concat(array2);console.log(array3);//输......
  • 表单验证:FormValidation JavaScript 1.7
    FormValidation表单验证:JavaScript的最佳验证库::用ES6编写使用TypeScript进行类型安全零依赖没有jQuery可用作AMD、ES6模块和全局脚本灵活的:自定义图标自定义错误消息动态字段自定义有效和无效颜色动态启用、禁用验证器自定义错误信息位置Playnicewithformlibra......
  • [Javascript] How javascript read the property?
    Asweknowwecanreadpropertyvaluefromanobjectasso:constobj={}obj.xxxx;obj[xxxx]; Sowhat'sthedifferencebetweenthosetwo? obj.xECMAScriptwilldoatransforminternallyassuch[[GET]](obj/*objectitself*/,'x'/*pr......