前端筆記---5.javascript基礎（函數，代碼規範）

JavaScript 基礎

- - 函數
  - - 為什麼要有函數
    - 什麼是函數
    - 函數的定義
    - 函數的調用
    - 函數的參數
    - 函數的傳回值
    - arguments的作用
    - 代碼規範
  - 作業

目标

函數及其應用

函數

為什麼要有函數

如果要在多個地方求1-100之間所有數的和，應該怎麼做？

什麼是函數

把一段相對獨立的具有特定功能的代碼塊封裝起來，形成一個獨立實體，就是函數，起個名字（函數名），在後續開發中可以反複調用

函數的作用就是封裝一段代碼，将來可以重複使用

函數的定義

函數聲明

function 函數名(){
  // 函數體
}

特點
- 函數聲明的時候，函數體并不會執行，隻有當函數被調用的時候才會執行。
- 函數一般都用來幹一件事情，需用使用動詞+名詞，表示做一件事情 tellStory sayHello 等

函數的調用

調用函數的文法
特點
- 函數隻有在調用的時候才會執行，調用需要()進行調用。
- 函數可以調用多次(重複使用)

// 聲明函數
function sayHi() {
  console.log("吃了沒？");
}
// 調用函數
sayHi();

// 求1-100之間所有數的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 調用
getSum();

函數的參數

為什麼要有參數

function getSum() {
  var sum = 0;
  for (var i = 1; i <= 100; i++) {
    sum += i;
  }
  console.log();
}

// 雖然上面代碼可以重複調用，但是隻能計算1-100之間的值
// 如果想要計算n-m之間所有數的和，應該怎麼辦呢？

文法

// 函數内部是一個封閉的環境，可以通過參數的方式，把外部的值傳遞給函數内部
// 帶參數的函數聲明
function 函數名(形參1, 形參2, 形參...){
  // 函數體
}

// 帶參數的函數調用
函數名(實參1, 實參2, 實參3);

形參和實參

形式參數：

在聲明一個函數的時候，為了函數的功能更加靈活，有些值是固定不了的，對于這些固定不了的值。我們可以給函數設定參數。這個參數沒有具體的值，僅僅起到一個占位置的作用，我們通常稱之為形式參數，也叫形參。

2. 實際參數：

如果函數在聲明時，設定了形參，那麼在函數調用的時候就需要傳入對應的參數，我們把傳入的參數叫做實際參數，也叫實參。

var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
  console.log(a + b);
}
//x,y實參，有具體的值。
//函數執行的時候會把x,y複制一份給函數内部的a和b，
//函數内部的值是複制的新值，無法修改外部的x,y

求1-n之間所有數的和

function getSum(n) {
    var sum = 0;
    for (var i=1; i<=n; i++){
        sum +=i;
    }
    console.log(sum);
}
getSum(100)//調用函數，傳入實參

求n-m之間所有數額和

function getSumNM(n,m) {
    if(n>m){
        alert('n的取值必須小于或等于m');
        return;
    }
    var sum = 0;
    for (var i=n; i<=m; i++){
        sum +=i;
    }
    console.log(sum);
}
getSum(0,100)//調用函數，傳入實參

圓的面積

function getArea(r) {
    var pi = 3.1415926;
    var area = pi * r * r;
    console.log(area);
}
getArea(4)//調用函數，傳入實參

求2個數中的最大值

function getMax(x, y){
    console.log(x > y ? x : y);
}
getMax(3,1);

求3個數中的最大值,最小值

function getMax(x,y,z){
   console.log( x > y ? ( x > z ? x : z ) : ( y > z ? y : z ))
}
getMax(2,5,1);
function getMin(x,y,z){
   console.log( x < y ? ( x < z ? x : z ) : ( y < z ? y : z ))
}
getMin(2,5,1);

判斷一個數是否是素數

//素數也叫質數，一個數隻能被1和它本身整除
function judgePrime(number) {
    //隻要1---number之間找到一個能整除，就證明它不是素數
    for(var i = 2; i < number ; i++){
        var isPrime = true;
        if(number % i === 0) {
            isPrime = false;
        }
        console.log(isPrime?'素數':'不是素數');
    }
}

