前端 js运算符大全

js 中运算符包括以下几种

1.算术运算符
2.比较（关系）运算符
3.逻辑运算符
4.三元运算符
5.赋值运算符
从1到5运算符的优先级 依次减弱

一、算术运算符

算术运算符的种类：

 +  -   *   /    %(取余)   ++   --

+ 运算符(加号)

   let num1 = 10;
   let num2 = 20;
   let num3 = num1 + num2;
   console.log(num3);  //输出的值为30

如果 + 的两边有一个是字符串，则表示的是字符串的拼接
原理：如果两个不同类型的数据相加，有一个是字符串，则另一个数据会被隐式转化为字符串，然后通过 + 和另一个数据拼接在一起
例如：

let str = '莫愁前路无知己'; //字符串类型
let num1 = 10;
let num2 = 20;
let num4 =str + num2 + num1;
console.log(num4);
输出的值为：莫愁前路无知己2010

let str1 ='西出阳关无故人';
console.log(str + str1);
输出的值为:莫愁前路无知己西出阳关无故人

let num1 = 10;
let num2 = 20;
let str = '莫愁前路无知己';
let num5 = num1 + num2 + str;
console.log(num5);
输出的值为：30莫愁前路无知己

- 运算符(减号)

-(减)运算符，可以把他两边的字符串类型，隐式转化为 数字类型，
如果被转化的字符串是 一个数字，则参与减法运算
如果被转化的字符串是 一个普通字符，则得出的结果是 NaN

除了 + 运算的时候，把数字转化为字符串，其他的算术运算符都是把字符转化为数字

    let num6 = 200;
    let num7 = 100;
    let num8 = '300';
    let str1 ='西出阳关无故人';
    console.log(num6 - num7);//结果为100
    console.log(str1 - num7);  //结果为NaN
    console.log(num6 - num8); //结果为-100

以上效果，代码如下：

body里面写
<!-- 求和 -->
<input id="val1" type="number" value="">+
<input id="val2" type="number" value="">=
<button id="sum" value="">求和</button>

js代码写<script>标签里面，<script>标签在body外面
<script>
//求和
let val1 = document.getElementById('val1');
let val2 = document.getElementById('val2');
let sum = document.getElementById('sum');

//点击事件
sum.onclick = function(){ 
   // js 通过 input 的 value属性获取的值，
   是一个字符串，通过隐式转换 变成一个数字
   let v1 = val1.value - 0;
   let v2 = val2.value - 0;
   alert(v1 + v2);
}；
</script>

% 取余，又称 模运算

运算的结果是 相除之后的余数
被除数/除数 返回结果是余数
被除数和除数不一定都是整数

let num1 = 2;
let num2 = 3;
console.log(num1 * num2); //结果为 6
console.log(num1 / num2); //结果为0.6666666666666666
console.log(0.1 + 0.2); //结果为0.30000000000000004，因为用js写计算器会存在误差

++ - -

a++ ++a 都是自增写法

c=a++; 先把a的值赋值给c,然后在执行a 的自增
c=++a; 先执行a 的自增,然后在把a 的值赋值给c

let num5 = 10;
++num5;
num5++;
console.log(num5);  //12
console.log(++num5);  //13

let a = 10;
let c = a++; //1.把a的值赋值给c,此刻 c=10; 2.执行a的自增，此刻 a=11;
console.log(c,a);  //10 11

let k = 10;
let m = (k++)+3;
console.log(k,m);  //11 13

let n =13;
let s =++n+(n++)+n;  
           14    14    15
  console.log(s);  //值为43

1.++n, n的值变成了14， 此时让 n=14 参与后来的运算
2.n++,先把n 的值取出来，n=14,参与当前的运算，然后n++(n=15),参与后来的运算
3.s = 14 + 14 + 15 = 43

- -自减，a-- --a 使用方式和上面的 ++ 一致

c=a–; 先把a的值赋值给c,然后在执行a 的自减
c=–a; 先执行a 的自减,然后在把a 的值赋值给c

++ 和-- 的运算优先级高于 + — * /

    let j = 14;
    let num6 = (j++)   +  (--j)  +  (j--)  +  (++j); 
                   14(15)    14(14)   14(13)     14
    console.log(num6);//56

二、关系运算符

种类：

大于 , <小于, >=大于等于, <= 小于等于 , == 等于 , != 不等于 , === 全等， !==不全等

关系表达式的 返回值 是 true 或者 false

== 只比较数值，不比较类型
=== 不单比较数值，而且比较类型

console.log(3>5); 输出值为 false
console.log(5>=5); 输出值为 true

let num1 = 30;
let num2 = '30';
console.log('num1和num2是否相等',num1 === num2);
//输出值为 num1和num2是否相等 false
if (num1 == num2) {
   console.log('相等');
}else{
   console.log('不相等');
} //输出值为 相等

let str1 ='陈胜';
let str2 ='吴广';
console.log('陈胜不等吴广',str1 != str2);
//输出值为 陈胜不等吴广 true
console.log('高堂明镜悲白发'=='朝如青丝暮成雪');//false

三、逻辑运算符

或 ||
与(并且) &&
非 !

判断规则
或 || ：两边的判断条件，只要有一个为真(true),则返回结果为真
与(并且) && ：两边的判断条件都为真(true)，则返回结果为真(true)
非 ! : 取当前结果返回的布尔值的 反向值，就是取反的意思

//或
console.log(3>4||2>3);  //false
console.log(3>4||2<3);  //true
console.log('==============================='); 

//与(并且)
//只有一个为true，返回结果为false
console.log(3>4 && 2<3);  //false
//两个同时为true，返回结果为true
console.log(3<4 && 2<3);  //true

非 取反
if(!(3<4)){
    console.log('今天晚上做作业');
}else{
    console.log('今天晚上没作业');
} // 今天晚上没作业


0 为false，非0数字为true
if(0){
    console.log('今天晚上吃包子');
}else{
    console.log('今天晚上吃炸鸡');
}  //今天晚上吃炸鸡

四、三元运算符

三元运算符： ?（问号）
判断条件 ?
判断条件为真，则执行当前(冒号前)代码 : 判断条件为假，则执行当前(冒号后)代码

//执行 表达式
6>4 ? console.log('固始鹅块'): console.log('糍粑');
输出为： 固始鹅块

//声明不同的变量值
let abc = 1<0 ? '秦琼' : '尉迟恭';  
console.log(abc);  //尉迟恭
console.log( 5>6 ? '单雄信'  :  '罗成');  //罗成

//三元运算符的嵌套
let username = 5<6 ? （ 6>7 ? '李元霸'  :   '宇文成都' ） :   '杨广';
console.log(username);
5<6为真，所以执行冒号前小括号里面的内容
6>7为假，所以输出值为冒号后的 宇文成都