JS从入门到放弃第1天:函数

不会写的华崽
1,045 阅读6分钟

我是萌新，我想在这个平台记录我的存长~

**注释**：

​ 1.了解匿名函数，有名函数

​ 2.了解函数定义，声明，表达式

​ 3.了解函数执行

​ 4.另外不懂的请各大佬补充

函数

  1. 函数定义：

    • 将一系列代码，打包写到函数花括号里面

      //原谅我想不函数名起什么好，请谅解

//函数定义 将函数代码写到花括号里面 打包好
function zh(){
	console.log("我是函数定义出来的");
}
zh();//调用 zh名的函数内容;

  2. 函数声明：

    • 声明就是函数 有函数名或者写匿名函数

    • 两种声明函数

      • 有名函数/具名函数

        //有名函数/具名函数
function 函数名 + (){
    /*假设这里有代码*/
    console.log("对不起 我不应该偷懒");
}
函数名 + ()
//案例
function ju(){//起ju名为函数名
    console.log("我是代码");
}
ju()//函数名+()调用；

//具名函数
let num1 = function jj(){
    console.log("我是代码");
}
num1()//调用 函数变量调用

      • 匿名函数

        1.匿名函数被直接调用

        2.直接使用

        3**.可以在数组，对象，事件等 可以调用的地方，来启动匿名函数**

        4.匿名函数不用后面加 () 调用 他会自调用

        //我们来看一段 小弟的代码

//html
<button>我是一个按钮</button>

//js
var aBtn = document.querySelector("button")
//匿名函数
//按钮+事件+函数：函数被包在事件里就叫匿名函数
aBtn.onclick = function (){
    console.log("按钮点我");
}
//点击后自调用了; 

//匿名函数执行
//数组
let arr = [function(){console.log("按钮点我");}]
arr[0]()//调用
//对象
let obj = {fn:function(){console.log("按钮点我");}}
obj.fn()//调用
//事件
aBtn.onclick = function (){console.log("按钮点我");}

  3. 函数表达式

    • 有名函数，把函数赋值给变量，变量等同于函数名；

      • 可以让更多代码简化，把相同的代码放在函数里面，并一起调用，
      • 以下面的有名函数为例
      let fn = function(){
     console.log("点我");
}
//有名函数包含了函数代码 

var aBtn = document.querySelector("button")

aBtn.onclick = function (){
    fn();
    //让有名函数的变量值调用在这里
    //点击按钮即可触发！
}
//我注意到了,函数里面可以调用另外一个函数

执行阶段

​ 自执行

//函数名+() 执行
function zhu(){}
zh()

//匿名函数自执行
(function(){
    console.log("我在里面");
}() )
//在括号包括住匿名函数让他最后()自己启动一次；
//另外还有一种方法
(function(){
    console.log("我在里面");
})()
//括号可以写在外面哟 一样可以执行

**他执行**

​ 作为事件函数 被事件触发

var aBtn = document.querySelector("button")

aBtn.onclick = function (){
    //被事件触发
    console.log("我在里面");
}

  • 函数执行完，最后一步是什么呢？ 返回值？

    function zhu(){
    console.log("我在里面");
}
console.log( zh() );
//我在里面
//undefined

    • 哇？？为什么是undefined？

    • 因为函数最后一步是return 出值

    • 没有定义return或者没有值 就会返回出一个undefined

  • 函数执行只能有一个 ( );调用函数，两个( ) ( )调用一个函数就会函数报错；

return

  1. 决定函数执行后，返回值默认的是undefined；
  2. return后, 是多条数据(多条字符串或者数组值)返回最后一条;
  3. return后面的语句不再实现
//1.函数默认返回值
function zhu(){
    console.log("我后面还有个返回值哦");
  //return undefined;
}
let A = zhu(); //我后面还有个返回值哦;undefined; 
----------------------------------------------------------------------

//2.return 返回多条数据(没有加花括号);
function zhu(){
    console.log("return执行哪个?");
    return 1,2,3,4,"仔细";
}
//return执行哪个?; 仔细；
zhu();
----------------------------------------------------------------------

//3.return后面的语句不再实现
function zhu(){
    console.log("return后面的被删除或者说弹出");
    return 3
    console.log("123");
}
zhu();//3 
----------------------------------------------------------------------

this指向

