• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Javascript学习笔记

互联网 diligentman 2小时前 1次浏览

Javascript学习笔记

  • 一、函数
  • 二、函数使用
    • 1、声明函数
    • 2、调用函数
  • 三、函数的封装
  • 四、使用例子
    • 1、函数可以重复相同的代码
    • 2、利用函数的参数实现重复不同的代码
    • 3、函数形参实参个数匹配
    • 4、小结
  • 五、函数与return
  • 六、小练习
  • 七、arguments的使用
  • 八、函数的案例

一、函数

    <script>
        //1.求1~100的累加和
        var sum = 0;
        for (var i = 0; i <= 100; i++) {
            sum += i;
        }
        console.log(sum);
        //2.求10~50的累加和
        var sum = 0;
        for (var i = 10; i <= 50; i++) {
            sum += i;
        }
        console.log(sum);
        //3.函数就是封装了一段可以背重复执行调用的代码块 目的:让大量代码重复使用
        function getSum(num1, num2) {
            var sum = 0;
            for (var i = num1; i <= num2; i++) {
                sum += i;
            }
            console.log(sum);
        }
        getSum(1, 100);
        getSum(10, 50);
    </script>

二、函数使用

1、声明函数

2、调用函数

    <script>
        //函数使用分为两步: 声明函数 和 调用函数
        //1.声明函数
        // function 函数名() {
        //     //函数体
        // }
        function sayHi() {
            console.log('hi~~');
        }
        //(1) function声明函数的关键字 全部小写
        //(2) 函数是做某件事情,函数名一般是动词 sayHi
        //(3) 函数不调用自己不执行
        //2.调用函数
        //函数名();
        sayHi();
        //调用函数的时候不要忘记加小括号;
    </script>

三、函数的封装

●函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
●封装类似于将电脑配件组装到机箱中(类似快递打包)


四、使用例子

    <script>
        //利用函数计算1-100之间的累加和
        //1.声明函数
        function getSum() {
            var sum = 0;
            for (var i = 0; i <= 100; i++) {
                sum += i;
            }
            console.log(sum);
        }
        //2.调用函数
        getSum();
        getSum();
                //1.利用函数求任意两个数的和
        function getSum(num1, num2) {
            console.log(num1 + num2);
        }
        getSum(1, 3);
        getSum(3, 8);
        //2.利用函数求任意两个数之间的和
        function getSums(start, end) {
            var sum = 0;
            for (var i = start; i <= end; i++) {
                sum += i;
            }
            console.log(sum);
        }
        getSums(1, 100);
        getSums(1, 10);
        //3.注意点
        //(1)多个参数之间用逗号隔开
        //(2)形参可以看做是不用声明的变量
    </script>

1、函数可以重复相同的代码

    <script>
        //1.函数可以重复相同的代码
        function cook() {
            console.log('酸辣土豆丝');
        }
        cook();
        cook();
    </script>

2、利用函数的参数实现重复不同的代码

    <script>
        //2.利用函数的参数实现函数重复不同的代码
        // function 函数名(形参1,形参2...) { //在声明函数中的小括号里面是形参 (形式上的参数)

        // }

        //函数名(实参1,实参2...); //在函数调用的小括号里面是实参(实际的参数)
        //3.形参和实参的执行过程
        function cook(aru) { //形参是接受实参的 aru='酸辣土豆丝' 形参类似于一个变量  
            console.log(aru);
        }
        cook('酸辣土豆丝'); //传递给aru
        cook('大肘子');
       //函数的参数可以有,也可以没有个数限制
    </script>

3、函数形参实参个数匹配

    <script>
        //函数形参实参个数匹配
        function getSum(num1, num2) {
            console.log(num1 + num2);
        }
        //1.如果实参的个数和形参的个数一致 则正常输出结果
        getSum(1, 2);
        //2.如果实参的个数多余形参的个数 会取到形参的个数
        getSum(1, 2, 3);
        //3.如果实参的个数小于形参的个数 多于的形参定义为undefined 最终结果就是NaN
        //形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值 结果就是undefined
        getSum(1); //NaN
        //尽量让实参的个数和形参相匹配
    </script>

4、小结

● 函数可以带参数也可以不带参数
● 声明函数的时候,函数名括号里面的是形参,形参的默认值为undefined
● 调用函数的时候,函数名括号里面的是实参
● 多个参数中间用逗号分隔
● 形参的个数可以和实参个数不匹配,结果不可估计,尽量要匹配


