JavaScript（三）：函数，作用域

一、函数

1、概念及使用

函数就是封装了一段可被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用。

注意：（1）function是声明函数的关键字，必须小写；

（2）由干函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如getSum。

函数的使用：分为两步

（1）声明 

	function sayHi() {
            console.log('Hi~');
        }

（2）调用

	sayHi();

 函数的另一种声明方式：

2、参数

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

（1）形参和实参 

 在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

例如：求1-100的和案例

 //声明函数
        function getSum(start, end) {
            var sum = 0;
            for (var i = num1; i <= num2; i++) {
                sum += i;
            }
            console.log(sum);
        }
        // 调用函数
        getSum(1, 100);

 实参和形参个数匹配的问题：

在JavaScript中，如果不传值，形参默认的值是undefined。 

（2）返回值 

 函数的返回值格式：

注意：

 代码验证：

        function getResult() {
            return 666;
        }
        getResult();//没有结果
        console.log(getResult());//666

案例1：利用函数求任意两个数的最大值：

 //利用函数求任意两个数的最大值
        function getMax(num1, num2) {
            if (num1 > num2) {
                return num1;
            }
            else {
                return num2;
            }
        }
        console.log(getMax(234, 45));

更为简洁更厉害的写法：

//利用函数求任意两个数的最大值:三元运算符写法
        function getMax(num1, num2) {
            return num1 > num2 ? num1 : num2;
        }
        console.log(getMax(234, 45));

案例2：利用函数寻找数组中的最大值

        // 利用函数求数组中最大值。
        function getMax(arr) {
            var max = arr[0];
            for(var i = 0;i < arr.length;i++) {
                if(arr[i] > arr[0]){
                    max = arr[i];
                }   
            }
            return max;
        }
       var re = getMax([1,3,5,6]);//在实际开发中，会经常用一个变量来接受 函数的返回结果
       console.log(re);

 返回值return的几个注意点：

1.return可以终止函数，return之后的代码不再执行
2.return只能返回一个值，如果return返回了多个值，默认返回最后一个

3.如果要返回多个值，使用数组即可。

	function fn(num1, num2) {
            return num1, num2;
        }
        console.log(fn(1, 2));  //结果为2，默认返回最后一个数字

 返回两个数的加减乘除：

//如果必须返回多个，使用数组即可
        //比如返回两个数的加减乘除
        function getArr(num1, num2) {
            return [num1 + num2, num1 - num2, num1 * num2, num1 / num2]
        }
        console.log(getArr(2, 4));

4，如果没有返回值，调用函数返回undefined

 5.break,continue,return区别

 3、作业案例

（1）写一个函数，用户输入任意两个数字的任意算术运算（简单的计算器小功能），并能弹出运算后的结果。

        // 计算器功能
        function caculate(){
            var num1 = parseFloat(prompt('请输入第一个数字：'));
            var num2 = parseFloat(prompt('请输入第二个数字：'));
            return [num1+num2,num1-num2,num1*num2,num1/num2];//输出多个可以用数组表示
        }
        var re = caculate();
        alert(re);

（2）写一个函数，用户输入任意两个数字的最大值，并能出弹运算后的结果。

        function Compare() {
                var num1 = parseFloat(prompt('请输入第一个数字：'));
                var num2 = parseFloat(prompt('请输入第二个数字：'));
                // if (num1 > num2) {
                //     return num1;
                // } else {
                //     return num2;
                // }
                return num1 > num2 ? num1 : num2;
            }
            var result = Compare();
            alert('最大数字是'+result);

（3）写一个函数，用户输入任意三个不同数字的最大值，并能弹出运算后的结果。

利用数组： 

        function Compare() {
                var num1 = parseFloat(prompt('请输入第一个数字：'));
                var num2 = parseFloat(prompt('请输入第二个数字：'));
                var num3 = parseFloat(prompt('请输入第三个数字：'));
                var arr = [num1,num2,num3];
                var max = arr[0];
                for( var i = 0 ; i < arr.length ; i++ ){
                    if(arr[i]>arr[0]){
                        var max = arr[i];
                    }
                }
                return max;
            }
            var result = Compare();
            alert('最大数字是'+result);