​ this谁调用跟谁跑.谁点击指向谁，谁存放this就执行存放的this

​ this默认指向window，

​ this不取决在函数在哪执行，取决谁在调用

//html
<div class="box"> <p>123</p> </div>
//js
let aDiv = document.querySelector(".box");
 aDiv.onclick = function(){
    this.innerHTML = 456;//aDiv点击事件，点击来到this，触发后this指向aDiv
}
//点击div就会变成456

参数

参数 = 形参;实参

  1. 形参写在函数名的( )中；形参不用声明

     function zhu(a,b){//形参
     var c = a + b;
     console.log(c);
     return c;
 }
zhu(2,3)//实参
//c 2+3 等于 5;

  2. 实参是函数执行时，传入的具体数据

    • 一对一按照顺序接收；

      function zhu(a,b){// a对应2，b对应3 ...
	var c = a + b;
	console.log(c);
	return c;
}
       
	zhu(2,3)// a , b

3**.实参多于形参和形参多于实参**会发生声明呢？

实参 比 形参多 发生 => 实参不要，不会显示

 function zhu(a,b){ 
 	...
 } zhu(3,4,5); 
//c就算不传参也不会报错

形参 比 实参多 发生 => 形参接受不到实参的形参，默认undefined;

function zhu(a,b,c){ 
 	...
 } zhu(3,4); 
//c就是undefined;

4.实参可以放对象属性哟；

用 .name调用

 function zhu(a){
     var c = a.name
     console.log(c);
 }
zhu({name:"123"})
// c 就是 123；

arguments属性

​ arguments

  • 不定参；类数组;
  • 像[]；但没有[]的方法
  • 可以通过下标取值 ；
function zhu(a,b,c){
	console.log(arguments[1]);//2 像数组里面下标是1；所以值是2
}
	zhu(1,2,3,4)
  • arguments有length
function zhu(a, b, c, d) {
	for (let i = 0; i < arguments.length; i++) {//循环遍历
	console.log(arguments[i]);//1,2,3,4
  }
}
 zhu(1, 2, 3, 4);

es6

... 三点运算符

...将剩余参数，放到数组里面，必须放到所有形参最后

  • 返回的是一个数组，可以让用下标来使用；

  • 使用方法 ...名字; 比如：

function zhu(a , ...rest) {//...rest rest就是名字
        console.log(a,rest);//返回的是 a,[2,3,4]以数组返回给你
 }
zhu(1, 2, 3, 4);

es6默认的赋值

  • 参数默认的赋值，如果可以接收，就接收，

  • 如果不能那就使用默认值，放到所有形参后

     function zhu(a , c , b ,d=8) {
    console.log(d); //8
}
//防止用户不传参
 zhu(1, 2, 3);
-------------------------------------------------------------------
//如果用户传参了就会是传参值
 function zhu(a , c , b ,d=8) {
    console.log(d); //8
}
 zhu(1, 2, 3，4);
//那么d就是4

es6箭头函数

​ 箭头函数 ( ) => { }

  • 当{ }没有时，=>就是return值；

使用方法

let fn = (a,b) =>{
     confirm.log(a+b);//3
     return a+b
 } 
fn(1,2);//3

**特别注意不加{}**的箭头函数是：单独定义，最好不要这样

let fn = (a,b) => a+b 
fn(1,2);//3 单独定义

关于箭头函数一些细节

1.关于行参 如果不需要，可以不写，括号必须写

//let fn =  =>{ //报错
 let fn = () =>{ //（）必须写
     confirm.log(a);
     return a
 }

2.只有一个形参 可以删除括号

let fn = a => { //不推荐 因为只能写一个参数
    console.log(a);
    return a 
};

3.有多个参数 括号必须加

// let fn = a,b,c =>{//报错
let fn = (a,b,c) =>{ // 1, 2, 3
    console.log(a);// 1
    return a;
}
fn(1,2,3)
  • 4如果函数不只是需要 return 加上{},需要return 手动加上return

关于我：

由于可能我代码格式不怎么好看，请各位谅解

希望你们可以给我一点反馈让我日后改正自己的不足，给大家更好阅读

​ 不断学习，超越自己

​ :basketball_woman:Github:github.com/994AK;

​ :equatorial_guinea:邮箱@：1505398065@qq.com

avatar
文章
阅读
粉丝

友情链接：