day46----JavaScript的函數及對象小結

時間 2019-11-11

標籤 day46 day javascript 函數對象小結欄目 JavaScript 简体版

原文原文鏈接

一：函數

　　01：普通函數

function f1(){
    console.log("Helleo world")
}

f1(); //調用函數
-->Helleo world  //獲得的值

　　02：帶參數的函數

function f2(a,b){
    console.log(arguments);
    console.log(arguments.length);
    console.log(a,b);
}

f2(1,2);     //調用函數並給函數傳值
VM689:2 Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
-->2   //參數個數
-->1 2  //值

　　03：帶返回值的函數

函數只能返回一個值，若是要返回多個值，只能將其放在數組或對象中返回。
function sum(a,b){
    return a+b;
}
sum(1,2);  //調用函數並給函數傳參
--〉3  //獲得的值

　　04：匿名函數方式，多和其餘函數配合使用

var sum=function(a,b){
    return a+b;

}
sum(2,3); //調用函數並給函數傳參
5       //獲得值

　　05：當即執行函數，頁面加載到這裏了就直接執行，不須要被調用執行

(function(a,b){
    return a+b;
})(4,5);   ////python中寫能夠這麼寫：ret=(lambda x,y:x+y)(10,20) 而後print(ret)
9

　　06：#箭頭函數

var f=v=>v;
f(4);
4
---〉等同於：
var f = function(v){
  return v;
}

若是箭頭函數不須要參數或須要多個參數，就是用圓括號表明參數部分：
var f=()=>5;
undefined
f();
5

等同於：
ar f=function(){return 5};
f();
5

　　07：函數中的arguments參數

function add(a,b){
    console.log(a+b);
    console.log(arguments.length);
}
//傳兩個數：
add(2,4);
-->6
-->2


//傳三個數
add(1,2,4);
-->3    //1+2=3  只計算了前面兩個數字的和
-->3  //長度個數

//傳一個數

add(3);
-->NaN   //沒有結果，只返回一個not a number
-->1    // 長度個數

二：函數的全局變量和局部變量

　　01：局部變量

在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。
只要函數運行完畢，本地變量就會被刪除。

　　02：全局變量

 在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。

　　03：做用域

首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。

例子01：
var city="beijing";
function f(){
    var city="shanghai";
    function inner(){
        var city="shenzhen";
        console.log(city);
    }
inner();   //在函數內部調用內部的函數，首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層

}
f();   //調用函數
-->shenzhen    //輸出結果

例子02：
var city="beijign";
function Bar(){
console.log(city);  //首先在函數內部查找變量，找不到則到外層函數查找
}

function f(){
var city="shanghai";
return Bar;
}
var ret=f();
ret();
-->beijign          //獲得的值

　　04：閉包

var city="beijing";
function f(){
    var city="shanghai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret=f();
ret();
--> shanghai

　　05:詞法分析

JavaScript中在調用函數的那一瞬間，會先進行詞法分析。
詞法分析的過程：
當函數調用的一瞬間，會先造成一個激活對象：Active Object（AO）,並會分析一下3個方面
01：函數參數，若是有，則會將此參數賦值給AO，且值爲undefined。若是沒有，則不作任何操做
02：函數局部變量，若是AO上有同名的值，則不作任何操做，若是沒有，則將此變量賦值給AO，而且值爲undefined
03：函數聲明，若是AO上有，則會將AO上的對象覆蓋，若是沒有，則不作任何操做。

詞法分析例子01：

var age=18;     //（第二部：發現沒有函數參數，不作任何操做）
function foo(){

//（第三步，發現下面有局部變量age的聲明，此時的AO的變量名字是age，且值爲undefined（）
//即：age=undefined。因此這時的age的值是undefined  在這以前是還未執行到age=22的。）

    console.log(age);
    var age=22;         //若是沒有這個變量聲明，打印的值應該是18
    console.log(age);
}

foo();  //調用函數，（第一步：瞬間造成了一個AO對象）

//調用函數獲得的值
--> undefined
-->22

詞法分析例子02：

var age=18;
function foo(){
    console.log(age);
    var age=22;
    console.log(age);
    function age(){         //#發現age這個函數名也是變量，將OA上的變量給替換了，那麼函數在執行的時候，
                            //去OA上找，發現OA是個函數，而後執行到age=22的時候，age才被從新賦值
        console.log("呵呵");
    }
    console.log(age);
}

foo();  //調用執行函數

結果：

--> ƒunction age(){
      console.log("呵呵");
    }
--> 22
--> 22

結果分析：
詞法分析過程：
？？？？？？？？？第一步分析的參數是傳進去的參數仍是函數程序裏面的參數

一、分析參數，有一個參數，造成一個 AO.age=undefine;
2、分析變量聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，所以不作任何處理
三、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};
最終，AO上的屬性只有一個age，而且值爲一個函數聲明

