初识函数，包括自定义函数，箭头函数，匿名函数

函数初识

1，非常重要，贯穿整个js学习。在某些地方不好理解。

2，什么是函数？

​ 函数就是一个对象。js中万物皆对象

​ 将一系列多个代码打包到一起的一个整体：函数，袋子里面装的是执行的代码，抽象的过程（将一个非常复杂的问题，分解为多个弱一点的问题，直到问题被解决），如：要把大象装冰箱？三部：1.2.3.

3.函数的声明：定义一个函数，=>类比成为申明一个变量

​ 函数名以小驼峰的形式命名。

​ 关键词：function 函数的名字(){ }

​ 给函数添加代码：必须写到大括号中

function dance(){ 
   console.log(666)
    alert(666)
}

4.函数的使用：函数执行

​ 函数的名字（）

如：
   function dance(){ 
     console.log(666)
   }
   dance()

5.任何数据都是某一个数据类型：如果说他不是一个简单的数据类型（number string boolean undefined null）那他就是object。

函数就是一个对象，是一个特殊的对象，他可以执行。在js中优先级最高（在参与处理执行相互作用的时候永远是最优先考虑的）

如：function dance(){ 
     console.log(666)
   }
   typeof dance   //function

6.函数和函数执行要区分开来。

如：dance:是函数

​ dance()：是函数执行

function dance(){ 
     console.log(666)
   }
dance()

7.小案例：有一个div盒子，点击盒子执行dance函数。

div.onclick = dance
不可以写成div.onclick = dance（）  //dance()是函数执行，不是函数

8.函数的一些而外细节

​ (1) 如：7还可以写成如下：

div.onclick = function(){
    console.log(666)
    alert(666)
}
与7这种写法效果一致：
function dance(){ 
     console.log(666)
     alert(666)
   }
div.onclick = dance   

​ (2)遇到的一些函数：

​ 能不能加括号

​ alert()：alert就是一个函数，括号里面写的就是执行的

​ console.log(): log就是一个函数，console是个对象

​ document.querySelector()： document.querySelector就是一个函数

​ 这三个都是内置函数。

（3）函数的输入与输出：

​ 输入：给函数输入（传入）内容，让函数在特定情况下执行

​ 传入参数：传参 //写到小括号中

​ 函数外部执行的时候传入参数：实际的参数（实参）

​ 函数内部就应该接受这个参数：形参（在函数申明位置的小括号里面写上变量接受这个参数）

如：传入一个数字，在控制台中打印这个数字的平方。
function foo(n){
    console.log(n*n)
}
foo()

function foo(num){
    console.log(num)
}
foo(5)
foo(6)
则：在控制台中打印第一次是5，第二次是6

​ (4)参数可以写几个：实参位置与形参位置一一对应。多的部分会舍弃

1.function foo(a,b,c){
    console.log(a,b,c)
}
foo(1,2,3)
则：打印出1  2  3 

2.function foo(a,b,c,d){
    console.log(a,b,c,d)
}
foo(1,2,3)
则：打印出1  2  3

3.function foo(a,b,c,d){
   console.log(a,b,c,d)
}
foo(1,2,3,4,5,6)
则：打印出1  2  3  4

4.打印a,b,c的和
function sum(a,b,c){
   console.log(a + b + c) //在控制台中打印，不是输出，
}
sum(1,2,3)
则：输出6
在这里6不是输出

9.函数返回值。任何代码都是有返回值的。输出：表示的是函数的执行结果

（1）关键词：return,返回之后后面代码不会执行了

（2）不写内容默认情况下函数返回undefined

（3）函数一旦返回了内容，函数就执行完了。

如：function sum(a,b,c){
   console.log(a + b + c) //在控制台中打印，不是输出，
   return 123   //返回123
   console.log(a * b * c) //在这不会执行了
}
sum(1,2,3)

10.和数学中的函数有什么关系：

​ 数学中的函数：自变量x 经过函数转换 形成 因变量y

​ js中的函数：如;输入一个值返回它的平方

function pingfang(x){
  return x*x
}
pingfang()  //这里传入的实参会在函数声明的形参中对应

11.函数有返回值，函数执行也有返回值不过是（undefined）

12.函数声明和函数表达式：

​ 形如 function 名字（）{ } 的形式就是函数声明。（单行代码以function开头）。函数声明可以执行

如：function fool(){
      alert(666)
}
可以执行

​ 形如：box.onclick = function(){ } 的形式是函数表达式。（作为了一个表达式而存在，和运算符在一起）函数表达式不可以执行

如：let fn2 = function fn3(){
     alert(666)
}
fn2可以执行，fn3不可以执行。要fn3执行，则只需fn2执行即可

13.匿名函数：如：

