04-JavaScript基础-运算符操作

2018-10-11 本文已影响780人撩课_叶建华

文章配套视频

https://study.163.com/course/introduction/1005973001.htm

进制表示

在JS中可以表示不同进制的数字(得看浏览器支持):
- 16进制的数字，则需要以0x开头
```
   num = 0x18;
   num = 0xcf;
   num = 0xAacf;
```
- 8进制的数字，则需要以0开头
```
num = 016;
```
- 2进制的数字，则需要以0b开头
```
num = 0b1010;
```
注意:
- "010"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析
- 可以在parseInt()或parseFloat中传递一个第二个参数，来指定数字的进制
```
str = "070";
// str= parseInt(str,10);
str = Number(str);       
console.log(typeof str);
console.log(str);
```

运算符

基本定义
- 运算符也叫操作符, 通过运算符可以对一个或多个值进行运算,并获取运算结果, 比如：typeof就是运算符，可以来获得一个值的类型, 它会将该值的类型以字符串的形式返回: number string boolean undefined object
作用
- 运算符是告诉程序执行特定算术或逻辑操作的符号, 例如告诉程序, 某两个数相加, 相减等
分类
- 按照功能划分: 算术运算符, 位运算符, 关系运算符, 逻辑运算符
- 按照操作数个数划分:
  单目运算(只有一个操作数如 : i++ !),
  双目运算(有两个操作数如 : a+b;),
  三目运算(三目运算也称为问号表达式 a>b ? 1 : 0;)
运算符的结合性
- JavaScript中各种运算符的结合性分为两种: 左结合性(自左至右) 和右结合性(自右至左)
- 自左至右,即先左后右
  例如表达式: x - y + z;
  则y 应先与“-”号结合,执行 x-y 运算,然后再执行+z 的运算。
  这种自左至右的结合方向就称为“左结合性”。
- 自右至左,即先右后左
  例如:如x = y = z = 10
  由于“=”的右结合性,应先执行z = 10; 再执行y = z 再执行x = y运算。

算术运算符

加法运算

加法运算
减法运算

减法运算
乘法运算

乘法运算
除法运算

除法运算
取余运算

取余运算

一元运算符

只需要一个操作数

+ 正号不会对数字产生任何影响

   var num = 123;
    num = +num;
   console.log(num); // 123

对于非Number类型的值,会将先转换为Number，然后再运算

   var bool = true;
   var res = +bool;
   console.log(res); // 1

   var str = "123";
   res = +str;
   console.log(res); // 123

   var str2 = "123abc";
   res = +str2;
   console.log(res); // NaN, 所以内部不是调用parseInt, 而是Number()函数

   var temp = null;
   res = +temp;
   console.log(res); // 0

- 负号可以对数字进行负号的取反

  var num = 456;
  num = -num;
  console.log(num); // -456

  var result = 1 + -"2" + 3;
  console.log("result = "+result);

赋值运算符

简单赋值运算符 =

格式: 变量 = 数据

// 将等号右边的常量100赋值给左边的变量num
var num = 100;

// 将等号右边的变量num中存储的值赋值给左边的变量value
var value = num;

赋值运算符左边只能是变量

110 = 220; // 错误写法
var str = 110;
220 = str; // 错误写法

多个赋值运算符可以组成赋值表达式, 赋值表达式具备右结合性

// 从右至左计算
//  先将10赋值给变量c, 然后将变量c中存储的值赋值给变量b
// 然后将变量b中存储的值赋值给变量a, 最后a,b,c存储的都是10
a = b = c = 10;

复合赋值运算符

  += 加后赋值 变量+=表达式 如:a+=1;即a=a+1
  -= 减后赋值 变量-=表达式 如:a-=1;即a=a-1
  *= 乘后赋值 变量=表达式 如:a=1;即a=a*1
  /= 除后赋值 变量/=表达式 如:a/=1;即a=a/1
  %= 取模后赋值 变量%=表达式 如:a%=1;即a=a%1

复合赋值表达式运算
- 格式: 变量复合赋值运算符表达式; 如: a *= 1 + 2;
- 由于赋值运算符是右结合性, 所以会先计算等号右边, 然后再进行复合运算
```
   var value = 5;
   value *= 2 - 2; // 等价于  value = 5 * (2 - 2);
   console.log(value); // 0
```

自增/自减运算符

自增、自减运算符介绍
- 在程序设计中,经常遇到“i=i+1”和“i=i-1”这两种极为常用的操作。
- JavaScript语言为这种操作提供了两个更为简洁的运算符,即++和--,分别叫做自增运算符和自减运算符。

自增、自减运算符求值过程

无论运算符号在前还是在后, 变量在自身基础上都会改变

   var num = 1;
   num++; // 等价于 num = num + 1;
   console.log(num); // 2

   num = 1;
   ++num;
   console.log(num); // 2

   num = 1;
   num--; // 等价于 num = num - 1;
   console.log(num); // 0

   num = 1;
   --num;
  console.log(num); // 0