執行過程：
注意：執行過程當中全部的值都是從AO對象上去尋找
1、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，因此第一個輸出的一個函數
二、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，因此在第二個輸出的是 22
三、同理第三個輸出的仍是22, 由於中間再沒有改變age值的語句了

三：內置對象和方法

JavaScript中的全部事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。
咱們在學習基本數據類型的時候已經帶你們瞭解了，JavaScript中的Number對象、String對象、Array對象等。
注意var s1 = "abc"和var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object

　　01：自定義對象

 javascript的對象（object）本質上是鍵值對得集合（Hash結構），可是隻能用字符串做爲鍵

例子01：
            //自定義一個對象a，且對象a是一個數組
            var a={"name":"Tom","age":18};

            //從對象中取值
            console.log(a.name);
            -->Tom

            console.log(a.age);
            -->18

            console.log(a["name"]);
            -->Tom

            console.log(a["age"]);
            -->18

　　02：遍歷對象中的值

var a={"name":"Tom","age":18};
for (var i in a){

    console.log(i,a[i]);   //遍歷的只是鍵，須要經過鍵取 值
}
//結果：
--〉name Tom
--〉age 18

　　03：建立對象

var person=new Object();    // 建立一個person對象
person.name="Tom";      // person對象的name屬性
-->"Tom"
person.age="18";         // person對象的age屬性
-->"18

 面向對象，在ES5中沒有類的概念，只有個構造函數，命名的首字母要大寫，實例化的時候使用new關鍵字進行實例化

　　04:Javascript面向對象之繼承#

// 父類構造函數
var Car = function (loc) {
  this.loc = loc;
};

// 父類方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子類構造函數
var Van = function (loc) {
  Car.call(this, loc);
};

// 繼承父類的方法
Van.prototype = Object.create(Car.prototype);
// 修復 constructor
Van.prototype.constructor = Van;
// 擴展方法
Van.prototype.grab = function () {
  /* ... */
};

　　05：Date對象

01：建立Date對象
    001:方法一：不指定參數
        var d1=new Date();

        console.log(d1.toLocaleDateString());
        --> 2018/12/19

    002：參數爲日期字符串
      01:年/月/日 形式
        var d2=new Date("2018/3/12 11:12");

        console.log(d2.toLocaleString());
        ---> 2018/3/12 上午11:12:00
      02：月/日/年 形式
        var d3=new Date("04/03/20 11:12");

        console.log(d3.toLocaleString());
        VM3078:1 2020/4/3 上午11:12:00

    003：參數爲毫秒數
        var d3=new Date(5000);

        console.log(d3.toLocaleString());   //取值
        --> 1970/1/1 上午8:00:05

        console.log(d3.toUTCString);
        --> ƒ toUTCString() { [native code] }


02：Date對象的方法：
    var d = new Date();
    //getDate()                 獲取日
    //getDay ()                 獲取星期
    //getMonth ()               獲取月（0-11）
    //getFullYear ()            獲取完全年份
    //getHours ()               獲取小時
    //getMinutes ()             獲取分鐘
    //getSeconds ()             獲取秒
    //getMilliseconds ()        獲取毫秒
    //getTime ()                返回累計毫秒數(從1970/1/1午夜)