函數的傳回值

當函數執行完的時候，并不是所有時候都要把結果列印。我們期望函數給我一些回報（比如計算的結果傳回進行後續的運算），這個時候可以讓函數傳回一些東西。也就是傳回值。函數通過return傳回一個傳回值

每個函數都有傳回值，如果沒有寫傳回值，預設傳回undefined

//聲明一個帶傳回值的函數
function 函數名(形參1, 形參2, 形參...){
  //函數體
  return 傳回值;
}

//可以通過變量來接收這個傳回值
var 變量 = 函數名(實參1, 實參2, 實參3);

函數的調用結果就是傳回值，是以我們可以直接對函數調用結果進行操作。

傳回值：

如果函數沒有顯示的使用 return語句，那麼函數有預設的傳回值：undefined

如果函數使用 return語句，那麼跟再return後面的值，就成了函數的傳回值

如果函數使用 return語句，但是return後面沒有任何值，那麼函數的傳回值也是：undefined

函數使用return語句後，這個函數會在執行完 return 語句之後停止并立即退出，也就是說return後面的所有其他代碼都不會再執行。

要麼讓函數始終都傳回一個值，要麼永遠都不要傳回值。

案例
1. 求一組數中的最大值

function getMax(arr) {
    var max = arr[0];
    for (var i=1; i < arr.length; i++) {
        max = max < arr[i] ? arr[i] : max;
    }
    return max;
}
var arr = [11,2,3,5,77,45];
var result = getMax(arr);
console.log(result);

求一組數中的最小值

function getMin(arr) {
  var min = arr[0];
  for (var i=1; i < arr.length; i++) {
      min = min > arr[i] ? arr[i] : min;
  }
  return min;
}
var arr = [11,2,3,5,77,45];
var result = getMin(arr);
console.log(result);

求階乘

function getFactorial(n){
   var fac = 1;
   for(var i=1; i<=n; i++) {
      fac *= i; 
   }
   return fac;
}
console.log(getFactorial(6));

求1!+2!+3!+…+n!

function getFactorial(n){
   var fac = 1;
   for(var i=1; i<=n; i++) {
      fac *= i; 
   }
   return fac;
}
console.log(getFactorial(6));
function getFactorialSum(n){
    var sum = 0;
    for(var i=1 ; i<=n; i++){
        sum +=getFactorial(i);
    }
    return sum;
}
console.log(getFactorialSum(4));

arguments的作用

JavaScript中，arguments對象是比較特别的一個對象，實際上是目前函數的一個内置屬性。也就是說所有函數都内置了一個arguments對象==，arguments對象中存儲了傳遞的所有的實參==。arguments是一個僞數組（類數組對象），是以及可以進行周遊。

//當我們需要幾個參數的時候，就傳幾個參數
function test(){
    //隻能在函數内部使用
    console.log(arguments);
    //通過arguments擷取函數調用時傳入的實參
    //類似于數組，但不是真正的數組，僞數組，類數組對象
}

案例
1. 求任意個數的最大值

function getMax(){
    var max = arguments[0];
    for(var i=1; i < arguments.length; i++) {
        max = max > arguments[i]? max: arguments[i];
    }
    return max
}

console.log(getMax(1,2,34,5,645));

求任意個數的和

function getSum(){
  var sum = 0;
  for(var i=0; i < arguments.length; i++) {
      sum += arguments[i];
  }
  return sum
}

console.log(getSum(1,2,5));

代碼規範

1.命名規範	
   函數 和變量的命名 必須要有意義，變量的名稱 一般用名詞   函數 一般用動詞
   遵循駝峰命名法
2.變量規範   
	var name = 'zs';	
3.注釋規範
	// 這裡是注釋
4.空格規範
5.換行規範
	var arr = [1, 2, 3, 4];
	if (a > b) {
      
	}
	for(var i = 0; i < 10; i++) {
      
	}
	function fn() {
      
	}

