文档章节

JavaScript中的运算符

FEWY
 FEWY
发布于 2017/05/03 20:36
字数 1857
阅读 37
收藏 0
点赞 0
评论 0

说明

JavaScript中的运算符,大多数是由标点符号表示的,比如“+”和“=”。而另外一些运算符则是由关键字表示的,比如delete和instanceof。关键字运算符合标点符号所表示的运算符一样都是正规的运算符。

运算符分类

  • 算数运算符 +、 -、 *、 /、 %、++、 --
  • 关系运算符 >、 <、 >、=、 <=、 ==、 ===、!=、!==、 in、 instanceof
  • 逻辑运算符 &&、 ||、 !、
  • 位运算符 &、 |、 ~、 ^、 <<、 >>、 >>>
  • 赋值运算符 =、*=、/=、%=、+=、-=、&=、^=、|=、<<=、>>=、>>>=
  • 条件(三目)运算符 ?:
  • 特殊运算符 typeof、 void、 delete、,

算数运算

加(+)、减(-)、乘(*)、除(/)、求余(%)

var num1=10+1;  //11
var num2=10-2;  //8
var num3=10*3;  //30
var num4=10/5;  //2
var num5=10%5;  //0

注意:

  • -可以表示减号,也可以表示负号,
  • +可以表示加法,也可以用于字符串的连接,如果两端的操作数有一个是string类型,最终的操作就是连接

i++ //相当于 i = i + 1; i- - //相当于 i = i - 1;

++:自增,在 自身数值 基础上只做+1操作

var a = 10;
a++;   //++在后,称为后缀
//先使用 a 的值,然后再做自增运算
console.log(a++); //10
console.log(a);//11

++a; //++在前,称为前缀
//先做自增运算,然后再使用a的值
var a = 10;
console.log(++a);//11
console.log(a);//11

- -:自减,在 自身数值 基础上只做-1操作

var a=10; 
a--;
   //先使用a的值,再自减
--a;
   //先对a进行自减,然后再使用a的值
```		
注意:  
如果运算符两端的操作数不是number类型,会自动调用Number()进行转换,如果转换失败,结果就为 NaN  
#### 关系运算符  
 
- 关系运算用于判断数据之间的大小关系“>”(大于),“<”(小于),“>=”(大于等于),“<=”(小于等于),“==”(等于),“===”(全等),“!=”(不等于),“!==”(不全等),in(测试属性是否存在),instanceof(测试对象类)
- 关系表达式的值为Boolean类型(“true”或“false”)

```js
console.log(1>10);  //false
console.log(1<10);  //true
console.log(10>=10); //true
console.log(10<=9);  //false
console.log(10==10);  //true
console.log(10==='10');  //false
console.log(10!=10);   //false

var point = {x:1,y:1}; //定义一个对象
"x" in point           //true  对象有一个名为"x"的属性
"z" in point           //false 对象不存在一个名为"z"的属性

var d = new Data();    //通过Data()构造函数来创建一个新对象
d instanceof Data;     //true,d是由Data()创建的
d instanceof Object;   //true,所有对象都是Object的实例
d instanceof Number;   //false d不是一个Number对象

注意:

  • == : 判断 两个数据是否相等,相等的话,结果为 true,不等的话,结果为 false ===:全等,数值和数据类型必须都相等的时候,结果才为true,否则,结果就是false
  • 如果 关系运算符 两端的数据有一个是number 类型,有一个是非number类型,则会将 非number 类型的数据 转换为 number类型在比较,如果转换失败,结果为false。
  • 只要NaN参与比较运算,结果永远是false
  • 两个字符串 做 比较运算时,实际上比较的是每个位置字符的Unicode码

逻辑运算符

!:非,逻辑非
&&:与,逻辑与
||:或,逻辑或
逻辑运算符“&&”、“||”和“!”是对操作数进行布尔算术运算,经常和关系运算符一起配合使用。

条件1 && 条件2
当,条件1 结果为真
并且,条件2 结果为真
整个表达式的结果才为真
x == 0 && y == 0 //只有在x和y都是0的时候,才返回true

条件1 || 条件2
条件1 或 条件2
有一个为真的话
整个表达式的结果就为真
x == 0 && y == 0 //x和y只要有一个是0的时候,就返回true

!作用:对 现有条件结果 取反操作
非真即假
非假即真
语法:
var result=!条件;

