day06 - JavaScript函数基础知识(2)

最新推荐文章于 2023-03-15 09:18:22 发布

小高今天早睡了吗？

最新推荐文章于 2023-03-15 09:18:22 发布

阅读量498

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/m0_55710075/article/details/121912137

版权

JavaScript 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

知识回顾：

js的作用：1.操作html + css ; 2.动态数据渲染
数据类型：number(数字)、string(字符串)、boolean(布尔值)、null空()、undefined(未定义)
判断数据类型：typeof
数据转换：
1.转字符串：String() +’’
2.转数字 Number() + / - / * / / / % 、 Math.round()、Math.floor() 、Math.ceil()、
parseInt() ：把小数转为整数的时候 == Math.floor() ；还可以取出字符串里面的小数（字符串里面的第一位数字开始，到第一个非数字结束）
parseFloat() 取小数

函数分为系统函数、自定义函数
函数具有封装性、复用性、调用性

// 提取到第一个非数字为止的整数
        var m = parseInt('.24.5px2') ;
        console.log(m) ;   //NaN

        var n = parseInt('0.25px2') ;
        console.log(n) ;   //0

关于函数参数的问题

1.函数在调用的时候，必须按照要求传参
2.当实参和实参不对等的时候，不报错
3.实参多了或者少了，函数不报错
注：函数的说明书包括功能、参数、返回值

        function calc(a,b,c,d){
            switch(a){
                case '+' : return b + a ;
                case '-' : return b - c ;
            }
        }

        //实参和实参不对等时
        var res = calc('-',1,2,3) ;  
        console.log(res) ;  // -1

        var res2 = calc('+' ,1,2,3) ;
        console.log(res2) ;  // 1+

关于return返回值

return：1.给函数一个返回值；2.会提前结束整个函数
注意：return只能返回一个值

判断一个数是不是质数
参数：给我一个数
返回值：我告诉你是不是

        //判断一个数是不是质数
        function isZhi(n){
            for(var i = 2 ; i < n ; i++){
                //假设它不是一个质数所以
                if(n % i === 0){
                    return false ;
                }
            }
            return true ;
        }

        var res = isZhi(17) ;
        console.log(res) ;    //true 说明17是一个质数

训练：判断是否为闰年

    <input type="text" id="inp1">
    <button id="btn1">判断</button>

    <script>
        //判断是否为闰年
        function isRun(y){
            return y % 4 === 0 && y % 100 !== 0 || y % 400 ===0 ? true : false ;
        }

        //获取对象
        var oInp = document.getElementById('inp1') ;
        var oBtn = document.getElementById('btn1') ;

        //绑定点击事件
        oBtn.onclick = function (){
            var y = oInp.value ;
            var res = isRun(y) ;
            if(res){
                alert('是') ;
            }
            else{
                alert('不是') ;
            }
        }

        //随机生成1000 - 10000(取不到10000)之间的年份，判断是否为闰年
        var n = parseInt(Math.random() * (10000 - 1000)) + 1000 ;
        console.log(n);
        var res = isRun(n) ;
        console.log(res);
    </script>

训练：判断年月日
方法一

        function isRun(y) {  
            return y % 4 === 0 && y % 100 !== 0 || y % 400 === 0 ?  true : false ;
        }

        // 判断年月日是否合法
        // 思考：参数，返回值
        function isDate(y , m , d) {  
            // 判断年
            if(y >= 1000 && y <= 2000 && y % 1 === 0) {
                // 月
                if( m >= 1 && m <= 12 && m % 1 === 0) {
                    // 日期

                    var maxDay = 31 ;
                    if(m == 4 || m == 6 || m == 9 || m == 11) {
                        maxDay = 30
                    }
                    else if(m == 2) {
                        if(isRun(y)) {
                            maxDay = 29
                        } else {
                            maxDay = 28
                        }
                    }

                    if(d >= 1 && d <= maxDay && d % 1 === 0) {
                        return true
                    } 
                    return '日期必须在1-' + maxDay + '之间'

                }
                return '月必须在1-12之间'
            }
            return '年必须在1000-2000之间'
        }

        var res = isDate(2012,3,43) ;
        console.log(res) ;

