javascript实践教程-06-运算符

晴空闲云
• 阅读 1588

本节目标

  1. 掌握js语言中各类型运算符的使用。
  2. 掌握短路与和短路或的原理。
  3. 掌握二进制运算符的计算原理。
  4. 掌握计算机中各进制的转换方式。

内容摘要

本篇对js中的运算符进行了详细的梳理，共梳理了8种运算符，允许我骄傲一下，自夸全网前三了。 每类运算符都列举了相关的例子进行了说明，顺便带出了一些js奇怪的知识。

阅读时间大于30~40分钟。

运算符介绍

计算机是用来计算的，那么作为一款编程语言，自然也有自己的运算符的。

js中运算符分为如下几类：

1. 算数运算符
2. 赋值运算符
3. 比较运算符
4. 布尔运算符
5. 三元运算符
6. 位运算符
7. 字符串连接符
8. 类型运算符

下面我们对各运算符逐一讲解。

算数运算符

算数运算符包含：

加法运算符（Addition）：x + y
减法运算符（Subtraction）： x - y
乘法运算符（Multiplication）： x * y
除法运算符（Division）：x / y
余数运算符（Remainder）：x % y
求负运算符（Negate）：-x
自增运算符（Increment）：++x 或者 x++
自减运算符（Decrement）：--x 或者 x--
数值运算符（Convert to number）： +x
幂运算符（Power）：x ** y

根据难易度，我们分成4个部分讲解：加减乘除模求负、自增自减、转成数值、幂运算符。

加减乘除模求负

其中加减乘除模求负比较简单，我们来个通用的示例。

示例1，声明变量x、y，进行加减乘除运算。

let x = 5;
let y = 2;
console.log(x + y); // ?
console.log(x - y); // ?
console.log(x * y); // ?
console.log(x / y); // ?
console.log(x % y); // ?
console.log(-x); // ?

自增自减

自增 ++x 和 x++，等同于：x = x + 1，++在前表示先加后用，在后表示先用后加。

自减 --x 和 x--，等同于：x = x - 1，--在前表示先减后用，在后表示先用后减。

示例1，阅读如下代码，分析输出。

let x = 5;
console.log(x++); // ?
console.log(++x); // ?
console.log(--x); // ?
console.log(x--); // ?
console.log(x); // ?

这边主要是考察大家对计算顺序的理解。

数值运算符

这个符号有点意思，我们先看个示例。

示例1，让用户输入两个数字，然后相加：

let x = window.prompt("请输入第一个数字：");
let y = window.prompt("请输入第二个数字：");
console.log(x + y); // ?

运行输入x=1、y=2，两个数字相加结果等于12，为嘛不是3？又被坑到了吧！

这边的原因很简单，因为输入的x和y都是字符串，+号在这边是后面要提到的字符串连接符号，所以结果就是12了。

知道原因后，改进方法就很简单了，在输入方法前面来个+号就可以了。

let x = +window.prompt("请输入第一个数字：");
let y = +window.prompt("请输入第二个数字：");
console.log(x + y);

幂运算符

js还有一个幂运算符，用来求数字的幂。

示例1，声明两个数字，求幂：

let x = 3;
let y = 4;
console.log(x**y); // ?

该方法在旧的浏览器上，如果IE浏览器上并不支持，一般用Math.pow代替。

console.log(Math.pow(x, y)); // ?

赋值运算符

赋值运算符包含以下运算符：

x = y  =表示赋值运算符
x += y  等同于 x = x + y
x -= y  等同于 x = x - y
x *= y  等同于 x = x * y
x /= y  等同于 x = x / y
x %= y  等同于 x = x % y
x >>= y  等同于 x = x >> y
x <<= y  等同于 x = x << y
x >>>= y  等同于 x = x >>> y
x &= y  等同于 x = x & y
x |= y  等同于 x = x | y
x ^= y  等同于 x = x ^ y

其中，=念等号没有问题，但是不同于数学上的概念，计算机中=号表示赋值的意思，即=右边的表达式赋值给左边。

