函数

函数

基础概念

背景

对不同的数据进行相同操作时，会导致代码重复、修改繁琐

概念

函数：是指一个容器，该容器能够容下一段代码。我们可以通过函数能够重复的使用该段代码

基本使用

定义函数

function 函数名(){
    包含的一段代码
}

使用(调用)函数

函数名();

函数可以多次调用。每调用一次函数，都会执行一次函数里的代码

函数名规范

小驼峰命名风格：首个单词全小写，后续的每个单词首字母大写
函数名要求
- 只包含字母、数字、_、$
- 有语义化。比如getArraymax、getArrayAvg、getArrayCount

注意

如果只是函数的基本使用，可以解决代码重复的问题，但是函数本身不能对不同的数据进行处理。——参数

参数

概念

参数是指函数对不同数据进行处理的一种机制。分为形式参数以及实际参数，两种参数是协同工作的。
我们可以使用参数将要处理的数据放入到函数体中进行处理。对多个数据的处理只需调用多次函数就可以解决

函数名(数据1);
函数名(数据2);
函数名(数据3);

形式参数

是指写在函数定义时()里的变量，该变量可以在函数体{}里进行使用.形式参数里的数据来自于实际参数。

function 函数名(形式参数){
}

实际参数

是指在函数调用时写在()中的具体数据。在函数调用时，实际参数会把具体数据传递给形式参数。在函数体{}的代码执行的时候，让形式参数有具体数据。

函数名(实际参数);
例子:
函数名(123);
或
var num = 123;
函数名(num);

参数的使用

function demo(num){
    document.write(num+5);
}
demo(5); 会把5传递给形式参数num，那么num变量保存的数据就是5 
输出10

函数中有多个参数的情况

例子：定义一个函数，完成x的y次方
function pow(num1,num2){
    //直接使用形式参数
    return num1 +num2;
}
pow(2,3)://num1 的值为2  num2 的值为3

函数中可以有多个参数，参数之间以逗号分割。多个形式参数的书写顺序必须跟实际参数的书写顺序一致、
参数数量没有限制，实际的参数数量根据题意分析得出

参数之间的关系

形式参数只是事先定义的变量，具体的数据是函数调用时由实际参数提供

返回值

背景

当函数调用执行后，函数里的变量或数据不能直接在函数外使用—返回值

var arr1 = [4, 2, 1, 6, 5];
function getArrayMax(array) {
       var max = array[0];
       for(var i=0;i<array.length;i++){
           if(max <array[i]){
               max = array[i];
           }
       }
       document.write(max+"<br>");
    }
getArrayMax(arr1);
document.write(max);//报错

概念

返回值是函数的一种数据输出机制。我们可以通过返回值实现将函数里的数据传递到函数的外面，即函数调用后我们可以继续使用函数里的数据。

返回值语法

1. 书写return语句，表示函数调用后要返回的数据
function 函数名(){
    return 要返回的数据;
}
2. 在函数调用时，用变量进行接收。 
var 变量名 = 函数名();//变量保存的就是函数体中return 后的数据
例子:
function add(num){
    var sum = num +5;
    //把sum里的数据返回到函数调用的地方
    return sum;
}
var s = add(10);
var s1 = add(20);
var num1 = Number("123");
var num2 = parseInt("123.4");
var num3 = Math.random();
document.write(num1);输出 123
document.write(s);输出 15
document.write(s1);输出 25

一般来说，return语句是写在函数的最后一行。一般会返回函数处理后的数据
当变量接收之后，可以通过变量继续使用函数处理后的数据
当函数执行到return语句时，会终止当前函数的调用，即该次函数调用剩余的代码就不会执行
函数的默认返回值是undefined

return的妙用

例子：定义一个函数，传入一个数字，完成该数字+10 的计算,并返回结果.要求传入的必须是一个数字
function add(num){
    var sum = num +10;
    return sum;
}
var s = add(5);//s的值是15 
var s = add("abc");//s的值是15

对函数传入的数据进行检测，提高函数的健壮性。健壮性越高，说明代码质量越好，即bug少
提前终止函数执行

总结

函数就像一个功能，我们利用参数给函数传入数据(即输入)，经过函数处理，能够通过返回值给我们一个输出，即输入的结果。比如parseInt就是JavaScript内置函数，我们给一个字符串，它可以帮助我们实现字符串转数字及取整功能。Math.random()、prompt()等其它函数也是如此
我们可以通过function来编写自定义函数来处理功能上的需求