方法二

        function isRun(y) {  
            return y % 4 === 0 && y % 100 !== 0 || y % 400 === 0 ?  true : false ;
        }

        function isDate(y , m , d) {  
            var res = '' ;
            // 判断年
            if(y >= 1000 && y <= 2000 && y % 1 === 0) {
               res += '年正确,'
            }
            else {
                res += '年不正确,'
            }

            // 月
            if( m >= 1 && m <= 12 && m % 1 === 0) {
                   
                res += '月正确,'
            }
            else {
                res += '月不正确,'
            }

            // 日期
            var maxDay = 31 ;
            if(m == 4 || m == 6 || m == 9 || m == 11) {
                maxDay = 30
            }
            else if(m == 2) {
                if(isRun(y)) {
                    maxDay = 29
                } else {
                    maxDay = 28
                }
            }

            if(d >= 1 && d <= maxDay && d % 1 === 0) {
                res += '日期正确'
            } 
            else {
                res += '日期不正确'
            }
            return res 
        }


        // 年对，月不对，日期对  字符串

        var res = isDate(2012,3,43) ;
        console.log(res) ;

方法三：

        function isRun(y) {  
            return y % 4 === 0 && y % 100 !== 0 || y % 400 === 0 ?  true : false ;
        }

        // return 的作用
        // 条件取反

        true / false 
        function isDate(y , m , d) {  
            // 年份不正确，结果就是不对
            if(y < 1000 || y > 2000 || y % 1 !== 0) {
                return false 
            }

            if(m < 1 || m > 12 || m % 1 !== 0) {
                return false 
            }

            // 日期
            var maxDay = 31 ;
            if(m == 4 || m == 6 || m == 9 || m == 11) {
                maxDay = 30
            }
            else if(m == 2) {
                if(isRun(y)) {
                    maxDay = 29
                } else {
                    maxDay = 28
                }
            }
            if(d < 1 || d > maxDay || d % 1 !== 0) {
                return false
            }

            return true
        }

        var res = isDate(2012,3,43) ;
        console.log(res) ;

训练：随机四位数字验证

   <input type="text" id="inp">
    <button id="btn">刷新</button>

    <script>
        //取不到最大值
        function rand(min , max){
            return parseInt(Math.random() * (max - min) + min)
        }

        //获取对象
        function get(id){
            return document.getElementById(id) ;
        }

        //随机四位数字验证码 
        //方法1：生成一个四位数 1000 - 10000  
        var n = rand(1000 , 10000) ;
        console.log(n) ;  // 缺点：第一个数不可能是0 (不影响功能的实现)

        // 方法二：
        // 随机从0-10之间取一个
        var n1 = rand(0,10) ;
        var n2 = rand(0,10) ;
        var n3 = rand(0,10) ;
        var n4 = rand(0,10) ;
        var res = '' + n1 + n2 + n3 + n4 ;
        console.log(res);

        // 方法三
        var res = '';
        for(var i = 0; i < 4 ; i++) {
            var n = rand(0,10) ;
            res += n ;
        }
        console.log(res);

        //参数，返回值。生成多位数字验证码时
        function randCode(x) {  
            x = x || 4 ;
            var res = '';
            for(var i = 0; i < x ; i++) {
                var n = rand(0,10) ;
                res += n ;
            }
            return res ;
        }

        // 页面打开的时候，就要显示验证码
        // var result = randCode(8);
        // get('inp').value = result;
        get('inp').value = randCode(8)

        get('btn').onclick = function () {  
            // var result = randCode(8);
            // get('inp').value = result;

        get('inp').value = randCode()
        }

    </script>

短路赋值

或 || 见真即真
与 && 见假即假

        //短路赋值
        var n = 1 || 2 ;   // n = (1 || 2)   // n = 1

        var n = 0 || 3 ;   // n = (0 || 3)   // n = 3

        var n = 1 && 2 ;   // n = (1 && 2)   // n = 2

        var n = 0 && 3 ;   // n = (0 && 3)   // n = 0

例子：

        function sum(a , b){
            //当a,b没有赋值时，a、b默认为0
            a = a || 0 ;
            b = b || 0 ;
            console.log(a , b) ;
            return a + b ;
        }

        var res = sum(1) ;
        console.log(res) ;  // 1 + 0 = 1

求和赋值

编写一个函数sum(n)
当传入n为偶数时，调用函数求1/2 + 1/4 + … + 1/n
当传入n为奇数时，调用函数求1 + 1/3 + … + 1/n
分析发现：奇数或者偶数的求和就是初始值不一样

        function sum(n){
            //判断n为奇数还是偶数，确定初始值
            var k = 2 ;
            //n为奇数时 初始值为 1
            if(n % 2) k = 1 ;

            var res = 0 ;
            for(var i = k ; i <= n ; i += 2){
                res += 1 / i ;
            }
            return res ;
        }

        var r = sum(4) ;
        console.log(r) ;

