函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

1.JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

2.调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：

function myFunction(var1,var2)
{
代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

<p>请点击其中的一个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
    alert("Welcome " + name + ", the " + job);
}
</script>

3.带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction()
{
    var x=5;
    return x;
}

上面的函数会返回值 5。
注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。
函数调用将被返回值取代：

var myVar=myFunction();

myVar 变量的值是 5，也就是函数 “myFunction()” 所返回的值。
即使不把它保存为变量，您也可以使用返回值：

document.getElementById("demo").innerHTML=myFunction();

“demo” 元素的 innerHTML 将成为 5，也就是函数 “myFunction()” 所返回的值。
可以使返回值基于传递到函数中的参数：
计算两个数字的乘积，并返回结果：

function myFunction(a,b){    return a*b;} 
document.getElementById("demo").innerHTML=myFunction(4,3);

“demo” 元素的 innerHTML 将是：12
在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：

function myFunction(a,b){
  if (a>b){
    return;
  }
  x=a+b
}

如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

4.自调用函数

函数表达式可以 “自调用”。
自调用表达式会自动调用。
如果表达式后面紧跟 () ，则会自动调用。
不能自调用声明的函数。
通过添加括号，来说明它是一个函数表达式：

        function show(){
            setTimeout(function(){
                console.log(1)
                show();
            },1000)
        }
        show()

5.函数参数

函数参数只在函数内起作用，是局部变量。

6.arguments 对象

JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。
通过这种方式你可以很方便的找到最大的一个参数的值：

x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

7.使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数。
这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象：

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

8.作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

9.重载

重载:就是根据参数的不同,动态决定调用哪个方法
js中没有重载的概念,因为重复声明,下面的会覆盖上面的声明

        function go(a){
            console.log(a);
        }
        function go(a,b){
            console.log(a+b);
        }
        go(10);
        go(10,20)

9-1 使用arguments模拟重载:

        function go(){
            if(arguments.length ==1){
                console.log(arguments[0])
            }else if(arguments.length == 2){
                console.log(arguments[0]+arguments[1])
            }
        }
        go(1)
        go(10,20)

10.解构

    1.左边读取的字段,右手边必须有<br />        2.读取的是右边的一个层级

        var obj = {
            name: "lisi", age: 18, skill: "vue", 
            s: {
                sex: "male"
            }
        };
        // var name = obj.name;
        // var age = obj.age;
        // var skill = obj.skill;
        var { name,s} = obj;
        console.log(name)
        console.log(s.sex)

11. 箭头函数

var go =()=>{
    console.log("hello world")
}

11-1 带参数的箭头函数

var test = (x)=>{
    console.log(x);
}

11-2 箭头函数的简写

var show = ()=>console.log("hello world");

11-3 带参数的简写

Tips:只有一个参数,可以省略小括号,只有一段表达式,可以省略大括号

var main = x=>console.log(x);

12.回调函数

就是将函数作为参数,传递给另一个函数
场景:一般在异步调用中使用
作用:
1.将函数内部的值返回到外部
2.取代了return语句

        var show= function(res){
            console.log(res);
        }
        function go(callback){
            var a = 10;
            callback(a);
        }
        go(show);

示例

点击隐藏切换事件

<style>
        .parent{
            width:200px;
            height: 200px;
            border:1px solid #333;
            position: relative;
        }
        .parent>div{
            width:100%;
            height: 100%;
            position: absolute;
        }
        .html{
            background-color: red;
            z-index: 100;
        }
        .css{
            background-color: yellow;
        }
        .current{
            color:orange;
        }
        li{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul>
        <li class="current">html</li>
        <li>css</li>
    </ul>
    <div class="parent">
        <div class="html">
            html
        </div>
        <div class="css">
            css
        </div>
    </div>
    <script>
        var lis = document.getElementsByTagName("li");
                          //querySelectorAll()返回文档中匹配指定 CSS 选择器的所有元素
        var divs = document.querySelectorAll(".parent div");
        for(let i=0;i<lis.length;i++){
            lis[i].index = i;
            lis[i].onclick  =  function(){
                /* 1.遍历让所有的li移除class="current" */
                for(let i=0;i<lis.length;i++){
                    lis[i].classList.remove("current");
                }
                /* 2.让当前元素添加class="current" */
                this.classList.add("current")
                console.log(this.index)
                /* 3.让所有的div隐藏 */
                for(let i=0;i<divs.length;i++){
                    divs[i].style.display = "none"
                }
                /* 4.让对应的下标的div去显示 */
                divs[this.index].style.display = "block";
            }
        }
    </script>