javascript基礎系列：函數（三）

函數 function

函數就是一個方法或者一個功能體，函數就是實現某個功能的代碼放到一起分裝，以後想要操作實現這個功能，只需要把函數執行即可，減少頁面中的冗餘代碼，提高代碼重複使用率（低耦合高內聚）<br />創建函數<br />形參<br />返回值<br />執行函數<br />實參<br />arguments<br />函數底層運行機制<br />創建函數的時候，我們設置了形參變量，但如果執行的時候並沒有傳遞對應的實參，那麼形參變量默認的值是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)

執行過程如下圖：<br />

進一步理解自定義屬性

<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>

arguments 函數內置的實參集合

任意數求和（執行函數的時候，傳遞n個值實現求和）

1. 傳遞的實際參數的個數不確定
2. 傳遞的值是否是有效數字不確定

把傳遞的有效數字進行相加求和<br />arguments: 函數內置的實參集合

1. 類數組集合，集合中存儲着所有函數執行時，傳遞的實參信息
2. 不論是否設置形參，arguments都存在
3. 不論是否傳遞實參，arguments也都存在

arguments.callee: 存儲的是當前函數本身（一般不用的，js嚴格模式下禁止使用這些屬性）

function sum() {
    let total = null;
  for(let i = 0; i < arguments.length; i++) {
    // 獲取的每一項的結果都要轉換爲數字，（數學運算）
    let item = Number(arguments[i]);
    // 非有效數字不加
    if(isNaN(item)) {
        continue;
    }
    total += item;
  }
  return total;
}
let total = sum(10, 20, 30, 40);
console.log(total)

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

2. 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

3. 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

4. Math.max/min([val1],[val2], ...)

獲取一堆數中的最大值和最小值

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

5. Math.sqrt/pow()

sqrt: 給一個數開平方
pow： 計算一個數的多少次冪

6. 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)
}