示例1，阅读如下代码，分析输出：

let x = 5;
let y = 2;
console.log(x+=y); // ?
console.log(x*=y); // ?
console.log(x-=y); // ?
console.log(x/=y); // ?
console.log(x%=y); // ?

比较运算符

比较运算符包含以下运算符：

== 相等
=== 严格相等，类型和值要相等
!= 不相等
!== 严格不相等
< 小于
<= 小于或等于
> 大于
>= 大于或等于

示例1，来一些简单的例子，分析输出： 

let x = 5; y = 2;
console.log(x == y); // ?
console.log(x != y); // ?
console.log(x < y); // ?
console.log(x > y); // ?

示例2，来一些比较难的，分析输出：

console.log(0 == ''); // ?
console.log([] == 0); // ?
console.log([] == ''); // ?
console.log([] == undefined); // ?
console.log(0 == null); // ?

布尔运算符

布尔运算符包含以下运算符：

! 取反运算符
&& 且运算符
|| 或运算符

!取反运算符

! 取反运算符，用于将布尔值变为相反值，即 true 变成 false ， false 变成 true。

console.log(!true); // false
console.log(!false); // true

对于非布尔值的数据，取反运算符会自动将其转成布尔值，下面6个值取反后为true，其他值取反都为false。

undefined
null
false
0（包括+0和-0）
NaN
空字符串（''）

看个简单的示例：

console.log(!null); // true
console.log(![]); // false

这意味着，取反运算符有转换数据类型的作用，如果对一个数字连续取反两次，就可以转化成布尔值：

console.log(!!null); // false
console.log(!![]); // true

类似Boolean函数的作用。

&&且运算符

&&且运算符用来对两个表达式进行真假运算，规则如下：

1. 两边条件都为true时，结果才为true。
2. 如果有一个为false，结果就为false。
3. 当第一个条件为false时，就不再判断后面的条件，俗称短路与。

参考如下例子：

console.log(true && true); // true
console.log(false && true); // false

思考：

阅读如下代码，分析最终x的值等于多少？

let x;
console.log(false && (x = 1)); // ?
console.log(x); // ?

解答：

最终x的值等于undefined，因为在上面的&&运算中，第一个条件为false，就不会执行后面的表达式了，这个就是上面第3个规则的意思了。

||或运算符

||或运算符类似&&运算符，规则如下：

1. 两边条件其中一个为true时，结果就为true。
2. 如果两个条件都为false，结果就为false。
3. 当第一个条件为true时，就不再判断后面的条件，俗称短路或。

参考如下例子：

console.log(true || true); // true
console.log(false || true); // true
console.log(false || false); // false

三元运算符

网上有的说法叫条件运算符，我觉得这个都ok，因为就是有一个条件判断，然后确定后面取值。

三元运算符的语法格式如下：

条件 ? 条件为真走这里 : 条件为假走这里

例如：

let a = 10, b = 7;
let x = (a > b) ? a : b; // 10

位运算符

位运算符包含以下运算符：

或运算（or）：符号为|，表示两个二进制位中有一个为1，则结果为1，否则为0。
与运算（and）：符号为&，表示两个二进制位都为1，则结果为1，否则为0。
异或运算（xor）：符号为ˆ，表示两个二进制位中有且仅有一个为1时，结果为1，否则为0。
否运算（not）：符号为~，表示将一个二进制位变成相反值。
左移运算（left shift）：符号为<<
右移运算（right shift）：符号为>>

这边的难点主要是在于二进制，计算机存储的都是二进制的数据。比如：4在计算机中就是表示为100。

示例1，对5和2进行或、与、异或位运算：

console.log(5 | 2); // 7
console.log(5 & 2); // 0
console.log(5 ^ 2); // 7

这边5的二进制是101，2的二进制是10，进行或运算：

    101
    010
-----------
    111  --------> 7

进行与运算：

    101
    010
-----------
    000  --------> 0

进行异或运算：

    101
    010
-----------
    111  --------> 7

示例2，对5进行否运算、左移运算和右移运算。

