js运算符

h54211

已于 2022-11-24 21:11:28 修改

阅读量72

点赞数

文章标签： javascript 前端

于 2022-11-24 21:02:15 首次发布

本文链接：https://blog.csdn.net/h54211/article/details/128026522

版权

数据类型的隐式转换：

1、isNaN() 是不是不是一个数字，不是数字返回true,是数字返回false

语法： isNaN(要检测的数据)

转换之前，会先自己内部调用Number()方法，再用isNaN()
<script>
        var a = 10
        var b = 'hello'
        var c = '123'
        var d = ''
        var e = true
        var f = false
        var g = null
        var h = undefined
        console.log(isNaN(a));  //false
        console.log(isNaN(b));  //true
        console.log(isNaN(c));  //  Number(c)----数值型的字符串，123  false
        console.log(isNaN(d));  //   false
        console.log(isNaN(e));  //   false
        console.log(isNaN(f));  //   false
        console.log(isNaN(g));  //   false
        console.log(isNaN(h));  //   true
     </script>
运算中加号比较特殊，遇到字符串会进行拼接

如果是其他的运算，可能会先用Number()进行转换，转换之后在进行运算，得不到正确结果的话就是NaN
    <script>
        var a = 10
        var b = true
        var c = ''
        var d = '123'
        var e = 'hellow123'

        console.log(a+b);
        console.log(a-b);
        console.log(a-c);
        console.log(d-a);
        console.log(e-a);
    </script>
变量.toFixed(2) 保留两位小数

运算符

1、概念：

什么是运算符：

a = 10 + 20 =和+就是运算符，10和20就是运算数

什么是表达式：

运算数和运算符组成的就是表达式

a= 10

a = 10 + 20

a++

2、运算符的分类

算术运算符算术表达式

赋值运算符赋值表达式

比较运算符比较表达式

逻辑运算符逻辑表达式

三目运算符三元表达式

自增运算符

a++: ++在后，先赋值在自加

++a: ++在前，先自加再赋值去运算

<script>
       
        // a = a + 1
       // a++
        // ++a
        // console.log(a);

       // var a = 10
        //var b = 20
       // console.log(b + a++);    // a++  10   a--11
       //console.log(b + ++a);      //++a  12   a---12

       var a = 10
       var c = a++ + ++a + a++    //34 
       //  a++   10   a--11
       //  ++a    12   a-12
        //  a++    12   a-13  
        var d = a++ + ++a + c++
       console.log(d,c,a);  // 62  35  15

       //  a++  13    ++a   15    a-15
       //c++     34   c-35
       //d = 13+15+34  
       
    </script>

3、算术运算符

+ 加

- 减

* 乘

/ 除

% 取余（求模）

++ 自增

-- 自减

<script>
        var a = 10
        var b = 2
        console.log(a+b);  //12
        console.log(a-b);  //8
        console.log(a*b);  //20
        console.log(a/b);  //5
        console.log(a%b);  //0
        var c = 21
        console.log(c%2); //1

        // 运算中会进行隐式转换
        var d = '11'
        console.log(c-d);  //10
    </script>

赋值运算符：

= : 将右边的值赋值给左边

+= : 每次加一个数后在赋值

-= : 减一个数之后在赋值

*= : 乘一个数之后在赋值

/= ：除

%= ：取余

<script>
         var a
         a = 10    //赋值，将10赋值给a
         var b = 1
         b += 2  // b = b+2
         console.log(b);
         a-=5
         console.log(a);
         var c = 20
         //c*=2
         //console.log(c);
         //c/=2
        // console.log(c);
        c%=2
        console.log(c);
     </script>

比较运算符：

== : 判断左右两边是否相等（会进行隐式转化） ---值相等

=== ：断左右两边是否全等（不会进行隐式转化） ---值和数据类型都相等

!= ：不相等

!== : 不全等

> : 大于

< ：小于

>= ：大于等于

<= ：小于等于

注意：

字符串比较的时候比较的是ASCII码,从左到右一位一位进行比较 0--48 A--65 a--97

逻辑运算符

&& : 两个条件都为真的时候结果才是真

|| : 两个条件只要有其中一个是真的，那么最终结果就是真的

! : 取反

短路运算：

（1）&&短路

true && true 先看第一个条件，如果是真，会执行第二个条件，并将第二个条件的结果返回

false && true 先看第一个条件，如果是假，不会执行第二个条件，并将第一个条件的结果返回

（2）||短路

true || true true 先看第一个条件，如果是真，将第一个条件的结果返回

false && true 先看第一个条件，如果是假，会执行第二个条件，并将第二个条件的结果返回
<script>
        var a = 15
        // console.log(5<a<15);
        console.log(a>5 && a<15);  // false
        console.log(a>5 || a<15);  // true

        var b = ''
        console.log(!b == false);

        var c = 1
        var d = 1
        
        // var e = --c && ++d
        // console.log(e);

        // var f = ++c && d++
        // console.log(f,d);

       

        var e = --c || ++d
        console.log(e);

        //var f = ++c || d++
        //console.log(f,d,c);
    </script>

获取元素

1、获取元素

（1）通过id获取元素

var 变量名 = document.getElementById('id名')

（2）通过标签名来获取元素(拿到的是一个元素集合，通过下标得到具体的某个元素)

var 变量名 = document.getElementsByTagName('标签名');

var 变量名 = 父元素.getElementsByTagName('标签名');

（3）通过类名获取元素

var 变量名 = document.getElementsByClassName('类名')

var 变量名 = 父元素.getElementsByClassName('类名')
<script>
        var inp1 = document.getElementById('input1');
        var inp = document.getElementsByTagName('input');
        console.log(inp1);
        console.log(inp[0]);
        console.log(inp[1]);
        console.log(inp[2]);
        console.log(inp[3]);

        // var div = document.getElementsByTagName('div')[0];
        var div = document.getElementsByTagName('div');
        console.log(div);  //6个div

        // div[0].onclick = function() {

        //     console.log('我被点击了');
        // }

        // 我只想拿到wrap下面的4个div
        var wrap = document.getElementById('wrap');
        var oDiv = wrap.getElementsByTagName('div');
        console.log(oDiv);
        oDiv[1].onclick = function() {
            alert('我被点击了')
        }

        // 通过类名获取
        var p1 = document.getElementsByClassName('p1')
        console.log(p1);

        var  box = document.getElementsByClassName('box')[0];
        var p = box.getElementsByClassName('p1')[0]
        console.log(p);
    </script>

操作元素的内容

操作元素的内容：

1、操作表单元素的内容

2、操作闭合标签的内容

获取：

var 变量 = 元素.innerHTML 识别标签

var 变量 = 元素.innerText 只拿文字内容

设置：(会覆盖原来的内容)

元素.innerHTML = 值

元素.innerText = 值
<script>
        var box = document.getElementsByClassName('box')[0];
        var btn = document.getElementsByTagName('button');

        // 给获取的按钮添加点击事件
        btn[0].onclick = function() {
            //3、获取box的元素内容
            var text1 = box.innerHTML
            var text2 = box.innerText
            console.log(text1);
            console.log(text2);
        }

        //
        btn[1].onclick = function() {
            // box.innerHTML = '<h3>等会吃啥？</h3>'
            box.innerText = '<h3>等会吃啥？</h3>'
        }
    </script>