五、函数与return

    <script>
        //1.函数是做某件事或者实现某种功能
        function cook(aru) {
            console.log(aru);
        }
        cook('大肘子');
        //2.函数的返回值格式
        // function 函数名() {
        //     return 需要返回的结果;
        // }
        //函数名();
        //(1)函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名() 通过return实现
        //(2)只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果
    </script>

    <script>
        function getResult() {
            return 666;
        }
        getResult(); //getResult() = 666
        console.log(getResult());
        // 求任意两个数的和
        function getSum(num1, num2) {
            return num1 + num2;
        }
        console.log(getSum(1, 2));
                //利用函数 求两个数的最大值
        function getMax(num1, num2) {
            // if (num1 > num2) {
            //     return num1;
            // } else {
            //     return num2;
            // }
            return num1 > num2 ? num1 : num2;
        }
        console.log(getMax(1, 3));
        console.log(getMax(11, 3));
    </script>
    <script>
        //利用函数 求  数组[5,2,99,101,67,77] 中的最大数值
        function getArrMax(arr) { //arr接收一个数组
            var max = arr[0];
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] > max) {
                    max = arr[i];
                }
            }
            return max;
        }
        //getArrMax([5,2,99,101,67,77]); //实参是一个数组送过去
        //实际开发中,经常用一个变量来接受函数的返回结果,使用更简单
        var re = getArrMax([5, 2, 99, 101, 67, 77]);
        console.log(re);
    </script>

    <script>
        //函数返回值注意事项
        //1.return 终止函数
        function getSum(num1, num2) {
            return num1 + num2; //return后面的代码不会被执行
            alert('我是不会被执行的哦!');
        }
        console.log(getSum(1, 2));
        //2.return只能返回一个值
        function fn(num1, num2) {
            return num1, num2; //返回的结果是最后一个值
        }
        console.log(fn(1, 2));
        //3.求任意两个数的加减乘除结果
        function getResult(num1, num2) {
            return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
        }
        var re = getResult(1, 2); //返回的是一个数组
        console.log(re);
    </script>

    <script>
        //函数如果有return 则返回的是return后面的值,如果函数没有return 则返回undefined
        function fun1() {
            return 666;
        }
        console.log(fun1()); //返回666
        function fun2() {

        }
        console.log(fun2()); //函数返回的结果是undefined
    </script>

六、小练习

Javascript学习笔记


    <script>
        var num1 = prompt("请输入第一个数字:");
        var symbol = prompt("请输入加减乘除任意一个运算符号:");
        var num2 = prompt("请输入第二个数字:");

        function get(num1, symbol, num2) {
            switch (symbol) {
                case "-":
                    return num1 - num2;
                    break;
                case "+":
                    return parseFloat(num1) + parseFloat(num2);
                    break;
                case "/":
                    return num1 / num2;
                    break;
                case "*":
                    return num1 * num2;
                    break;
            };
        };
        var re = get(num1, symbol, num2);
        alert("您的结果是:" + re);
    </script>
    <script>
        var num1 = parseFloat(prompt("请输入第一个数字:"));
        var num2 = parseFloat(prompt("请输入第二个数字:"));

        function getMax(num1, num2) {
            return num1 > num2 ? num1 : num2;
        }
        re = getMax(num1, num2)
        alert('最大值为:' + re);
    </script>
    <script>
    	//法一
        var num1 = parseInt(prompt('输入第一个数字')); //parseInt()强制转换字符串类型
        var num2 = parseInt(prompt('输入第二个数字'));
        var num3 = parseInt(prompt('输入第三个数字'));
        var max = 0;
        var str = [num1, num2, num3];

        function getmax(num1, num2, num3) {
            for (var i = 0; i < str.length; i++) {
                if (max < str[i]) {
                    max = str[i];
                }
            }
            return (max);
        }
        var re = getmax(num1, num2, num3);
        alert('最大值为:'+ re);
    </script>
	//法二:
	    <script>
        var num1 = parseInt(prompt('输入第一个数字')); //parseInt()强制转换字符串类型
        var num2 = parseInt(prompt('输入第二个数字'));
        var num3 = parseInt(prompt('输入第三个数字'));
        var str = [num1, num2, num3];
        var max = str[0];

        function getmax(num1, num2, num3) {
            for (var i = 1; i < str.length; i++) {
                if (max > str[i]) {
                    max = str[0];
                } else if (max < str[i]) {
                    if (str[i] > str[i + 1]) {
                        max = str[i];
                    } else {
                        max = str[i + 1];
                    }
                }
            }
            return (max);
        }
        var str2 = getmax(num1, num2, num3);
        alert('最大值为:' + str2);
    </script>

    <script>
        //质数:只能被1和其本身整除的数,从2开始
        //方法:用这个数字和其前面的所有数整除一次(不包括1和其本身)
        var num = prompt("请输入你想要的判断的数字:");
        console.log(num);

        function isPrimeNumber(num) {
            for (var i = 2; i < num; i++) {
                if (num % i == 0) {
                    return false;
                }
            }
            return true;
        }
        alert(isPrimeNumber(num) ? "该数为质数" : "该数非质数");
    </script>