console.log(~5);
console.log(5 << 2);
console.log(5 >> 2);

这边5的二进制是101，进行否运算：

1. 补满32位：0000 0000 0000 0000 0000 0000 0000 0101
2. 按位取反：1111 1111 1111 1111 1111 1111 1111 1010
3. 首位符号位位1表示负数，计算表示的数需要先反码，再+1
4. 按位取反：0000 0000 0000 0000 0000 0000 0000 0101
5. 加上1：0000 0000 0000 0000 0000 0000 0000 0110
6. 最终结果就是：-6

进行左移两位运算：

1. 5的二进制是：101
2. 左移两位： 10100
3. 转成十进制：20

进行右移两位运算：

1. 5的二进制是：101
2. 右移两位：1，后面的01倍舍弃了。
3. 转成十进制：1

字符串连接符

js中用加号+进行连接字符串。

console.log("Hello" + " " + "world" + "!"); // Hello world!

思考：

阅读如下代码，分析输出：

let num1 = 1, num2 = 2;
console.log(num1 + num2); // ?

解答：

因为这个符号和数学加号是一致的，所以说如果要连接两个数字，直接写成：num1+num2，就会有问题了。

我们可以把num1和num2转换成字符串再拼接，或者在前面拼接一个空字符串就可以了。

console.log("" + num1 + num2);

类型运算符

位运算符包含以下运算符：

typeof：用于查找JavaScript变量的数据类型，返回变量的类型。
instanceof：用来判断某个构造函数的prototype属性是否存在在另一个要检测对象的原型链上，返回一个Boolean值，指出对象是否是特定类的一个实例。

typeof

typeof前面有用过了，就是返回变量的类型：

console.log(typeof 1); // ?
console.log(typeof '666'); // ?
console.log(typeof true); // ?
console.log(typeof null); // ?
console.log(typeof undefined); // ?
console.log(typeof NaN); // ?
console.log(typeof []); // ?
console.log(typeof {}); // ?

前面讲解数据类型有用过，不再赘述。值得一提的是这边NaN的类型是number，但是NaN的意思就是not a number，又惊呆了吧！

除此之外：NaN === NaN 是false，我也不知道要说什么了。我只能解释，因为两个都不是数字，那能代表两个相等吗？

instanceof

instanceof用来判断某个构造函数的prototype属性是否存在在另一个要检测对象的原型链上，返回一个Boolean值，指出对象是否是特定类的一个实例。

我们看些例子：

console.log([] instanceof String); // false
console.log([] instanceof Array); // true
console.log([] instanceof Object); // true
console.log({} instanceof Object); // true

这边[]实际上是一个数组对象。

本节总结

  1. 本节对js中的运算符做了详细的梳理，共梳理出8种运算符。
  2. 自增自减顺序问题，符号在前的先算后用，符号在后的先用后算。
  3. 位运算符需要了解二进制相关的转换。

练习题

  1. parseInt和parseFloat函数有什么作用？请举例说明。和数值运算符+的异同点。
  2. 说明parseInt、parseFloat和数值运算符的异同点。
  3. 请问："cat" > "john" 是true还是false，为什么呢？
  4. Boolean函数有什么作用？请举例说明。
  5. 短路与（&&）和短路或（||）是怎么一回事？请举例说明。
  6. 让用户输入一个数字，如果大于100，那么打印100，否则打印用户输入的数字。
  7. ~10、10 << 1、10 >> 2 分别等于多少？写出计算思路。
  8. 二进制、八进制、十进制和十六进制之间如何互相转换？
  9. 除了用加号+连接字符串，其他还有什么方式？
  10. 为什么typeof array 返回的是object，而不是array？
  11. "888" instanceof String 返回的结果是true还是false？为什么？