　　06:json對象

建立兩個對象：
var str1='{"name":"TOM","age":18}';
var obj1={"name":"TOM","age":18};

//將json字符串轉成對象
var obj=JSON.parse(str1);
obj;  //輸出對象結果語句
{name: "TOM", age: 18}  //結果

//將對象轉換成json字符串
var str=JSON.stringify(obj1);
str;        //輸出對象結果語句
"{"name":"TOM","age":18}"   //結果

　　07：Math對象（相似於python的內置函數）( E 爲天然底數 (近似值 2.7183)。)
　　exp() 方法可返回 e 的 x 次冪的值。

01:返回數的絕對值。
   Math.abs(-34.34);
   -->34.34

02:返回 e 的指數。
   Math.exp(2);
   -->7.38905609893065

03:返回數的天然對數（底爲e）。
   Math.log(4);
   -->1.3862943611198906

04:返回 x 和 y 中的最高值。
   Math.max(4,23);
   -->23

05:返回 x 和 y 中的最低值。
   Math.min(23,12);
   -->12

06:返回 x 的 y 次冪。
  Math.pow(3,2);
  -->9

07:返回 0 ~ 1 之間的隨機數。
   Math.random()
   -->0.4973948215069466

08:把數四捨五入爲最接近的整數。
   Math.round(3.45);
   -->3

  Math.round(3.68);
  -->4

  Math.round(3.58);
  -->4

9:對數進行下舍入。
  Math.floor(23.9);
  -->23

10:返回數的正弦。
   Math.sin(12);
   -->-0.5365729180004349

   Math.sin(90);
   -->0.8939966636005579

11:返回數的平方根。
   Math.sqrt(2);
   1.4142135623730951

   Math.sqrt(4);
   -->2

12:返回角的正切。
   Math.tan(23);
   -->1.5881530833912738

   Math.tan(45);
   -->1.6197751905438615

ps:javascript 的round和python的round的比較

 python：
            print(round(3.45))  //3
            print(round(3.68))  //4
            print(round(3.58))  //4
            print(round(3.5))   //4
            print(round(4.5))   //4

        javascript：

            Math.round(3.45);
            -->3

            Math.round(3.5);
            ---4

            Math.round(3.68);
            -->4

            Math.round(3.58);
            -->4
ps：拓展知識點：Math.ceil(),Math.floor(),Math.round()的區別
    Math.ceil():小數後面的數字無論多少，直接進位，好比，12.1和12.5，12.6都直接返回13,ceil是向上舍入的（math.ceiling（天花板除法）。）
    Math.floor():無論小數點後的數字是多少，多大，都是直接捨去，不進位好比 12.1和12.5，12.9都是直接返回12，floor是向下舍入的。
    Math.round():正常的標準舍入，就像咱們學的數學課本上面的規則

ps：python的round()和javascript的round()的比較：
    javascript:Math.round():正常的標準舍入，就像咱們學的數學課本上面的規則

    python：python中的round（）會根據版本的不一樣而出現不一樣的結果。總體的是最靠近當前偶數的規則
    01：當小數部分只爲0.5時，整數部分若是爲奇數則進1，若是爲偶數則捨去小數部分
        print(round(3.5))   #4
        print(round(-3.5))   #-4
        print(round(4.5))   #4
        print(round(-4.5))   #-4

        02：小數部分不爲0.5時，按標準的四捨五入
        print(round(3.6))   #4
        print(round(4.6))   #5
        print(round(4.4))   #4
        print(round(-4.4))  #-4

        03:保留小數部分時候
        a:當小數部分須要保留數位的下一位是5時，保留數位置爲偶數則進1，奇數捨去。
        print(round(2.345,2))  #2.35
        print(round(-2.345,2))  #-2.35
        print(round(-2.335,2))  #-2.33
        b:當小數部分須要保留數位的下一位不是5時，按標準四捨五入（逢5進1）
        print(round(2.344,2))   #2.34
        print(round(2.347,2))  #2.35
        print(round(-2.347,2))  #-2.35