JS运算符

运算符是根据特定的规则对操作数执行运算

JS共定义了47个运算符。

逗号操作符

• 逗号运算符是二元运算符,它能够先执行运算符左侧的操作数,然后再执行右侧的操作数,最后返回右侧操作数的值。

  //逗号操作符执行计算总会返回最后一项
  var num4 = (4,5,6,7,8);
  console.log(num4);
  
  //i < 2,j < 4  前边为false 后边为true  这条语句仍然返回true  因为是逗号操作符总会返回后边的值
  for (var i = 0,j = 0; i < 2,j < 4; i++,j++) {
      console.log(i+j);
  }
  
  //i < 2,j < 4  前边为true 后边为false  这条语句仍然返回false  因为是逗号操作符总会返回后边的值
  for (var i = 0,j = 0; i < 4,j < 2; i++,j++) {
      console.log(i+j);
  }Copy to clipboardErrorCopied

• 逗号运算符可以实现连续运算,如多个变量连续赋值

  var a=1,b=2,c=3,d=4;Copy to clipboardErrorCopied

赋值操作符

• 赋值运算符左侧的操作数必须是变量、对象属性或数组元素。也称为左值

• 赋值运算有以下两种形式:

  • 简单的赋值运算(=):把等号右侧操作数的值直接赋值给左侧的操作数,因此左侧操作数的值会 发生变化。

  • 附加操作的赋值运算:赋值之前先对右侧操作数执行某种操作,然后把运算结果复制给左侧操作 数 比如 +=  -+ *=  /=  %=

//赋值运算符的结合性是从右向左,最右侧的赋值运算先执行,然后再向左赋值,以此类推,所以连续赋值运算不会引发异常
var a = b = c = d = e = f =100;//连续赋值

//常见错误：
var c = 3;
//等于判断  写成了一个等号，这个时候就一直为true  所以判断是否成立都会执行
if (c = 4) {
    alert('hello');
}Copy to clipboardErrorCopied

乘性操作符

• 乘性操作符分为 乘法 除法 求模（取余）

• 乘性操作符计算 会先把两个值转换成number类型 然后再计算

  //乘法：
  console.log(3 * 3)//9
  console.log(-3 * 3)//-9
  console.log(-3 * -3)//9
  console.log(null * -3)//0
  console.log(undefined * -3)//NaN
  console.log(undefined * null)//NaN
  console.log(undefined * "123")//NaN
  console.log("10" * "123")//1230
  console.log("10" * 123)//1230
  console.log("abc" * 123)//NaN
  console.log(true * 123)//123
  console.log(true * false)//0
  console.log([] * false)//0
  console.log([] * [])//0
  console.log([] * {})//NaN
  console.log([] * {name:"lily"})//NaN
  console.log([2] * {name:"lily"})//NaN
  console.log([2] * {})//NaN
  console.log([2] * [3])//6
  console.log([2,3] * [3])//NaN
  console.log(Infinity * [3])//Infiity与任何相乘都是Infiity或-Infiity
  console.log(Infinity * Infinity)//Infinity
  console.log(Infinity * 0)//Infinity和0是NaN
  console.log(Infinity + Infinity)//Infinity
  console.log(Infinity - Infinity)//NaN
  Copy to clipboardErrorCopied

//除法 console.log(6 / 3);//2 console.log(-6 / 3);//-2 console.log(-6 / -3);//2 console.log("abc" / 3);//NaN console.log(true / 3);//0.333333 console.log(0 / 0);//NaN 0和0不能相除 console.log(5 / 0);//Infinity console.log(Infinity / 0);//Infinity 被任意数除 都返回Infinity console.log(Infinity / Infinity);//NaN console.log([1] / Infinity);//0 当除数是Infinity的时候， 得到的结果是0 console.log(8000000000000000 / Infinity);//0 console.log([6] / 2);//3