求最大公约数

        // 方法一
        function gcd(x , y){
            var min = Math.min(x,y) ;
            for(var i = 1 ; i <= min ; i++){
                if(x % i === 0 && y % i === 0){
                    max = i ;
                }
            }
        }

        //方法二
        function gcd(x , y){
            var max = 0 ;
            for(var i = Math.min(x , y) ; i >= 1 ; i--){
                if(x % i === 0 && y % i === 0){
                    // return i ;
                    max = i ;
                    break ;
                }
            }
            return max ;
        }

        var res = gcd(8 , 12) ;
        document.write(res) ;  //4

作用域

变量有作用域
全局作用域：也叫全局变量，在函数外面声明的变量，没有var的变量
局部作用域：也叫局部变量，在函数内部声明的变量。形参本质上就是一个局部变量

变量可以重复的声明
变量可以不声明，直接赋值
当函数内部的变量名和外部的变量相同时，优先使用自己的 — 同名不同人
变量是在函数内部声明的，只能在函数内部使用

        function fn() {  
            // 变量是在函数内部声明的，只能在函数内部使用
            var c = 9 ;
            console.log(c);
            // 没有var,此变量默认为全局变量
            d = 10 ;
            var b = 20 ;
            console.log(b);  // 20
        }

        fn()

        console.log(c) ;  //报错  c是局部变量

如果变量只是声明了没有定义，输出结果为 undefined

        var a ;
        console.log(a);  
        // undefined  变量已经声明，但是没有赋值

函数嵌套函数

变量的作用域：优先找自己的，自己找不到就找向上一级查找，一直找到script为止，一直找不到就报错。

        var a = 20 ;

        function fn3(){
            console.log(a);
        }

        function fn(){
            // 属于fn的局部变量
            var a = 10 ;

            // fn2也属于fn的一部分 , 找到最近的变量
            function fn2() {  
                var a = 5 ;
                // fn2可以访问到fn的变量
                console.log(a);
            }
            
            fn2()
        }

        fn()

预编译

js代码的执行分两个阶段
1.预编译阶段：首先会找到所有的var声明的变量，找到所有的具名函数
2.代码执行阶段

函数的声明方式：
1.具名函数 ----有名字存在预编译的问题
2.赋值式函数：不存在预编译的问题

变量
数据类型：基本数据类型(5) + 引用数据类型()

fn()

        fn2()  // 报错

        function fn() {  
            console.log(666);
        }

        // 赋值式函数
        var fn2 = function () {  
            console.log(777);
        }
        fn2()
        console.log(typeof fn2);  // function

        var fn2 ;
        function fn() {  
            console.log(666);
        }
        fn()
        fn2()  // 报错了
        fn2 = function () {  
            console.log(777);
        }
        fn2()

匿名函数的自调用--------一次性的函数

~function (n) {  
            console.log(n);
        }(666)

系统函数

1.alert() ：没有返回值
2.有输入框的弹框：
var res = prompt(‘请输入你的名字’)；
3.确定弹窗
var res = confirm(‘确定要删除我吗’) ; //返回布尔值
4.eval()：能计算的时候，就计算，不能计算时，直接报错

function calc(a , b , f) {  
            return eval(a + f + b)
        }

        var res = calc(1,2,'+');
        console.log(res);  //3

递归函数

递归：传递与回归，自己调用自己

function fn() {  
            fn()
        }
        fn()   // 死递归

1+2+3+4+…+100 ;
100 + (前面99个数的和)
99 + (前面98个数的和)
98 +
…

function sum(n) {  
            if(n == 1){
                return 1
            }
            return n + sum(n-1)
        }

训练：斐波拉且数列
斐波拉切数列 1 1 2 3 5 8 13 21 34 …
分析：求第n个数是多少 (n-1) + (n-2)

function fb(n) {  
            if(n == 1 || n == 2) {
                return 1
            }
            return fb(n - 1) + fb(n - 2)
        }

        console.log(fb(6));   //8

递归求和

编写一个函数sum(n)
当传入n为偶数时，调用函数求1/2 + 1/4 + … + 1/n
当传入n为奇数时，调用函数求1 + 1/3 + … + 1/n
分析：不管奇数偶数，计算都是1/n+第n-2个数的和，
1 / n + sum(n - 2)

function sum(n) {  
            if(n == 1) {
                return 1
            }
            if(n == 2) {
                return 1 / 2
            }
            return 1 / n + sum(n - 2)
        }

        console.log(sum(5));