javascript基础系列：函数（三）

叁歲伎倆 2022-12-08 01:39 163阅读 0赞

### 函数 function ###

函数就是一个方法或者一个功能体，函数就是实现某个功能的代码放到一起分装，以后想要操作实现这个功能，只需要把函数执行即可，减少页面中的冗余代码，提高代码重复使用率（低耦合高内聚）  
创建函数  
形参  
返回值  
执行函数  
实参  
arguments  
函数底层运行机制  
创建函数的时候，我们设置了形参变量，但如果执行的时候并没有传递对应的实参，那么形参变量默认的值是undefined

function[函数名]([形参变量1],...) { 
    	// 函数体：基于js完成需要实现的功能
       return [处理后的结果]
    }

#### 函数中的返回值 ####

函数执行的时候，函数内部创建的变量我们是无法获取和操作的，如果要想获取内部信息，我们需要基于return 返回值机制，把信息返回才可以

#### 匿名函数 ####

匿名函数之函数表达式：把一个匿名函数本事作为值赋值给其它东西，这种函数一般不是手动触发执行，而且靠其它程序驱动触发执行（例如触发某个事件的时候把它执行等）

document.body.onclick = function() { }
    
    setTimeout(function() { }, 1000)
    
    //匿名函数之自执行汗水：创建完一个匿名函数，紧接着就把当前函数加小括号执行
    (function(n){ })(100)

#### 函数的底层运行机制 ####

// 创建函数
    function fn(n, m) { 
    	var res = null;
      res = n + m;
      return res;
    }
    
    // 执行函数
    var AA = fn(10, 20)
    console.log(AA)

执行过程如下图：  
![image.png][]

#### 进一步理解自定义属性 ####

<button value="按钮1">按钮1</button>
    <button value="按钮2">按钮2</button>
    <button value="按钮3">按钮3</button>
    <button value="按钮4">按钮4</button>
    <button value="按钮5">按钮5</button>
    <script>
    	var btnList = document.getElementByTagName('button');
    	for(var i = 0; i< btnList.length; i++) { 
        btnList[i].myIndex = i
      	btnList[i].onclick = function() { 
        	alert(this.myIndex)
        }
      }
    </script>

![image.png][image.png 1]![image.png][image.png 2]

#### arguments 函数内置的实参集合 ####

任意数求和（执行函数的时候，传递n个值实现求和）

1.  传递的实际参数的个数不确定
2.  传递的值是否是有效数字不确定

把传递的有效数字进行相加求和  
arguments: 函数内置的实参集合

1.  类数组集合，集合中存储着所有函数执行时，传递的实参信息
2.  不论是否设置形参，arguments都存在
3.  不论是否传递实参，arguments也都存在

arguments.callee: 存储的是当前函数本身（一般不用的，js严格模式下禁止使用这些属性）

#### ES6中的箭头函数 ####

1.  如果函数体中只有一行return ,可以省略return 和大括号，一行搞
2.  形参赋值默认值：当没有给形参传递实参的时候，执行默认值
3.  箭头函数中没有arguments
4.  箭头函数中的this某些场景也是方便我们操作的

let sum = (n, m) => { 
    	return n + m
    }
    
    // 如果函数体中只有一行return ,可以省略return 和大括号，一行搞定
    let sum = (n, m) => n + m;
    
    // 形参赋值默认值：当没有给形参传递实参的时候，执行默认值
    let sum = (n = 0, m =0) => n + m
    
    let sum =(...arg) => { 
      // 但是我们可以使用剩余运算符获取到传递的实参集合（它是数组）
    	console.log(arg)
    }
    
    sum(1,2,3,4)

#### js 中的数学函数Math ####

> 数学函数：但是它不是一个函数，它是一个对象，对象中存储很多操作数字的属性方法，因此被称为数学函数

1.  Math.abs(\[number value\])

> 获取绝对值（绝对值永远是正数或者零）

如果传递的不是数字类型的值：先基于Number()转换为数字再处理

console.log(Math.abs(-12.5)) // 12.5
    console.log(Math.abs(12)) // 12
    console.log(Math.abs(0)) // 0
    
    // 如果传递的不是数字类型的值：先基于Number()转换为数字再处理
    console.log(Math.abs('12px')) // NaN
    console.log(Math.abs('-1'))
    console.log(Math.abs(true)) // 1

1.  Math.ceil/floor(\[number value\])

> 把一个数向上取整/向下取整

console.log(Math.ceil(12.1)) // 13
    console.log(Math.ceil(12.9)) // 13
    console.log(Math.ceil(-12.1)) // -12
    console.log(Math.ceil(-12.9)) // -12
    
    // -------
    console.log(Math.ceil(12.1)) // 12
    console.log(Math.ceil(12.9)) // 12
    console.log(Math.ceil(-12.1)) // -13
    console.log(Math.ceil(-12.9)) // -13

1.  Math.round()

> 四舍五入

console.log(Math.round(12.1)) // 12
    console.log(Math.round(12.9)) // 13
    console.log(Math.round(-12.1)) // -12
    console.log(Math.round(-12.9)) // -13

1.  Math.max/min(\[val1\],\[val2\], …)

> 获取一堆数中的最大值和最小值

console.log(Math.max(12, 5, 23)) // 23
    console.log(Math.max([12, 5, 23])) // NaN

1.  Math.sqrt/pow()

> sqrt: 给一个数开平方  
> pow： 计算一个数的多少次幂

1.  Math.random()

> 获取0-1之间的随机小数

获取\[n-m\]之间的随机整数

> 包含n包含m  
> n<m

//常用公式
    Math.round(Math.random()*(m-n)+n)
    
    for(let i=1; i<= 10; i++) { 
    	let ran = Math.round(Math.random()* (30-25) + 25)
      console.log(ran)
    }

如果想了解更多，请扫描二维码，关注公众号  
![qrcode\_for\_gh\_4d3763fa9780\_258 (1).jpg][qrcode_for_gh_4d3763fa9780_258 _1_.jpg]

[image.png]: /images/20221123/c06acdfc3e6043c4aa03be5d3c1a1db6.png
[image.png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1OTcxNDMxNTk3OTAtOTViMWZkOWQtZDgzOS00ODQ2LTlmM2MtMjQ5ZWY1ZTdmNTA5LnBuZw
[image.png 2]: /images/20221123/b28107aabb9642c588a586373bbc8295.png
[qrcode_for_gh_4d3763fa9780_258 _1_.jpg]: /images/20221123/f72686b36c9b41368fec66a96fd13b10.png