位运算符

& 按位与: 将两边的操作数转换成二进制,再将两个数字的二进制位进行对比,只有对应位结果都为1的时候,该位结果才为1,否则该位结果为0

 ex :3 & 5  
 3 : 011
 5 : 101
 ==============
 001 

场合:判断一个数字的奇偶性,n & 1,如果结果为1,则为奇数,结果为0,则为偶数

ex : 7 & 1
7 : 111
1 : 001
============
001  --奇数

ex : 6 & 1
6 : 110
1 : 001
==============
000  --偶数

| 按位或: 两边数字转换成二进制,每位上的数字,只要有一个为1,那么整体结果就为1,否则为0

ex :1 | 3
1 : 01
3 : 11
============
11  --> 3

场合:取整。任意数 | 0 ,和 Math.floor 是有区别的,和Math.trunc的结果一样
10.3 | 0  // 10
-10.3 | 0  // -10
Math.floor(10.3)  // 10
Math.floor(-10.3)  //  -11
Math.trunc(10.3)  // 10
Math.trunc(-10.3)  //  -10

~ 按位非: 简单的理解,对任一数值 x 进行按位非操作的结果为 -(x + 1); 注意:使用~ 按位非时,数值x的小数部分会直接舍弃。

~ -10.5  //  -(-10 + 1) = 9
~ -11  //  -(-11 + 1) = 10
~ 10  //  -(10+1) = -11
~ 0  //  -(0 + 1) = -1

而经常看到的 ~~value ,这样的写法,作用有两个 1、进行类型转换,转换成数字类型

~~true  //  1
~~false  //  0
~~""  //  0
~~[]  //  0
~~undefined  //  0
~~!undefined  //  1
~~null  //  0
~~!null  //  1
~~ '123'  //  123

2、取整,和上面提到的 任意数 | 0 是一样的

~~ 10.3  // 10
~~ -10.3  // -10
10.3 | 0  // 10
-10.3 | 0  // -10
Math.floor(10.3)  // 10
Math.floor(-10.3)  //  -11
Math.trunc(10.3)  // 10
Math.trunc(-10.3)  //  -10

^ 按位异或: 比较二进制数字,对应位,只有一个1的时候,结果才为1,否则就是0

ex :3^5
3 : 011
5 : 101
===========
110  --> 6

场合:两个数字的互换

var a = 3;
var b = 5;

a = a^b;
a:3 : 011
b:5 : 101
================
110  -> a = 6
b = b^a;
b:5 : 101
a:6 : 110
=================
011 -> b=3
a = a^b;
a:6 : 110
b:3 : 011
=================
101 -> a=5

<< 左移:将 二进制 数字向左移动几位

ex : 
2<<1  4
2<<2  8

>> 右移:将二进制数字向右移动几位,左侧补0

5>>1  
0000 0000 0000 0000 0000 0000 0000 0101  
00000 0000 0000 0000 0000 0000 0000 010  
结果 :2

5>>2
0000 0000 0000 0000 0000 0000 0000 0101  
0000 0000 0000 0000 0000 0000 0000 0001  
结果 : 1

赋值运算符

=用于为变量赋值
var score = 90;
扩展赋值表达式 +=、 -=、*=、/=、%=

a += 3;    //相当于a= a+3;
a -= 3;    //相当于a= a-3;
a *= 3;    //相当于a= a*3;
a /= 3;    //相当于a= a/3;
a %= 3;    //相当于a= a%3;

条件(三目)运算符

三目运算符:要求有3个操作数的运算符
语法
? :
表达式1(条件) ? 表达式2 : 表达式3;
表达式1 :是个boolean的条件
如果表达式1的值为true,则运行表达式2,并将其结果作为整个表达式的结果
如果表达式1的值为false,则运行表达式3,并将其结果作为整个表达式3的结果

特殊运算符

typeof 操作符用来检测变量的数据类型。 void,该操作符指定要计算一个表达式但是不返回值。 delete操作符通常用来删除对象的属性。
,逗号运算符是二元运算符,它的操作数可以是任意类型。它首先计算左操作数,然后计算右操作数,最后返回右操作数的值。

运算符优先级

