js基础知识二：运算符
运算符
算数运算符
包含加减乘除、取模（%）运算等
|
1 2 3 4 5 6 7 8 9 |
let radius = prompt() // console.log(radius); radius = parseFloat(radius) // console.log('raidus', radius); // 通过输入框拿到用户输入的半径，计算出圆的面积 let res = Math.PI * radius * radius // console.log('res', res); document.write('圆的半径是：', radius, '；圆的面积是：', res) |
赋值运算符
使用=表示，将等号右边的值赋予给左边，要求左边必须是一个容器。
一元运算符
一元运算符
仅操作一个操作数，比如正负号等
自增自减运算符
相同点：不管++还者--是在前还是在后，都是在原来的取值上自行加1或减1。
不同点：（根据符号的位置判断，++在前先加，++在后后加）
- 符号前置：先加一，再运算
- 符号后置：先运算，再加一
逻辑运算符
逻辑与
使用&&表示，符号两边的值都为真，结果为真；否则为假。
逻辑或
使用||表示，符号两边的值都为假，结果为假；否则为真。
逻辑非
使用|表示，给定的值取反，当前值为真，结果为假；反之亦然。
比较运算符
包含>, <, >=, <=, ==, ===, !=, !==等运算，重点理解等于和全等于运算
等于和全等于的异同点
- 都是对符号两边进行等于判断
- 等于只需要符号两边的值相同即可；全等于则需要值和类型都相等
|
1 2 3 4 5 6 7 8 |
let left = '22' let right = 22 let res1 = left == right // true let res2 = left === right //false console.log('结果', res1, res2); |
运算符优先级
同阶运算符，遵循从左到右的顺序依次执行.
. [] () > 自增自减运算符 > 算数运算符 > 比较运算符 > 逻辑运算符 > 三元运算符 > 赋值运算符
| 运算符 | 描述 |
|---|---|
| . [] () | 字段访问、数组下表、函数调用以及表达式分组 |
| ++ -- ! | 自增、自减、非 |
| / * % | 除法、乘法、取模 |
| + - +string | 加法、减法、字符串拼接 |
| < <= > >= | 小于、小于等于、大于、大于等于 |
| == != === !== | 等于、不等、全等、不全等 |
| && | 与 |
| || | 或 |
| ?: | 三元运算符 |
| = | 赋值 |
语句
表达式和语句
表达式：表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果。（如x = 7、num++）
语句：js整句或命令，js语句以分号结束。分号可省略。（如if条件语句、for循环语句）
分支语句
javascript提供if结构和switch结构，完成条件判断，即只有满足预设的条件，才会执行相应的语句。
if分支
if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。
|
1 2 3 4 5 6 7 8 |
// if结构的两种写法 // 当需要执行的代码有多个语句时，必须使用代码块的写法 if(布尔值) { 代码块; } // 或者 if(布尔值) 语句; |
上面的结构表示，如果表达式的求值结果（即布尔值）为true，就执行紧跟在后面的语句；否则，跳过紧跟在后面的语句。
if...else结构
if代码块后面，可以跟一个else代码块，表示不满足条件时，要执行的代码。
|
1 2 3 4 5 |
if(m === 3) { // 满足条件时，执行的语句 } else { // 不满足条件时，执行的语句 } |
对一个变量进行多次判断时，多个if...else语句可以写在一起。
|
1 2 3 4 5 6 7 |
if(m === 0) { // ... } else if(m === 1) { // ... } else if(m === 2) { // ... } |
三元运算符
|
1 |
(条件) ? 表达式1 : 表达式2; |
上面代码中，如果“条件”为true，则返回“表达式1”的值，否则返回“表达式2”的值。
|
1 2 |
var even = (n % 2 === 0) ? true : false; console.log(even); |
上面代码中，表示如果变量n可以被2整除，则even等于true，否则even等于false。
switch结构
上面多个if...else连在一起的语句，可以换成更方便的switch结构。
|
1 2 3 4 5 6 7 8 9 10 |
switch(m) { case 0: // ... break; case 1: // ... break; default: // ... } |
上面代码根据m的代码，选择执行对应的case。如果所有的case都不符合，则会执行最后default中的部分。
需要注意的是，每个case中代码块内部的break不能省略，否则会接下去执行下一个case中的代码块，而不是跳出switch结构。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 缺少break进行代码终止，会一直执行到最后 var x = 1; switch (x) { case 1: console.log('x 等于1'); case 2: console.log('x 等于2'); default: console.log('x 等于其他值'); } // x 等于1 // x 等于2 // x 等于其他值 |
还有一个需要值得注意的是，switch括号中的表达式，与case中的表达式比较运行结果时，采用的是严格相等运算符（====），而不是相等运算符（==），所以在比较时不会发生类型转换。
|
1 2 3 4 5 6 7 8 9 10 |
var x = 1; switch (x) { case true: console.log('x 发生类型转换'); break; default: console.log('x 没有发生类型转换'); break; } // x 没有发生类型转换 |
循环语句
循环语句用于重复执行某个操作。
for循环
for语句可以指定循环的起点、终点和终止条件。
|
1 2 3 |
for(初始化表达式; 条件; 递增表达式;){ 代码块; } |
for语句后面的括号中，有三个表达式。
- 初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。
- 条件表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有当表达式值为真，才会继续进行循环。
- 递增表达式（increment）：每轮循环的最后一个操作，通常都是用来递增循环变量
|
1 2 3 4 5 6 7 |
var x = 3; for (var i = 0; i < x; i++) { console.log(i); } // 0 // 1 // 2 |
上面代码中，初始化表达式var i = 0，即初始化一个变量i；条件表达式是i < x，即只要i小于x，就会执行循环；递增表达式是i++，即每次循环结束后，i增加1。
while循环
while语句包含一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。
|
1 2 3 4 5 6 7 |
while(条件) { 代码块； } // 或者 // 当代码块只有一条语句时，可以省略大括号 while(条件) 代码块; |
输出0-100
|
1 2 3 4 5 6 |
// 使用while输出0-100 var i = 0; while (i <= 100) { console.log('i 当前为' + i); i++ } |
使用while循环时，内部代码块必须要有让循环条件不满足的操作，否则会形成无限循环，代码一直执行。
do...while循环
do...while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。
|
1 2 3 |
do { 循环体 } while (条件); |
不管条件是否为真，都先运行一遍循环体。注意while语句后面的分号;不要省略。
|
1 2 3 4 5 6 7 8 9 |
var x = 3; var i = 0; do { console.log(i); i++ } while (i < 3); // 0 // 1 // 2 |
循环语句的跳出
break语句与continue语句都具有跳转作用，可以让代码不按既有的顺序执行。
break语句
break语句用于跳出代码块或循环。
|
1 2 3 4 5 6 |
var i = 0; while (i <= 100) { console.log('i 当前为' + i); i++; if (i === 10) break; } |
上面代码中，循环只执行了10次，一旦i等于10，就会跳出循环。
continue语句
continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。
|
1 2 3 4 5 6 |
var i = 0; while (i <= 100) { i++; if (i === 10) continue; console.log('i 当前为' + i); } |
上面代码中，只有当i不等于10，才会输出i的值。值得注意的是，不能将i++放到continue的下面，否则i的值会一直满足条件，造成无限循环。
如果存在多重循环，不带参数的break语句与continue语句都只针对内存循环。
原创文章，作者：seabert，如若转载，请注明出处：https://bysjb.cn/js-operator.html