作業

求斐波那契數列Fibonacci中的第n個數是多少？ 1 1 2 3 5 8 13 21…

function fibonacci(n){
    var n1 = 1;
    var n2 = 2;
    var result = 0;
    for(var i=3; i<=n;i++){
        result = n1 + n2;
        n1 = n2;
        n2 = result;
    }
    return result;
}
console.log(fibonacci(4))//5

翻轉數組，傳回一個新數組

//第一種for循環遞減法
function reverseArr(arr){
    var newArray = [];
    for(var i=arr.length-1; i>=0;i--){
        newArray[newArray.length] = arr[i];
    }
    return newArray;
}
console.log(reverseArr([1,2,3,4,5]))
//第二種方法
function reverseArr(arr){
    for(var i=0;i<parseInt(arr.length/2);i++){
        var tmp = arr[i];
        arr[i] = arr[arr.length-1-i];
        arr[arr.length-1-i] = tmp;
    }
    return arr;
}
console.log(reverseArr([1,2,3,4,5,6]));

對數組排序，從小到大

//第一種方法，冒泡排序
function sortArr(arr) {
    for (var i=0; i<arr.length-1; i++) {
        for (var j=0; j<arr.length-1-i; j++){
            if(arr[j] > arr[j+1]) {
               var temp = arr[j];
               arr[j] = arr[j+1];
               arr[j+1] = temp;
            }
        }
    }
    return arr;
}
console.log(sortArr([20,10,30,50,2,5]));
//第二種方法，優化冒泡排序
function sortArr(arr) {
    for (var i=0; i<arr.length-1; i++) {
        var isSort = true;
        for (var j=0; j<arr.length-1-i; j++){
            if(arr[j] > arr[j+1]) {
               var temp = arr[j];
               arr[j] = arr[j+1];
               arr[j+1] = temp;
               isSort = false;
            }
        }
        if(isSort) {
            break;
        }
    }
    
    return arr;
}
console.log(sortArr([20,10,30,50,2,5]));

輸入一個年份，判斷是否是閏年[閏年：能被4整除并且不能被100整除，或者能被400整除]

function judgeLeapYear(year){
    return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0) ? '閏年' : '平年';
}
judgeLeapYear(2000);

輸入某年某月某日，判斷這一天是這一年的第幾天？

//分析：
//2000年1月1日，第1天；
//2000年1月31日，第31天；
//2000年2月1日，第31+1天；
function judgeLeapYear(year){
    return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0) ? true : false;
}
judgeLeapYear(2000);
function judgeWhichDay(year,month,day){
    var days = day;
    for(var i = 1; i< month; i ++){
        switch(i){
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                days += 31;
                break;
            case 4:
            case 6:
            case 9:
                days += 30;
                break;
            case 2:
                days += judgeLeapYear(year) ? 29 : 28;
                break;
        }
    }
    
    return days;
}
console.log(judgeWhichDay(2000,1,1));
console.log(judgeWhichDay(2000,3,1));
console.log(judgeWhichDay(2001,3,1));

前端筆記---5.javascript基礎（函數，代碼規範）

JavaScript 基礎

函數

為什麼要有函數

什麼是函數

函數的定義

函數的調用

函數的參數

函數的傳回值

arguments的作用

代碼規範

作業

繼續閱讀

Javascript中函數和作用域

vue基本環境搭建

從URL輸入到頁面展示發生了什麼

URL跳轉錯誤之 URL特殊字元轉義

qs.parse()、qs.stringify()使用方法

JS數組對象的方法總結

傳回上一頁跳過中間頁面，傳回上一頁跳過敏感頁面

自增和自減

[one day one question] express 不緩存如何實作

javascript基礎知識系列 —— 2（資料類型）

javascript基礎（上）

一點心得體會

JavaScript标準庫- JSON對象

JavaScript基礎——嚴格模式

04-前端技術_javaScript基礎

JavaScript控制顯示隐藏