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

函数初识

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
  1. 函数可以返回任意内容,函数执行返回函数。

    ​ 如(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(常量)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值