前端笔记---2.javascript基础（操作符）

学习目标：

1. JavaScript中的操作符

表达式和语句

表达式

一个表达式可以产生一个值，有可能是运算、函数调用、字面量等等。表达式可以放在任何需要的地方。

比如： 5+6

语句

语句可以理解为一个行为，循环语句和判断语句就是最经典的语句。一个程序是由很多个语句组成。一条语句，一般以;结束。建议不要省略。

操作符

操作符，又叫做运算符 operator

表达式 一般是由 操作符 和 操作数组成 (常见的表达式)

算术运算符

数学里边的加减乘除

// + - * / %
// 跟数学中的是一样的
var x = 5;
var y = 10;
console.log(x + y);
console.log(x - y);
console.log(x * y);
console.log(x / y);
console.log(x % y);

// 两个比较特殊的
console.log(x/0); // Infinity
console.log(x % 0 ); // NaN

一元运算符

只带一个操作数的 运算符 叫 一元运算符

能带两个 操作数的 运算符 叫 二元运算符，所以前面所学的 都是 二元运算符。

// ++ 自身+1
// -- 自身-1
var num = 5;
console.log(++num);  // 6
console.log(--num);  // 5

++num 首先它是一个表达式，既然是表达式，就有 返回值。

前置和后置的区别就在于这个返回值

• 前置

先让操作数 自身+1（-1），然后再返回运算后的结果。

var num  = 5;
console.log(++num);// 6;
console.log(num); // 6
var num1 = 7;
console.log(num + ++num1);//14   6+8
console.log(num1);// 8

console.log(--num1);// 7

• 后置

先返回操作数的结果，然后再对 操作数 自身+1(-1)

var num = 5;
console.log(num++);// 5
console.log(num);//6
var num1  = 7;
console.log(num + num1++); // 6+7 13
console.log(num1);// 8

• 巩固练习

var a = 1;var b= ++a + ++a;console.log(b);//2 + 3 b=5
var a = 1;var b= a++ + ++a;console.log(b);//1 + 3(++a之前a已经变成了2) b=4
var a = 1;var b = a++ + a++;console.log(b);// 1 + 2 b=3
var a = 1;var b = ++a + a++;console.log(b);// 2 + 2 b=4

逻辑运算符

逻辑运算符又叫 布尔运算符。

• &&(逻辑与)： 两个操作数同时为true，结果为true，否则为false。并且
• ||(逻辑或)：两个操作数有一个为true，结果为true，否则为false。
• !(逻辑非)：取反

// 逻辑运算符  与&&    或||    非!
var a = true;
var b = false;
console.log(a && b);
console.log(a || b);
console.log(!a)

什么时候用到逻辑运算符？

将来 需要判断 或者 循环的时候，即将使用大量的逻辑运算。

布尔类型的隐式转换

var num = 123;
console.log(Boolean(num));// 强制转换

// 隐式转换
// 转换成 false的5中情况  0,'',NaN,undefined,null
if(num){
    console.log('转换成功');
}
var msg;
if(msg){
    console.log('true');
}else{
    console.log('false');
}
//判断一个变量是否存在
//console.log(typeof aaa === 'undefined');

// 利用取非进行隐式转换
var str = '哈哈';
var isOk = !!str; //  true，取反 为 false，再取反
console.log(isOk);

关系运算符

关系运算符又叫 比较运算符

用于比较 两个数的大小 或者 异同 返回值 是布尔类型

> 、<、 >=、<= 、== 、!= 、=== 、!==

var a = 10;
var b = 5;
var c = '10';

// 比较两个数的大小，返回布尔值
console.log(a>b);
console.log(a<b);

// 比较相等的时候，
// == !=
console.log(a==b);
console.log(a!=b);
//== 判断变量的值是否相等,与类型无关
//=== 先判断类型是否相同，再判断是否相等
//为了严谨，始终推荐===
console.log(a==c);
// === !==
console.log(a===b);
console.log(a!==b);
// 只有 两者的 值 和 数据类型 都相同的时候，才返回true
console.log(a===c);

== 判断变量的值是否相等,与类型无关
=== 先判断类型是否相同，再判断是否相等
为了严谨，始终推荐===

赋值运算符

= 、+= 、-= 、 *= 、/= 、%=

var num = 5;
var num1 = num * 5; 
// 简化语法
num1++; // 自增1
num1 = num1 + 5; // 自增5
// 简化语法
num1 += 5; //  等价于上面
// 同理
num1 -= 5;
num1 *= 5;
num1 /= 5;
num1 %= 5;

运算符的优先级

运算符的优先级

1. () 优先级最高
2. 一元运算符 ++ – !
3. 算术运算符 先 * / % 后 + -
4. 关系运算符 > >= < <=
5. 关系运算符 == != === !==
6. 逻辑运算符 先 && 后 ||
7. 赋值运算符

// 练习1
4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true;
//解析 第一步加括号
(4 >= 6) || ('人' != '阿凡达') && (!(12 * 2 == 144)) && true;
//第二步
(4 >= 6) || ('人' != '阿凡达') && (!(24 == 144)) && true;
//第三步
(4 >= 6) || ('人' != '阿凡达') && (!false) && true;
//第四步
(4 >= 6) || ('人' != '阿凡达') && true && true;
//第五步
false || true && true && true;
//第六步
false || true;
//第七步
true;

// 练习2
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22';
//解析 第一步加括号
(5 == num / 2) && ((2 + 2 * num).toString() === '22');
//第二步
(5 == 5) && ((2 + 20).toString() === '22');
//第三步
true && (22.toString() === '22');
//第四步
true && ('22' === '22');
//第五步
true && true;
//第六步
true;