七、arguments的使用

当我们不确定有多少个参数传递的时候,可以用arguments来获取。arguments是当前函数的一个内置对象。所有函数都内置了一个arguments对象,存储了传递的所有实参。

   <script>
        //arguments的使用 只有函数才有arguments对象 而且是每个函数都内置好了这个arguments
        function fn() {
            // console.log(arguments); //里面存储了所有传递过来的实参 arguments = [1,2,3]
            // console.log(arguments.length);
            // console.log(arguments[2]);
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        fn(1, 2, 3);
        fn(1, 2, 3, 4, 5);
        //伪数组 并不是真正意义上的数组
        //1.具有数组的length属性
        //2.按照索引的方式进行存储的
        //3.它没有真正数组的一些方法 pop() push()等等
    </script>

八、函数的案例

    <script>
        //利用函数求任意个数的最大值
        function getMax() { //arguments = [1,2,3]
            var max = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                if (arguments[i] > max) {
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log(getMax(1, 2, 3));
        console.log(getMax(1, 2, 3, 4, 5));
        console.log(getMax(11, 2, 34, 444, 5, 100));
    </script>
    <script>
        //利用函数翻转任意数组 reverse 翻转
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr1 = reverse([1, 3, 4, 6, 9]);
        console.log(arr1);
        var arr2 = reverse(['red', 'pink', 'blue']);
        console.log(arr2);
    </script>
    <script>
        //利用函数冒泡排序 sort排序
        function sort(arr) {
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = 0; j < arr.length - i - 1; j++) {
                    if (arr[j] > arr[j + 1]) {
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        var arr1 = sort([1, 4, 2, 9]);
        console.log(arr1);
        var arr2 = sort([11, 7, 22, 999]);
        console.log(arr2);
    </script>
    <script>
        // 利用函数判断闰年
        function isRunYear(year) {
            //如果是闰年返回true 否则返回false
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }
        console.log(isRunYear(2000));
        console.log(isRunYear(1999));
    </script>

●函数可以调用另外一个函数

    <script>
        // 函数是可以相互调用的
        function fn1() {
            console.log(11);
            fn2(); //在fn1函数里面调用了fn2函数
        }
        fn1();

        function fn2() {
            console.log(22);
        }
    </script>
    <script>
        function fn1() {
            console.log(111);
            fn2();
            console.log('fn1');
        }

        function fn2() {
            console.log(222);
            console.log('fn2');
        }
        fn1();
    </script>
    <script>
        //用户输入年份,输出当前年份2月份的天数
        function backDay() {
            var year = prompt('请您输入年份:');
            if (isRunYear(year)) { //调用函数需要加小括号
                alert('当前年份是闰年2月份有29天')
            } else {
                alert('当前年份是平年2月份有28天')
            }
        }
        backDay();


        //判断是否为如年的函数
        function isRunYear(year) {
            //如果是闰年我们返回true 否则返回false
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }
    </script>
    <script>
        //函数的2种声明方式
        //1.利用函数关键字自定义函数(命名函数)
        function fn() {

        }
        fn();
        //2.函数表达式(匿名函数)
        //var 变量名 = function() {};
        var fun = function(aru) {
            console.log('我是函数表达式');
            console.log(aru);
        };
        fun('阿远');
        //(1)fun 是变量名 不是函数名
        //(2)函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值 而函数表达式里面存的是函数
        //(3) 函数表达式也可以进行传递参数
    </script>


程序员灯塔
转载请注明原文链接:Javascript学习笔记
喜欢 (0)