后缀表达式:x++, x--; 先用x的当前值作为表达式的值,再进行自增自减1运算。即“先用后变”,也就是先用变量的值参与运算,变量的值再进行自增自减变化。

   var a, b;
   a = 20;
   b = 30;
   // ++ 在后, 变量先参与其它运算, 然后再自增
  var res = (a++) + (b++);
  console.log(res); // 50

   a = 10;
   b = 20;
   // -- 在后, 变量先参与其它运算, 然后再自减
   res = (a--) + (b--);
   console.log(res); // 30
   console.log(a); // 9
   console.log(b); // 19

前缀表达式:++x, --x; 其中x表示变量名,先完成变量的自增自减1运算,再用x的值作为表达式的值;即“先变后用”,也就是变量的值先变,再用变量的值参与运算。

 var a, b;
 a = 10;
 b = 20;
 // ++ 在前, 变量先自增, 然后再参与其它运算
 res = (++a) + (++b);
 console.log(res); // 32
 console.log(a); // 11
 console.log(b); // 21

  a = 10;
  b = 20;
  // ++ 在前, 变量先自增, 然后再参与其它运算
  res = (--a) + (--b);
  console.log(res); // 28
  console.log(a); // 9
  console.log(b); // 19

逻辑运算符

使用目的
- 有时候，我们需要在多个条件同时成立的时候才能执行某段代码
- 比如：用户只有同时输入了QQ和密码，才能执行登录代码，如果只输入了QQ或者只输入了密码，就不能执行登录代码。这种情况下，我们就要借助于JavaScript提供的逻辑运算符。
&&(与运算)
- 格式: 条件A && 条件B
- 运算结果
  只有当条件A和条件B都成立时，结果才为true；其余情况的结果都为false。因此，条件A或条件B只要有一个不成立，结果都为false
  口诀:一假则假
- 逻辑与运算过程
  - 总是先判断条件A是否成立;
  - 如果条件A成立，接着再判断条件B是否成立：如果条件B成立，“条件A && 条件B”的结果就为true，如果条件B不成立，结果就为false;
  - 如果条件A不成立，就不会再去判断条件B是否成立：因为条件A已经不成立了，不管条件B如何结果肯定是false;
  - 如果两个值都是true则返回true;
```
var result = true && true;
//只要有一个false，就返回false
result = true && false;
result = false && true;
result = false && false;
```
- 短路测试
```
    //第一个值为true，会检查第二个值
   true && alert("我来了！！");

    //第一个值为false，不会检查第二个值
   false && alert("我没有来！！");
```
- 注意点
  对于非Boolean类型的数值, 逻辑与会自动将其转换为Boolean类型来判断
  如果条件A不成立, 则返回条件A的数值本身
  如果条件A成立, 不管条件B成不成立都返回条件B数值本身
```
      var result =  "123" && "abc";
      console.log(result); // "abc"
      result =  "123" && 0;
      console.log(result); // 0
      result =  null && 0;
      console.log(result); // null
```
||(或运算)

或运算
- 注意点
  对于非Boolean类型的数值, 逻辑或自动会将其转换为Boolean类型来判断
  如果条件A不成立, 则不管条件B成不成立都返回条件B数值本身
  如果条件A成立, 则返回条件A的数值本身
```
  var  result =  null || 0;
  console.log(result); // 0
   
  result =  "123" || "abc";
  console.log(result); // "123"
  result =  "123" || 0;
  console.log(result); // "123"
```
!(非运算)
非运算

关系运算符

关系运算符存在的意义
- 默认情况下，我们在程序中写的每一句正确代码都会被执行。但很多时候，我们想在某个条件成立的情况下才执行某一段代码
- 这种情况的话可以使用条件语句来完成，但是学习条件语句之前，我们先来看一些更基础的知识：如何判断一个条件成不成立。
JavaScript中的真假性
- 在JavaScript中，条件成立称为“真”，条件不成立称为“假”，因此，判断条件是否成立就是判断条件的“真假”。
- 在JavaScript已经给我们定义好了一个Boolean类型的值, 取值是true和false, true代表真, false代表假
- 而接下来我们要学习的关系运算符它的返回值正好就是Boolean类型的值, 也就是说关系运算符的返回值要么是true,要么是false
图示

关系运算符
示例

   var a, b;
   a = 20;
   b = 20;
   console.log(a > b); // false
   console.log(a < b); // false
   console.log(a >= b); // true
   console.log(a <= b); // true
   console.log(a == b); // true
   console.log(a != b); // false

对于非数值进行比较时，会将其转换为数值然后在比较

console.log(1 > true);
console.log(1 >= false);
console.log(1 > "0"); 
console.log(1 > null);
console.log(1 > true); //false
console.log(1 >= false); //true
console.log(1 > "0"); //true
console.log(1 > null); //true

