一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

本文章内容极其简单，如有不适请多谅解。

赋值运算符与算数运算符

赋值运算符

= 与数学中的等于号不同，在计算机的编程语言中，它是赋值的意思。而==才是等于，并且js还有强等于===。强等于在比较值的同时还会比较变量的类型。

let a = 5,b=3;

算术运算符

也就是，对变量进行，数学中的加减乘除还有取余等运算。

let a = 5,b=3;
let c = a + b;
let d = a - b;
let e = a * b;
let f = a / b;
let g = a % b;

复合运算符

实际上是一种简写方式。加减乘除取余等都可以使用

a+=b  // 也就是  a = a + b
a*=5  //        a = a * 5

一元运算符

也就是，++n,n++,--n,n--，n是任意的变量。

前++ 和后++ 只有在进行运算后才有区别。

 let n = 1;
 let f = n+ ++n;    // 3 在运算开始前自增1

 let n = 1;
 let f = n+ n++;    // 2  在运算结束后再自增1

比较运算符

包括: > < >= <= == === 。返回的是布尔值 true 活 false。
在使用==比较数值型和字符串类型的变量的时候，实际上进行了类型转换。
而使用===就不会进行类型转换了。因此== ===区别：== 只比较值，而 === 比较值和类型。在工作中推荐使用 ===

  let a = 3,b=5,c=3,d="3";
  console.log(a<b)     // true
  console.log(a>b)     // false
  console.log(a==d)    // true
  console.log(a===d)   // false

小例子

在输入框中输入的数值大于等于90，我们就提示信息。

画一个input给他的name取名age。再画一个span用于展示提示信息。

<body>
    <input name="age">
    <span id="msg"></span>
    <script>
        // 通过id选择器找到span元素
        let span = document.querySelector("#msg")
 // 通过name找到input，为其添加keyup也就是键盘按下事件。然后触发函数
 document.querySelector('[name="age"]').addEventListener("keyup",function(){
                msg = ""
                // this.value获得input的value 当它>=90 为msg赋值
                if(this.value>=90){
                    msg = "年龄不能大于90"
                }
                // innerHTML 将提示信息添加到页面上
                span.innerHTML = msg
            })
    </script>
</body>

逻辑运算符

记住与或非 && || !

     let a = 1,b=1;
       // 两边都成立
       if(a==1 && b==1){
            console.log("都是1")
       }
       // 成立一个即可
       if(a==1 || b==2){
           console.log("有一个1就行")
       } 
       // 非和等于号加起来就相当于不等于 同样也有 !==
       if(a==1 && a!=2){
           console.log("表达式成立")
       }

这里说一下我在React经常用的一些方法

{
      exist &&  <div>exist存在或者值不为空再渲染这个div</div>  
}

{
    btnClick && <div>点击按钮后渲染</div>
    !btnClick && <div>未点击按钮前渲染</div>
}

// 判断是否为空
!!""      // false
!!"a"     // true

小例子

对比两次输入的密码，如果不相同，提示。并且密码位数要大于五位，否则也提示。

首先，先画两个输入框和一个span，并为其添加name。

  <input name="password">
  <input name="confirm_password">
  <span name="msg"></span>

用的是querySelectorAll，通过name，获得输入框元素dom。

 // 获得元素
 let inputs = document.querySelectorAll("[name='password'],[name='confirm_password']")
 console.log(inputs)

此时获得的inputs是NodeList 通过延展字符串来将NodeList，转为list数组。

 let input_list = [...inputs]

遍历input_list，对两个input dom 进行事件监听(addEventListener)。

keyup:键盘抬起事件
query:方法封装用于通过name获取元素
innerHTML: 给span添加内容

 function query(name) {
            return document.querySelector(`[name=${name}]`)
        }
// 添加监听事件
        input_list.map(item => {
            item.addEventListener('keyup', function () {
                // 提示内容使用的变量
                let msg = '';
                if (query('password').value !== query('confirm_password').value || query('password').value.length < 5) {
                    msg = '两次密码不一致或密码长度小于五'
                }
                query('msg').innerHTML = msg
            })
        })

短路赋值

也就是或的使用 ||

let a=6;
let b=0;
let c = a || b  // 6  a不为0，那就相当于true条件，就不会再去看b了
let d = b || a  // 6  b为0，相当于false条件。会再去看a，a为6相当于true

 let sex = prompt("请输入")  || "保密";
 console.log(sex)

如过输入内容就会打印输入的内容，否则打印"保密"

在函数中的使用

 function star(num){
      // 如果不传参数 num则为undefined
      return "*".repeat(num || 4)
 }
console.log(star())

当不传递参数时，也可以如下给一个默认值，这是Es6的新语法

function star(num=5){
      // 如果不传参数 num则为undefined
      return "*".repeat(num)
 }

短路运算符小例子

当我们如下的，用户名或者接收协议不填/不选则弹出提示“请完善信息”

首先，画一个form表单，id为form，form内包着一个输入框name为user、一个checkbox，name为copyright。
一个公用的query函数用于查找元素。
addEventListener监听form的提交submit事件，通过name找到user对应的输入框元素的value、和checkbox元素
event.preventDefault() 阻止form真的提交

<html>

<head></head>

<body>
    <form action="http://www.baidu.com" id="form">
        用户名 ： <input name="user">
        <hr>
        <input type="checkbox" name="copyright"> 接收协议
        <hr>
        <button>提交</button>
    </form>

    <script>
        // 网站协议接受验证
        function query(el) {
            return document.querySelector(el)
        }
        query('#form').addEventListener('submit', function (event) {
            let user = query("[name='user']").value.trim()
            let copyright = query("[name='copyright']").checked
            if (!user || copyright === false) {
                alert("请完善信息")
            }
            event.preventDefault();
        })
    </script>
</body>

</html>

js基础第二章 运算符

赋值运算符与算数运算符