jsJavascriptJavascript
点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
•
3年前
javascript实践教程-02-javascript入门
本节目标1.掌握如何编写javascript代码。2.掌握javascript的3个弹框。3.掌握javascript的注释。4.掌握浏览器的调试工具控制台。内容摘要本篇介绍了如何在网页上编写js代码，如何引入外部js代码文件，js的3个弹框、注释语法，还有浏览器调试工具的控制台使用。阅读时间1520分钟。script标签如果我们需要在网页中编写
1721
0
0
晴空闲云 晴空闲云
•
3年前
javascript实践教程-05-数据类型
本节目标1.掌握js中7种数据类型。2.掌握5种基本数据类型number、string、boolean、null、undefined的声明。3.掌握js中数组的声明和数组相关的方法。4.掌握js中对象的声明和属性、方法的使用。内容摘要本篇介绍了js中的7种数据类型，其中5种基本数据类型：number、string、boolean、null、unde
1526
0
0
待兔 待兔
•
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
1071
0
0
CuterCorley CuterCorley
•
3年前
C语言入门系列之4.分支结构程序-关系、逻辑运算和if、switch语句
一、关系运算符和表达式关系运算符：又叫比较运算符，在程序中经常需要比较两个量的大小关系，以决定程序下一步的工作。比较两个量的运算符称为关系运算符。1.关系运算符及其优先顺序在Ｃ语言中有以下关系运算符：<小于<小于或等于\大于\大于或等于等于不等于关系运算符都是双目运算
1849
0
0
Wesley13 Wesley13
•
3年前
thinkphp3.2.3模板渲染支持三元表达式
thinkphp3.2.3模板渲染支持三元表达式{$status?'正常':'错误'}{$info'status'?$info'msg':$info'error'}注意：三元运算符中暂时不支持点语法。如下：　　　　　　　　　　　<divclass"modalhidefade"id'myModa
1119
0
0
Stella981 Stella981
•
3年前
Python 运算符
Python运算符什么是运算符？本章节主要说明Python的运算符。举个简单的例子459。例子中，4和5被称为操作数，""称为运算符。Python语言支持以下类型的运算符:算术运算符(https://www.oschina.n
842
0
0
Stella981 Stella981
•
3年前
Lua 运算符
Lua运算符运算符是一个特殊的符号，用于告诉解释器执行特定的数学或逻辑运算。Lua提供了以下几种运算符类型：算术运算符关系运算符逻辑运算符其他运算符算术运算符下表列出了Lua语言中的常用算术运算符，设定A的值为10，B的值为20：操作符
818
0
0
Stella981 Stella981
•
3年前
Python运算符
1.运算符1.1运算符的概念运算符⽤于执⾏程序代码运算，会针对⼀个以上操作数项⽬来进⾏运算。例如：23，其操作数是2和3，⽽运算符则是“”1.2运算符的分类算术运算符赋值运算符⽐较运算符（关系运算符）逻辑运算符条件运算符（三元运算符）2.算术运算符
521
0
0
Stella981 Stella981
•
3年前
JavaScript学习总结(二)——逻辑Not运算符详解
在JavaScript中，逻辑NOT运算符与C和Java中的逻辑NOT运算符相同，都由感叹号（!）表示。与逻辑OR和逻辑AND运算符不同的是，逻辑NOT运算符返回的一定是Boolean值。逻辑NOT运算符的行为如下：如果运算数是对象，返回false如果运算数是数字0，返回true如
638
0
0
Easter79 Easter79
•
3年前
Swift解读专题三——基础运算符
Swift解读专题三——基础运算符一、引言         运算符是编程语言不可缺少的一个部分，Swift中除了支持C中的运算符外，还提供了一些更加强大的运算符功能，例如取余符%可以用来计算浮点数，另外新增了两种范围运算符。Swift中有3类运算符:1.一元运算符运算符作用于一个操作数，可以出现在操
502
0
0
晴空闲云
晴空闲云
Lv1
男 · 软件工程师
专注计算机科学，阅读、思考、写作。
文章
26
粉丝
8
获赞
35
热门文章
vue3中基于script setup语法糖的$refs使用
css中box-sizing解放盒子实际宽高计算
css中skew实现元素倾斜
关于自学前端的知识体系思考
javascript实践教程-02-javascript入门