+ +
- -
-
+
~
!
delete
typeof
void
————————————————————————
*、/、%
————————————————————————
+、-
+
————————————————————————
<<
>>
>>>
————————————————————————
<、<=、>、>=
<、<=、>、>=
instanceof
in
————————————————————————
==
!=
===
!==
————————————————————————
&
^
|
&&
||
?:
=
*=、/=、%=、+=、-=、&=、^=、|=、<<=、>>=、>>>=
————————————————————————
,

前面的运算符优先级要高于后面的运算符优先级,被分割线分割开来的运算符有不同的优先级。

总结

运算符是JavaScript中基础的东西了,但涉及的东西也挺多,所以这篇文章中有一些地方没有非常详细的讲解,但大致是这些东西,希望大家对有点帮助。

前端简单说

© 著作权归作者所有

共有 人打赏支持
FEWY
粉丝 1
博文 37
码字总数 39311
作品 0
太原
程序员
学习Javascript的8张思维导图

分别归类为:  javascript变量  javascript运算符  javascript数组  javascript流程语句  javascript字符串函数  javascript函数基础  javascript基础DOM操作  javascript正则表达式...

thinkyoung ⋅ 2014/09/23 ⋅ 0

JavaScript 编程精解 中文第三版 一、值,类型和运算符

一、值,类型和运算符 原文:Values, Types, and Operators 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 在机器的表面之下,程序在...

apachecn_飞龙 ⋅ 04/29 ⋅ 0

由js数组类型判断触发的浪漫思绪

一、前言 众所周知,js是门“动态”、“弱类型”编程语言,这意味着在js中可以很任性的定义变量,任性的同时也意味着需常在开发中对变量做类型判断,曾几何时,对数组变量的类型的判断是件很...

hanmin ⋅ 06/08 ⋅ 0

JavaScript入门 Day1

课程介绍 编程语言介绍(了解) JavaScript简介(了解) JavaScript入门 运算符(掌握) JavaScript基本语法(掌握) 位运算符(了解) 1.编程语言 1.1.什么是编程语言 编程语言(programmi...

何老师编程 ⋅ 06/02 ⋅ 0

React jsx 中写更优雅、直观的条件运算符

在这篇文字中我学到了很多知识,同时结合工作中的一些经验也在思考一些东西。比如条件运算符 Conditional Operator 上面的代码是根据变量为时显示一个p元素 或者是下面这样显示不同的元素或组...

开源中国最帅没有之一 ⋅ 昨天 ⋅ 0

JavaWeb01-HTML篇笔记(七)

.1 案例三:完成对注册页面的数据的简单校验.1.1.1 需求: 对注册页面的数据进行非空的简单校验!!!如果有某个值没有输入,点击提交,弹出一个对话框进行提示!! 1.1.2 分析:1.1.2.1 技术分...

我是小谷粒 ⋅ 04/28 ⋅ 0

JavaScript 编程精解 中文第三版 十二、项目:编程语言

十二、项目:编程语言 原文:Project: A Programming Language 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 确定编程语言中的表达式...

ApacheCN_飞龙 ⋅ 05/11 ⋅ 0

37个JavaScript基本面试问题和解答

编者按:本文转载自众成翻译,译者xiaosheng222,一起来学习吧。 1、使用typeof bar ===“object”来确定bar是否是一个对象时有什么潜在的缺陷?这个陷阱如何避免? 尽管typeof bar ===“obj...

奇舞周刊 ⋅ 05/10 ⋅ 0

django 1.8 官方文档翻译:5-2-2 表单素材 ( Media 类)

表单素材 ( 类) 渲染有吸引力的、易于使用的web表单不仅仅需要HTML – 同时也需要CSS样式表,并且,如果你打算使用奇妙的web2.0组件,你也需要在每个页面包含一些JavaScript。任何提供的页面...

apachecn_飞龙 ⋅ 2015/09/19 ⋅ 0

JavaWeb04-HTML篇笔记(一)

1.1 上次课的内容回顾: JavaScript: JavaScript:基本使用:

我是小谷粒 ⋅ 05/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从 Confluence 5.3 及其早期版本中恢复空间

如果你需要从 Confluence 5.3 及其早期版本中的导出文件恢复到晚于 Confluence 5.3 的 Confluence 中的话。你可以使用临时的 Confluence 空间安装,然后将这个 Confluence 安装实例升级到你现...

honeymose ⋅ 12分钟前 ⋅ 0

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部