如果符号两侧的值都是字符串时，不会将其转换为数字进行比较, 而会分别比较字符串中字符的Unicode编码
- 比较字符编码时是一位一位进行比较
- 如果两位一样，则比较下一位，所以借用它来对英文进行排序
- 比较中文时没有意义
- 测试
```
console.log("a" < "b");
console.log("abc" < "abd");
console.log("你" > "我"); 
```
null、undefined 、NaN比较

console.log(null == 0); // false
console.log(undefined == 0); // false
// 永远不要判断两个NaN是否相等
console.log(NaN == NaN); // false

/*
 * 可以通过isNaN()函数来判断一个值是否是NaN
 *    如果该值是NaN则返回true，否则返回false
 */
var num = NaN;
console.log(isNaN(num)); // true

// undefined 衍生自 null, 所以返回true
console.log(null == undefined); // true;
console.log(null === undefined); // false;

// == 判断值是否相等
// == 会进行数据类型转换
console.log("123" == 123); // true
// === 判断值和类型时候同时相等
// === 不会进行数据类型转换
console.log("123" === 123); // false

注意
- 比较两个字符串型的数字，可能会得到不可预期的结果
- 所以, 在比较两个字符串型的数字时，一定要转型
- console.log("1111123" < "124");

逗号运算符

在JavaScript中逗号“,”也是一种运算符,称为逗号运算符。其功能是把多个表达式连接起来组成一个表达式, 称为逗号表达式。
- 一般形式形式:　表达式1，表达式2，… …，表达式n;
- 例如: a = 1 + 1,b = 3 * 4, c = 10 / 2;

求值过程

表达式1，表达式2，… …，表达式n;
逗号表达式的运算过程是：先算表达式1，再算表达式2，依次算到表达式n
整个逗号表达式的值是最后一个表达式的值

案例

  var a, b, c, d;
   /*
  1.先计算表达式1, a = 2
  2.再计算表达式2, b = 12
 3.再计算表达式3, c = 5
  4.将表达式3的结果返回给d
  */
 d = (a = 1 + 1,b = 3 * 4, c = 10 / 2);
 console.log(d); // 5

使用注意
- 程序中使用逗号表达式, 通常是要分别求逗号表达式内各表达式的值,并不一定要求整个逗号表达式的值。
- 并不是在所有出现逗号的地方都组成逗号表达式,例如在变量说明中,函数参数表中逗号只是用作各变量之间的间隔符。
```
    var a, b, c;  //这里的逗号只是分隔符
    function sendMessage(num, content) { //这里的逗号只是分隔符
           console.log(num, content);
    }
    ``` 
```

三目运算符(条件运算符)

格式: 条件表达式 ? 语句1 : 语句2;

求值规则

如果条件表达式为true，则执行语句1，并返回执行结果
如果条件表达式为false，则执行语句2，并返回执行结果
// 弹第一个
true?alert("语句1") : alert("语句2");
// 弹第二个
false?alert("语句1") : alert("语句2");

注意点
- 条件运算符?和:是一对运算符,不能分开单独使用
- 如果条件的表达式的求值结果是一个非布尔值, 会将其转换为布尔值然后在运算
```
 // 弹第二个
 null?alert("语句1") : alert("语句2");
 // 弹第一个
 "abc"?alert("语句1") : alert("语句2");
```

运算符的优先级

优先级
- JavaScript中,运算符的运算优先级共分为15 级。1 级最高,15 级最低。
- 在表达式中,优先级较高的先于优先级较低的进行运算。
  先计算优先级高的
  优先级相同则左结合计算
  可以使用()来改变优先级
图示

运算符的优先级

练习

用户从键盘输入3个整数, 找到最大值并输出?

    // 1.定义3个变量, 接收用户输入的值
    var num1, num2, num3, max;

    // 2.利用prompt()接收用户输入的值
    num1 = Number(prompt('请输入第一个数:'));
    num2 = +(prompt('请输入第二个数:'));
    num3 = +(prompt('请输入第三个数:'));

    // 3. 定义变量保存最大值
    // var max;

    // 4. 利用三目运算符进行两两比较
    /*max = num1 > num2 ? num1 : num2;
    max = max > num3 ? max : num3;*/
    // 不推荐
    max = (num1 > num2 ? num1 : num2) > num3 ? (num1 > num2 ? num1 : num2) : num3;

    // 5. 输出结果
    alert(max);

学习建议

多敲代码, 可结合视频一起观看, 不清楚的加我微信yejh9522沟通交流就好!

04-JavaScript基础-运算符操作

文章配套视频

进制表示

运算符

算术运算符

一元运算符

赋值运算符

自增/自减运算符

逻辑运算符

关系运算符

逗号运算符

三目运算符(条件运算符)

运算符的优先级

练习

学习建议

猜你喜欢

热点阅读