Javascript基础（三）之运算符、函数

浅浅的花香味﹌ 2022-07-11 09:27 192阅读 0赞

1、运算符  
1、位运算符  
作用：  
针对数字操作  
将数字先转换为二进制再进行运算操作  
二进制：  
由0,1组成,逢二进一  
十进制 二进制  
0 0  
1 1  
2 10  
3 11  
4 100  
5 101  
6 110  
… …

运算符：
            1、&(按位与)
                语法：num1 & num2
                作用：将两边的操作数转换为二进制，每位数字进行按位比较,对应位置的数字都为1的时候，该位结果才为1，否则为0
                ex:
                    3 & 5 : 1
    
                    3:011
                    5:101
                    =========
                      001
    
                    12 & 7 : 4
                    12:1100
                     7:0111
                     ==========
                       0100
                    1、15 & 1 : 1
                        15:1111
                         1:0001
                         ======
                           0001
                    2、18 & 1 : 0
                    3、37 & 1 : 1
                    4、26 & 1 : 0
                    5、12345 & 1 : 1
                    6、78966 & 1 : 0
    
                场合：判断一个数字的奇偶性，num & 1,如果结果为1，num则为奇数，否则为 偶数
            2、|(按位或)
                语法：num1 | num2
                作用：将两边的操作数转换为二进制，每位数字进行按位比较,对应位置的数字只要有一个为1的时候，该位的结果就是1
                    ex:
                        1 | 3
                        1:01
                        3:11
                        =====
                          11  = 3
    
                        5 | 7
                        5:101
                        7:111
                        =====
                          111 = 7
    
                        5:101
                        3:011
                        =====
                          111 = 7
                场合：将小数做向下取整操作
            3、^(按位异或)
                语法：num1 ^ num2
                作用：将两边的操作数转换为二进制，按位比较，对应位置只有一个1的时候才返回1，否则返回0
                ex :
                    5 ^ 3 = 6
                    5 : 101
                    3 : 011
                    =============
                          110
                场合：在不借助第三方变量时交换两个数字的位置
                    ex:
                        var num1 = 5;
                        var num2 = 3;
    
                        num1 = num1 ^ num2; //num1 = 6
                            5 : 101
                            3 : 011
                            =======
                                110  = 6
                        num2 = num2 ^ num1;//num2 = 5
                            3 : 011
                            6 : 110
                            ========
                                101 = 5
                        num1 = num1 ^ num2;//num1 = 3
                            6 : 110
                            5 : 101
                            =======
                                  011 = 3
            4、<<(按位左移)
                语法：num<<n
                作用：将num转换成二进制，并且向左移动n位，右侧以0补齐
                ex: 2<<1 = 4
                    2
                    0000 0000 0000 0000 0000 0000 0000 0010
                    2<<1 = 4
                    0000 0000 0000 0000 0000 0000 0000 0100
                    2<<2 = 8
                    0000 0000 0000 0000 0000 0000 0000 1000
            5、>>(按位右移)
                语法：num>>n
                作用：将num转换成二进制，并且向右移动n位，左侧以0补齐
                ex:8>>2
                8
                0000 0000 0000 0000 0000 0000 0000 1000
                8>>2 = 2
                000000 0000 0000 0000 0000 0000 0000 10
    
                7>>1
                7
                0000 0000 0000 0000 0000 0000 0000 0111
                7>>1 = 3
                00000 0000 0000 0000 0000 0000 0000 011
    2、赋值运算
        赋值运算符：=
            变量 = 值;
            注意：=的左侧必须是变量
        扩展的赋值表达式：
        +=,-=,*=,%=,/=,^=,... ...
        a+=b; 等价于 a=a+b;
        ex: 
            var num = 10;
            num += 5;//num=num+5;
            console.log(num);
    
            num = 10;
            num *= 3;//num = num * 3
            console.log(num); // 30
    
            var a = 5;
            var b = 3;
    
            a = a ^ b; // a^=b;
            b = b ^ a; // b^=a;
            a = a ^ b; // a^=b;
    3、条件运算符(三目运算符)
        目：操作数
            单目运算符：只有一个操作数，++,--,!
            双目运算符：有两个操作数,+,-,*,...
            三目运算符：要求有三个操作数
    
        条件运算符：
            ? :
            表达式1 ? 表达式2 : 表达式3;
            表达式1 ：是一个条件，结果为boolean类型
            如果表达式1的值为true，则执行表达式2
            如果表达式1的值为false，则执行表达式3
    
        输入一个考试成绩，如果成绩大于60分，输出及格，否则输出 不及格
    
        练习：输入一个年龄，如果年龄大于等于 18岁，打印输出 "你已成年"，否则，打印输出，"还未成年"
    
        条件运算符的嵌套：
            表达式2, 表达式3的位置处分别可以再嵌套一个条件表达式
            ex : 根据成绩 输出成绩 等级
                成绩100 输出 A
                90 ~ 100 输出 B
                80 ~ 90 输出 C
                60 ~ 80 输出 D
                60以下 输出 E