//取余（模运算） 取余的符号只看被除数（前边的） 不看除数 console.log(5 % 3);//2 console.log(-5 % 3);//-2 console.log(-5 % -3);//-2 console.log(5 % -3);//2 console.log('abc' % -3);//NaN console.log('5' % -3);//2 console.log('5' % Infinity);//-5 console.log(Infinity % -3);//NaN console.log([5] % -3);//2 console.log({} % -3);//NaN

## 减法操作符

- 减法运算中，有一个不能转化成数字就返回NaN，Infinity与任意数相减都是Infinity

- 技巧：使用值减去0 可以快速的把值转换成数字

```js
console.log(5 - 2);//3
console.log("5" - 2);//3
console.log("a" - 2);//NaN
console.log([] - 2);//-2
console.log([5] - 2);//3
console.log([5,4] - 2);//NaN
console.log({} - 2);//NaN
console.log(true - 2);//-1
console.log(null - 2);//-2
console.log(undefined - 2);//NaNCopy to clipboardErrorCopied

加法操作符

概念

• 加法操作符除了运算以外，还有字符串拼接的功能
• 加法运算中，如果出现一个是字符串 那么就把另一个转换成字符串
• 两个字符串相加，是将两个字符串链接再一起生成一个新的字符串
• 对象之间相加，也是拼接字符串
• 运算中如果只有数字和undefined、null，那么这将进行数字运算

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

//加法运算中，如果出现一个是字符串  那么就把另一个转换成字符串
//两个字符串相加，是将两个字符串链接再一起生成一个新的字符串
console.log("1" + 1);//'11'
console.log("abc" + 1);//'abc1'
console.log("abc" + "abc");//'abcabc'
console.log(null + "abc");//'nullabc'
console.log(undefined + "abc");//'undefinedabc'
console.log([] + "abc");//'abc'

//空数组和对象拼接，都会把他们转换成字符串
console.log([] + {});//'[object object]'
//数组相加也是拼接字符串
console.log([] + []);//''

//两个对象拼接 也是转换成字符串
console.log({} + {});//[obejct object][object object]


console.log(undefined + null);//NaN
console.log(true + true);//2Copy to clipboardErrorCopied

加法操作符练习

var num1 = 1 + 2 + "a" + "b";//3ab
var num2 = "a" + 1 + 2 + "b";//a12b
var num3 = 1 + 2 + 3 + "a";//6a
var num4 = "a" + 2 + 3 + 4;//a234

var num5 = 1;
var num6 = 2;
alert("num5 + num6 = "+ num5 + num6);//'num5 + num6 = 12'

var name = "李沛华";
alert("我的名字是" + name);Copy to clipboardErrorCopied

加法操作符使用1

让用户输入两个值 计算两个值的和,当点击按钮时 让box的宽度和高度发生变化 值为两个值的和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加法操作符使用</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    请输入第一个值<input type="text" id="ipt1">
    请输入第二个值<input type="text" id="ipt2">
    <button id="btn">你点我呀</button>
    <div id="box">

    </div>

    <script>
        var oBox = document.getElementById("box");
        var oBtn = document.getElementById("btn");
        var oIpt1 = document.getElementById("ipt1");
        var oIpt2 = document.getElementById("ipt2");

        oBtn.onclick=function () {
            //1.点击按钮的时候  先获取两个输入框的值，并计算一个和
            //2.获取输入框的值是字符串，要传换成数字再进行加法运算求和
            var iptAdd = Number(oIpt1.value) + Number(oIpt2.value);
            console.log(iptAdd);

            //3.将得到的和赋值给box的宽和高
            // 对元素的style属性中的width属性进行赋值 宽和高都是有单位的 单位是px
            //这样的方法 设置的样式 都是行内样式
            oBox.style.width = iptAdd + "px";
            oBox.style.height = iptAdd + "px";
        }
    </script>
</body>
</html>Copy to clipboardErrorCopied

加法操作符练习2

每次点击按钮的时候，让con的内容的数值 每次加2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>+=练习</title>
</head>
<body>
<div>
    <button id="btn">点击</button>
    <p id="con">0</p>

    <script>
        /*
         * 每次点击按钮的时候，让con的内容的数值 每次加2
         *
         * 1、获取元素
         * 2、点击事件
         * 3、获取con的值  innerHTML
         * 4、让con的值加2
         * 5、把con的值再给到con里 innerHTML
         */

        var oBtn = document.getElementById("btn");
        var oCon = document.getElementById("con");

        //2.绑定事件
        oBtn.onclick=function () {
            //3.获取con的值  获取元素的值 同样也是字符串  所以要转换成number
            var conCon = Number(oCon.innerHTML);
            //4.让con+2
            conCon += 2;
            //5.把计算好的值赋值到con中
            oCon.innerHTML = conCon;
        }
    </script>
</div>
</body>
</html>Copy to clipboardErrorCopied

学生信息录入系统

每次可以再输入框输入名字 然后点击以后 名字可以累加在p标签中 并且每个名字换行显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>+=练习</title>
</head>
<body>
<div>
    <h2>学生信息录入系统</h2>
    <input type="text" id="ipt">
    <button id="btn">点击</button>
    <p id="con">李沛华</p>

    <script>
        /*
         * 每次可以再输入框输入名字  然后点击以后 名字可以累加在p标签中  并且每个名字换行显示
         *
         * 1、获取元素
         * 2、点击事件
         * 3、获取ipt的值
         * 4、把ipt的值再给到con里
         */

        var oBtn = document.getElementById("btn");
        var oCon = document.getElementById("con");
        var oIpt = document.getElementById("ipt");

        //2.绑定事件
        oBtn.onclick=function () {
            //3.获取ipt的值
            var iptCon = oIpt.value;
            //4.把ipt的值累加到con中
            //获取con原来的值 拼接上iptcon（新的值）  然后赋值给con.innerHTML(con的内容)
            //我们可以在拼接赋值的时候 把标签当成字符串拼接进去   innerHTML是可以解析标签
            //oCon.innerHTML = oCon.innerHTML + "<br>" + iptCon;
            oCon.innerHTML += "<br>" + iptCon;
        }
    </script>
</div>
</body>
</html>Copy to clipboardErrorCopied

递增递减操作符

• 递增(++)和递减(--)运算就是通过不断地加1或减1,然后把结果赋值给左侧，以实现改变自身结果的一种简洁方法
• 递增和递减在运算之前都会试图转换值为数值类型,如果失败则返回 NaN。
• 根据位置不同,可以分为4种运算方式
  • 前置递增(++n):先递增,再赋值
  • 前置递减(--n):先递减,再赋值
  • 后置递增(n++):先赋值,再递增
  • 后置递减(n--):先赋值,再递减

// 无论是  ++a；  还是 a++；  都是让 a每次加1，如果两个代码都是独立运行，那么两个代码没有区别
var a = 1;
// 让 a 加一
//a = a + 1;
//a += 1;
a ++;//a++是让a  每次加1
a ++;//a++是让a  每次加1
a ++;//a++是让a  每次加1
console.log(a);

var b = 1;
++ b;//让b每次加1
++ b;//让b每次加1
++ b;//让b每次加1
++ b;//让b每次加1
console.log(b);

//c++不是单独运行的时候，也就是有赋值操作的时候，那么是先执行赋值，然后再去加1
//c++ 就是先赋值 后加1
var c = 2;
var d = c ++;
console.log(c);//3
console.log(d);//2

//++c  先加一 后赋值
var c = 2;
var d = ++ c;
console.log(c);//3
console.log(d);//3

//其他练习
var a = 1;
b = a++ + (a++) + 1 + (++a) + (a++) + (++a) + a + (++a);
// b = 1 + 2 + 1 + 4 + 4 + 6 + 6 + 7;
console.log(a);//7
console.log(b);//31Copy to clipboardErrorCopied

关系运算

关系运算也称比较运算,需要两个操作数,运算返回值总是布尔值

大小比较

• 比较大小关系的运算符有4个
  • >:如果第一个操作数小于第二个操作数,则返回true;否则返回 false
  • <=:如果第一个操作数小于或者等于第二个操作数,则返回 true;否则返回 false
  • >=:如果第一个操作数大于或等于第二个操作数,则返回true;否则返回 false
  • >:如果第一个操作数大于第二个操作数,则返回true;否则返回 false
• 比较运算中的操作数可以是任意类型的值,但是在执行运算时,会被转换为数字或字符串,然后再 进行比较。如果是数字,则比较大小; 如果是字符串,则根据字符编码表中的编号值,从左到右逐个比 较每个字符
  • 如果两个操作数都是数字,或者一个是数值,另一个可以被转换成数字,则将根据数字大小进行比较
  • 如果两个操作数都是字符串,则执行字符串比较。
  • 如果一个操作数为NaN,或者被转换为NaN,则始终返回 false。
  • 如果一个操作数是对象,则先使用 valueOf取其值,再进行比较:如果没有valueOf方法,则 使用toString取其字符串表示,再进行比较
  • 如果一个操作数是布尔值,则先转换为数值,再进行比较。
  • 如果操作数都无法转换为数字或字符串,则比较结果为false

var num1 = 3;
var num2 = 4;
console.log(num1 < num2);//true
console.log(num1 <= num2);//true
console.log(num1 >= num2);//false
console.log(num1 > num2);//false


//数字和字符串相比  按照数字来比较
console.log(1 < 4);//true
console.log(1 < '4');//true
console.log(1 < 'a');//false  1 和 NaN在比较

//字符串和字符串比较 是按照每一位来比较的  先比较第一位 然后如果相等再比较第二位 等等等。。。
//字符串比较的是ascII码的大小  数字<大写字母<小写ß字母
console.log("14" < '4');//true
console.log("abc" < '4');//false
console.log("abc" < 'ab');//false

//null和字符串比 是按照数字相比的  null转换成了数字
console.log(null > 'abcd');//false
console.log(undefined < 1);//false
console.log(undefined < "abc");//false
console.log(undefined < null);//false

//两个{}相比 按照数字来比较  都是NaN  返回false
console.log({} > {});//fasle

//数组和对象比较  转换成了字符串比较  ""<'[obejct object]'
console.log([] < {});//true

//有数组没有数字  按照字符串比较
console.log([4] > [14]);//true


//布尔值和其他比较 都转换成数字比较
console.log(true > -3);//true
console.log(true > []);//true

//布尔值和对象比较 也是按照数字比较的，对象转换成了NaN
console.log(true == {});//fasleCopy to clipboardErrorCopied

相等和全等

• 等值检测运算符包括4个：
  • ==:比较两个操作数的值是否相等
  • !=:比较两个操作数的值是否不相等
  • ===:比较两个操作数的值是否相等,同时检测它们的类型是否相同
  • !==比较两个操作数的值是否不相等,同时检测它们的类型是否不相同
• 在相等运算中,应注意以下几个问题
  • 如果操作数是布尔值,则先转换为数值,其中false转为0,true转换为1.
  • 如果一个操作数是字符串,另一个操作数是数字,则先尝试把字符串转换为数字
  • 如果一个操作数是字符串,另一个操作数是对象,则先尝试把对象转换为字符串。
  • 如果一个操作数是数字,另一个操作数是对象,则先尝试把对象转换为数字。
  • 如果两个操作数都是对象,则比较引用地址。 如果引用地址相同,则相等; 否则不等。
  • NaN和任何值都不相等，包括自身
  • null和undefined值相等，但是是不同的数据类型
• 在全等运算中,应注意以下几个问题
  • 如果两个操作数都是简单的值.,则只要值相等,类型相同,就全等
  • 如果一个操作数是简单的值.另一个操作数是复合型对象,则不全等
  • ；如果两个操作数都是复合型对象,则比较引用地址是香相同.

逻辑运算

逻辑运算又称布尔代数，也就是布尔值的算术运算。逻辑运算符包含：逻辑与（&&）、逻辑或（||）、逻辑非（！）

逻辑与运算

逻辑与（&&）运算是只有两个数都是true的时候，才会返回true（一假即假）

• 第一步：计算第一个操作数
• 第二步：如果第一个操作数转换成false，那么就会结束运算，直接第一个操作数
• 第三步：如果第一个操作数返回true，则计算第二个操作数的值
• 第四步：第二个操作数如果返回true 则逻辑与返回第二个操作数，否则返回第一个操作数

//假设用户输入的长度 在10 到20 之间  那么就成功
var userLen = 15;
//参照操作符优先级  比较操作符 大于 逻辑操作符
console.log(userLen > 10 && userLen < 20);Copy to clipboardErrorCopied

逻辑或运算

逻辑或运算（||），如果两个操作数都是true，或者其中一个是true的时候，会返回true。

• 第一步：计算第一个操作数的值。
• 第二步：检测第一个操作数的值。如果左侧的表达式的值可以转换为true，那么就会结束运算。直接返回第一个操作数的值
• 第三步：如果第一个操作数可以转换为false，则计算第二个操作数的值。并返回第二个操作数的值

//小明的女朋友 有3个 或 5个是合法的  是其他的就不行
var mingGrilFri = 4;
console.log(mingGrilFri == 3 || mingGrilFri == 5);Copy to clipboardErrorCopied

逻辑非运算

逻辑非运算，作为一元运算符，直接放在操作数之前，把操作数的值转为布尔值，然后取反返回

//如果说用户输入的全部都是数字  则返回成功
// isNaN  判断传入的值 是否是纯数字  如果是纯数字则返回false  否则是true
var userNum = '15701665563';
if (isNaN(userNum)) {

}else{
    alert("成功")
}

//优化
if (!isNaN(userNum)) {
    alert("成功");
}Copy to clipboardErrorCopied

逻辑与和逻辑或的返回值不必是布尔值，但是逻辑非运算的返回值一定是布尔值

与或非练习

判断两个数，如果有一个是非数字，那么就提示用户，否则就计算两个数字的和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>与或非练习</title>
</head>
<body>
<script>
    // 判断两个数，如果有一个是非数字，那么就提示用户，否则就计算两个数字的和
    var num1 = "3333";//input中拿到的值，只能是字符串
    var num2 = "4444";

    /*if (isNaN(num1) || isNaN(num2)){
        alert("两个数字中存在非数字")
    } else{
        alert(Number(num1) + Number(num2));
    }*/


    if (!isNaN(num1) && !isNaN(num2)){
        alert(Number(num1) + Number(num2));
    } else{
        alert("两个数字中存在非数字")
    }
</script>
</body>
</html>Copy to clipboardErrorCopied

短路原理

• && || 遵循“短路”原理
• 若&&中第一个表达式为 fasle 则不会处理下一个表达式；||第一个表达式为true则不会执行下一个
• 当 || 时，找到为 true 的分项就停止处理，并返回该分项的值；否则执行完，并返回最后分项的值。
• 当&&时，找到为false的分项就停止处理，并返回该分项的值

// 这种类似的题目，一般不考虑整体返回值，而是看前一句条件是否满足，然后看后一句代码是否执行
var a = 2; var b = 3;
(a < b)&&(a = 5);
console.log(a);//5

var a = 6; var b = 3;
(a < b)&&(a = 5);
console.log(a);//6

var a = 2; var b = 3;
(a < b)||(a = 5);
console.log(a);//2

var a = 6; var b = 3;
(a < b)||(a = 5);
console.log(a);//5Copy to clipboardErrorCopied

一元运算

一元运算符：只有一个运算数的运算符，比如++  --：自增(自减)、+(-)：正负号等

var a = "5";
var b = 6;
console.log(Number(a));

console.log(typeof +a);//number

// 一元加法运算对数字没有影响  但是对其他类型却转换成了数字
console.log(+b);//6
console.log(+a + 2);//7
console.log(+"abc");//NaN
console.log(+[]);//0
console.log(+null);//0
console.log(+undefined);//NaN
console.log(+{});//NaN
console.log(+false);//0

// 一元减法 对数字没有加一个负数  对其他类型先转换成数字 然后添加一个负号
console.log(-a + 2);//-3

// if判断会自动把判断式转换成布尔值
var a = 0;
if(a){
    alert("成功")
}else{
    alert("失败")
}Copy to clipboardErrorCopied

字符串转数字总结

• Number方法
• 一元运算
• 减0
• parseInt 和 parseFloat

var a = "4";
// 第一种  Number方法
console.log(Number(a));//4

//第二种  一元运算
console.log(+a);//4

// 第三种 减0
console.log(a - 0);//4

// 第四种 parseInt 和 parseFloat
//parseInt对字符串检测，从第一位开始检测，直到检测到非数字为止，然后将检测到的数字取整
console.log(parseInt("100px"));;//100
console.log(parseInt("10abc10"));;//10
console.log(parseInt("abc10"));;//NaN
console.log(parseInt("10.533abc10"));;//10
console.log(parseInt("10.a001bc10"));;//10

//parseFloat对字符串检测，从第一位开始检测，直到检测到非数字为止 保留小数
console.log(parseFloat("100px"));;//100
console.log(parseFloat("10abc10"));;//10
console.log(parseFloat("abc10"));;//NaN
console.log(parseFloat("10.533abc10"));;//10.533
console.log(parseFloat("10.a001bc10"));;//10

// 效果：点击获取元素宽度  并每次加10
//1 获取元素的宽度（这种方法只能获取元素的行内样式）
var oBox = document.getElementById("box");
var oBtn = document.getElementById("btn");
var boxWidth = oBox.style.width;
console.log(boxWidth);//'100px'
// 2.对 btn 绑定点击事件
oBtn.onclick = function () {
    //3.让宽度的值每次加10
    boxWidth = parseInt(boxWidth)+10+"px";
    //4.赋值
    oBox.style.width = boxWidth;
}Copy to clipboardErrorCopied

三元运算符（三目运算符、条件运算符）

语法格式：b？x ：y

• b操作数必须是一个布尔型的表达式，x和y是任意类型的值
• 如果操作数b的返回值是true，则执行x的操作数，并返回该表达式的值
• 如果操作数b的返回值是false，则执行y的操作数，并返回该表达式的值

var num = true ? 3 : 2;
console.log(num);

// 定义变量a，然后检测a是否被赋值，如果被赋值，则使用该值，否则设置一个默认值
var a;
typeof a !="undefined"?a = a:a = 0;
console.log(a);Copy to clipboardErrorCopied

判断式的优化

以下四中方法书写判断式：如果a大于b 则弹出你好 否则 弹出滚蛋

// 如果a大于b  则弹出你好  否则 弹出滚蛋
// 方法1
if (a > b){
    alert("你好");
} else{
    alert("滚蛋");
}

// 方法2 三元运算
a > b ? alert("你好"):alert("滚蛋");

// 方法3 短路原理
a > b || alert("滚蛋");
a > b && alert("你好");

//方法4:
a > b && alert("你好")|| alert("滚蛋");Copy to clipboardErrorCopied

操作符优先级

综合练习

变量 year 中存放的是年份值，判断变量是不是闰年，var year;

//年份能够被4整除且不能被100整除，或者年份能够被400整除
var year = 2016;
if (year % 4 == 0 && year % 100 != 0 || year % 400 ==0) {
    alert("是闰年")
}