var num =parseInt("123.4");
num为 123

练习

1. var arr=["顺丰","韵达","圆通","顺丰","韵达","京东","京东","韵达","顺丰","京东"];利用所学api完成以下练习：
1-1:获取京东快递第一次出现和最后一次出现的下标
1-2:将数组中的 数据进行输出，每个数据之间以-分割
1-3:获取最后四个快递并放入到新数组中
1-4:删除前四个快递并追加1个京东、3个顺丰快递
1-5:将所有快递进行倒序存放
1-6:删除第一个和最后一个数据
1-7:求出快递数量最多的快递公司并输出数量
2. 利用函数知识完成以下题目：
2-1:定义一个函数，传入一个数字，判断该数是否是水仙花数
2-2:定义一个函数，实现随机一个川A非新能源车牌号，并返回该车牌号
2-3:定义一个函数，传入一个数组，判断该数组是否全由数字构成
2-4:定义一个函数，传入一个由数字构成的数组，判断该数组是否是回文数组，比如[1,2,3,2,1]是回文数组，正着读和反着读是一样的。
2-5:定义一个函数，传入一个数据，实现获取该数据在数组中出现的次数并返回

arguments

背景

概念

arguments是JavaScript针对每个函数内部的一个类数组对象。

作用

在函数调用时保存所有的实际参数。

使用

arguments只能是在函数体里使用

function(){
   document.write(arguments);
   document.write(arguments[0]);//第一个实际参数
   for(var i=0;i<arguments.length;i++){
       arguments[i]；第i+1个实际参数
   }
}

特点

所谓类数组指的是可以进行遍历操作，或通过下标来使用arguments里的数据,但是不能进行添加、修改等操作。
实际参数在arguments里的顺序跟在函数调用时的书写顺序一致

应用

自定义函数，如果实际参数数量不固定，那么可以使用arguments及遍历来获取每一个实际参数并进行处理
- 模拟实现push
- 任意数量的字符串拼接

//任意数量的字符串拼接
function addStr(){
            var str = "";
            for(var i=0;i<arguments.length;i++){
                str+=arguments[i];
            }
            return str;
        }
        var s = addStr('hello','woniu','111','222','333','444','55');
document.write(s);//hellowoniu11122233344455
//模拟push函数
var arr =[1,2,3,4];
function push(array){
            //第一个参数必须是数组,如果数组.length==undefined说明没有length，不是数组。
            // 同时字符串本身自带一个length,所以要去掉字符串
            if(array.length ==undefined || typeof array =="string"){
                return;
            }
            //实际参数的第一个指数组，从第二个开始，就是要添加的数据
            for(var i=1;i<arguments.length;i++){
                array[array.length]=arguments[i];
            }
            return array;
}
arr = push(arr,5);
arr = push(arr,6,7,8);
document.write(arr);//[1,2,3,4,5,6,7,8]

箭头函数(ES6)

概念

ES6所提供的新的定义函数的语法。

作用

代码更加简洁

语法

//语法
var 函数名 = (形式参数)=>{
    //函数体
}
//旧的function语法
function 函数名(形式参数){
    //函数体
}

箭头函数的调用跟以前一致，没有区别

特点

箭头函数只能是定义后才能使用,function函数则没有该限制
如果箭头函数里只有一句return代码，那么可以省略return关键字以及{}
如果箭头函数只有一个形式参数，那么包围形式参数的()可以省略不写

fuction add(a){
    return a+5;
}
add(1,2);
//箭头函数优化
var ArrowAdd = a=>a+b;

应用

sort中使用箭头函数

// 升序
var arr =[2,3,1,7,5,4];
arr.sort(function(num1,num2){
    return num1 -num2;
});
//箭头函数优化
arr.sort((num1,num2)=>num1-num2);

JavaScript函数

函数

目录

为什么要用函数

函数的使用

参数

返回值

基础概念

背景

概念

基本使用

定义函数

使用(调用)函数

函数名规范

注意

参数

概念

形式参数

实际参数

参数的使用

函数中有多个参数的情况

参数之间的关系

返回值

背景

概念

返回值语法

return的妙用

总结

练习

arguments

背景

概念

作用

使用

特点

应用

箭头函数(ES6)

概念

作用

语法

特点

应用