2、函数  
1、没有函数的弊端  
1、代码直接写在script中，网页加载时就运行  
2、代码不够通用  
2、什么是函数  
函数(function),也被称为方法(method)或者过程(procedure)  
函数是一段预定义好，并可以被反复执行的代码块  
预定义好：  
事先被定义，但不会马上被执行。可以由任意元素的事件来调用(调用时被执行)  
反复执行：  
同一个函数，可以被多次调用  
提升了代码的可重用性  
代码块：  
允许包含多条可执行的语句

函数的本质也是功能完整的对象
    3、语法
        1、普通函数的 声明 和 调用
            1、声明
                function 函数名(){
                    若干条语句;
                }
            2、调用
                任何 JS 的位置处 ，可以通过
                    函数名();
                进行调用
        2、带参数的函数的声明 和 调用
            parseInt("35.5");
            parseInt(46.8);
            参数：由函数外部传递到函数内部进行辅助操作的数据
            声明语法：
                function 函数名(参数列表){
                    函数体/方法体
                }
            参数列表：
                可以为空，为空的话称之为无参函数
                也可以由一个或多个参数名称组成，多参数的话，中间用 ，隔开
    
                参数名称：与变量名称一致，不需要使用var来声明
    
                定义函数时定义的参数称之为 "形参(形式参数)"
    
    
            调用带参数函数
                任意位置处，通过
                    函数名(参数列表);
                调用函数
                参数列表:要传递的值的列表，多个值之间用,隔开
                调用函数时传递的参数称之为 "实参(实际参数)"
        3、带返回值的函数的声明 和 调用
            返回值：执行完函数最后得到的一个数据
                var r1 = parseInt(35.5);
                var r2 = parseFloat("37.8");
                ... ...
            语法：
                声明：
                function 函数名(参数列表){
                    函数体 ...
                    return 值;
                }
                调用：
                var 变量 = 函数名(参数列表);
    
                注意：
                    1、return 后面只能返回一个值
                    2、return 后面的语句不会被执行
    4、作用域
        1、什么是作用域
            作用域指的是变量或函数的可访问范围
            在JS中，变量和函数的作用域分为：
                1、函数作用域，只能在定义的函数内访问
                2、全局作用域，一经定义，任何位置都能用
        2、函数作用域中的变量
            又称为"局部变量"
            function fun1(){
                var num = 15; // 局部变量,只能在fun1中使用
                console.log(num);
            }
        3、全局作用域中的变量
            又称为"全局变量"，一经声明，JS的任何位置处都能使用。全局变量 会声明在 独立于 任何 function 外围位置处
            <script>
                var num = 15; // 全局变量
                function fun1(){
                    console.log(num); //15
                }
                console.log(num);//15
            </script>
    
            注意：
                声明变量时，不加var关键字也是全局变量
        4、声明提前
            JS在正式运行前，会将var声明的变量以及function声明的函数，预读到所在作用域的顶部。
            但是对变量的赋值仍然保留在原位置处
        5、按值传递
            基本数据类型作为参数时，传参时，实际是将实参的值复制一个副本传递给函数
        6、函数的作用域
            1、全局函数
                在script中定义的函数，相互之间独立，没有所属关系，一经定义，任何位置都能使用
            2、局部函数
                在 function 中声明的，有所属关系，只能在声明的函数内使用
                function fun1(){
                    function son(){
                        console.log("fun1中的函数son");
                    }
                }
            3、ECMAScript 提供的全局函数
                1、parseInt()
                2、parseFloat()
                3、Number()
                4、isNaN()
                5、eval()
                    作用：计算并执行以字符串表示的js代码
                6、encodeURI()
                    URI : Uniform Resource Identifier
                    按照 URI 的规则 解析一个字符串(编码)
                    https://www.baidu.com/s?wd=减肥
                7、decodeURI()
                    对一个URI格式的字符串进行解码，并返回解码后的字符串
                8、encodeURIComponent()
                9、decodeURIComponent()