let fn2 = function (){
     alert(666)
}
这里省略了fn3，则他就是个匿名函数
fn2.name就是fn2.


let fn2 = function fn3(){
     alert(666)
}
fn2.name就是fn3

14.自定义属性。针对于标签的。真正的控制标签的属性。

​ 获取标签的时候用const（常量）。

​ 标签自定义属性不能直接通过.的方式获取。要通过：标签.getAttribute(属性名)

<div class="box" aaa="bbb"></div>
<input type="text" value="asd">
//获取标签
const BOX = document.querySelector(".box")
const INPUT = ocument.querySelector("input")
//获取自定义属性
console.log(BOX.getAttribute("aaa")) //bbb
//设置属性值
BOX.setAttribute("aaa","ccc")
即把aaa="bbb"修改为 aaa="ccc"
console.log(BOX.setAttribute("aaa")) //ccc

console.log(INPUT.value) //asd  因为value是input里面系统自带的，不是自定义的，所以直接可以通过：标签.value获取到

dataset属性：这个对象直接接管了所有的data-的属性。这个方法比getAttribute和setAttribute要简单多
<div class="box" aaa="bbb" data-age="19" data-name="婷猪"></div>
console.log(BOX.dataset)   //age:"19"  name"婷猪"    //这个对象直接接管了所有标签中的data-的属性
//如果要修改age=20
BOX.dataset.age="20" //即把age修改为20

15.can i use 网址查看前端兼容性

箭头函数

1.用在比较简单的函数中，箭头函数表达式。

例：接受两个参数，返回他们的和

一般函数：function sum(a,b){    //这是个函数声明
            return a + b
       }
        sum(2,3)
        结果：5
        
箭头函数：let sum = （a,b）=>(a+b)    //这是个函数表达式         //sum等于两个参数的和 
        sum(2,3)
        一个function就需要一个=>
        结果：5

2.写法：

​ （1）省略function

​ （2）（）和{ }中间添加 =>

如：let fool = function(a){
     return a*a
}

则：用箭头函数可以改为：
   let fool = (a) =>{
      return a*a
}

3.特殊情况下，可以省略return

​ 前提条件：执行代码只有return 这一行的时候

​ 写法：将大括号改为小括号，删除return

​ 如果只有一个参数，可以省略参数的小括号。例：

传入一个数，返回它的平方。
1.正常写法：
   let fool = function(a){
       retrun a*a
   }
   fool(2)     //结果：4
2.箭头函数省略写法：
   let fool = a => a*a

4. 函数可以返回任意内容，函数执行返回函数。

   ​ 如(1)：各个国家的税收比例：比如：美国0.05 ，日本0.1 ， 法国 0.3 根据不同的税收比例创建函数来收税

   一般函数写法：
   function creater(percent){
     return function(money){
        return percrnt*money
     }
   }
   
   let am = creater(0.05)
   am(1000)  //50
   am(100)  //5
   
   let ja = create(0.1)
   ja(1000)  //100
   ja(100)  //10
   
   let fr = create(0.3)
   fr(1000)  //300
   fr(100)   //30
   
   箭头函数写法：
   let creater = percent=>money=>percent*money
   creater(0.1*1000)   //100
   

   ​ 如（2）：做一个加法器：有一个初始值，传入一个参数表示初始值，返回一个以这个初始值开始的加法器。

   一般写法：
   function createAdder(init){
      return function(val){
          return init += val
      }
   }
   
   //以0开始加
   let adder1 = createAdder(0)
   console.log(adder1(2))  //2
   console.log(adder1(3))  //5
   
   //以10开始加
   let adder1 = createAdder(10)
   console.log(adder1(-10))  //0
   console.log(adder1(100))  //100
   
   箭头函数写法;
   let createAdder = (init) =>（val）=>{
        return init += val
   }
   读法：createAdder首先接受一个参数（init）,返回的是一个函数（return function(val)，这个函数再接受一个参数（val）返回的是原先函数累加形成新的参数。于是可以将函数生成的参数不停地累加到函数中，返回一个新的参数
   

   5.练习：给一个一般的函数，要简化成箭头函数。

   一般函数：
   function sum1(a){
      return function(b){
         return function(c){
            return a+b+c
         }
      }
   }
   sum1(1,2,3)  //6
   
   简化为的箭头函数：
   let sum1 = a =>b =>c =>(a + b + c)
   console.log(sum1(1)(2)(3))  //6
   console.log(sum1(1)(2)) //这时，也不会报错，依然会返回一个函数（c =>(a+b+c)），只是在等c的一个值，从而来把它们相加
   console.log(sum1(1))  //这时返回一个函数（b=>c=>(a+b+c)）
   

   6.自定义属性。针对于标签的。

   ​ 获取标签的时候用const（常量）。