利用if else

        function Max() {
                var num1 = parseFloat(prompt('请输入第一个数字：'));
                var num2 = parseFloat(prompt('请输入第二个数字：'));
                var num3 = parseFloat(prompt('请输入第三个数字：'));
                if(num1>num2){
                    if(num1>num3){
                        return num1;
                    }
                }else {
                    if(num2>num3){
                        return num2;
                    }else {
                        return num3;
                    }
                }
            }
            var result = Max();
            alert('最大数字是'+result);

4.arguments内置对象的使用

arguments是函数的内置对象，用于接收所有传过来的实参，主要用于没有形参时，用户却传入实参的情况
arguments实际上是一个伪数组，具有length属性，按照索引方式存储，可以按照数组的方式遍历，但是它没有真正数组的一些方法如pop()，push()等，所以是伪数组 

 代码实现

function arg() {
            // console.log(arguments);  //里面存储了所有传过来的实参  arguments = [1,2,3,4]
            // console.log(arguments.length); //4
            // console.log(arguments[0]); //1
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        arg(1, 2, 3, 4);

利用函数求任意个数的最大值（借助arguments）

       //利用arguments求任意个数的最大值
        function getMax() {
            var max = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                if (arguments[i] > max) {
                    var max = arguments[i];
                }
            }
            return max;  //这个return要写在循环外面，要不然就直接跳出循环了
        }
        var result = getMax(23, 43, 5, 3, 53, 6);
        console.log(result);

 5、函数案例练习

（1） 函数封装：翻转数组 

        function reverse(arr) {
            var newArr = [];
            for( var i=arr.length-1;i>=0;i--){//遍历旧的数组
                newArr[newArr.length]=arr[i];//把旧的数组的最后一个给新数组的第一个
            }
            return newArr;
        }
        var arr1 = reverse([8,3,5,6,8,1]);//调用函数
        alert(arr1);

（2）函数封装：冒泡排序

       //函数封装冒泡排序
        function sort(arr) {
            for (var i = 1; i < arr.length; i++) {   //这里其实从1开始比较好，后面那些就不用-1了
                for (var j = 0; j < arr.length - i; j++) {
                    if (arr[j] > arr[j + 1]) {
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        var result = sort([5, 6, 4, 3, 1, 2]);
        console.log(result);

（3） 函数封装：闰年判断

 true和false

//函数封装闰年判断:老师的写法
        function isLeapYear(year) {
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }
        var result = isLeapYear(2000);
        console.log(result);

6、函数可以调用另一个函数：用户输入年份，输出二月份的天数

    //用户输入年份，输出二月份的天数，调用上面判断闰年的函数
    function backDay() {
        var year = prompt('请输入年份：');
        if (isLeapYear(year)) {
            alert('二月有29天');
        } else {
            alert('二月有28天');
        }
    }
   backDay();

 另一种函数表达式：

二、 作用域

（1）作用域 

全局作用域：在整个script标签下或者在一个单独的js文件中
局部作用域：在函数内部就是局部作用域，这个代码的名字只在函数内部起作用

        //1.JavaScript作用域：就是代码名字（变量）在某个范围内起作用和效果目的是为了提高程序的可靠重要的是减少命名冲突
        //2.js的作用域（es6）之前：全局作用域局部作用域
        //3.全局作用域：整个script标签或者是一个单独的js文件
        var num = 10;
        var num = 30;
        console.log(num);
        //4.局部作用域(函数作用域）在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作
        function fn(){
            //局部作用域
            var num = 20;
            console.log(num);
            fn();
        }
 

 （2）变量的作用域

 全局变量：

局部变量：

全局变量和局部变量的区别：

（3） 作用域链

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值。总结来说就是：从目标开始看，一层一层往外找，采用就近原则。

例如： 

var num = 10;
        function fu() {
            var num = 20;
            function fun() {
                console.log(num);
            }
            fun();
        }
        fu();  //20

案例：结果a=4,b='22'.