JavaScript-對象、函數、數組

時間 2020-01-19

原文原文鏈接

循環語句正則表達式

1) 循環三要素
        初始化條件
        結束斷定條件
        迭代
    2) 三種基本循環語句
        2.1 for循環
            for(初始化條件; 結束斷定條件; 迭代){
                循環體
            }    

            var result = 0;
            for(var i=1; i<=3;i++){
                result += i;
            }

            var result = 0;
            var i = 1;

            i<=3                 //true
            result+=i     //result = 1;
            i++                 //i = 2

            i<=3                 //true
            result+=i     // result = 3;
            i++                 // i=3

            i<=3                 //true
            result+=i     // result = 6;
            i++                 // i=4

            i<=3                 //false     結束

        2.2 前置判斷循環 while循環

            初始化條件
            while(結束斷定條件){
                循環體
                迭代
            }

        2.3 後置判斷循環 do-while循環
            初始化條件
            do{
                循環體
                迭代
            } while(後置判斷循環);

對象
引用數據類型，用於保存複雜的數據，是多個屬性和方法的集合
1) 對象如何建立編程

1. 對象字面量
    var obj = {
        name:"terry",
        age:12,
        gender:"male",
        sayName:function(){
            console.log(this.name);
        }
    };

    對象使用"{}"做爲對象的邊界，對象是由多個屬性組成，屬性與屬性之間經過","隔開，屬性名與屬性值經過":"隔開;屬性名通常不添加引號（當屬性名中出現特殊字符的時候須要添加引號），屬性值若是是字符串的必定添加引號。
2. 經過構造函數來建立對象
    var obj = new Object();
    obj.name = "terry";
    obj.age = 12;
    <=>
    var obj = {};
    obj.name= "terry";
    obj.age = 12;

2) 對象如何訪問
    點訪問符 對象.屬性名
        obj.name
        obj.age
    中括號訪問符
        var name = "name";
        obj[name]

        =>
        obj["name"]
3) 刪除對象中的屬性
        delete obj.sayName
        從obj對象中刪除sayName屬性

4) Object
    根構造函數，全部的對象都直接間接繼承Object，全部的對象均可以調用Object原型中的方法
    
    toString()
    valueOf()
    constructor
        構造函數
    hasOwnProperty(prop)
        判斷某個屬性是不是自有屬性
    propertyIsEnumerable()
    ...

5) 遍歷對象中的屬性
    加強for循環

    for(var key in obj){
        var val = obj[key];
    }
    key屬性
    obj對象
    依次從obj中獲取到屬性名

6) 檢測一個屬性是否能夠被對象調用
    "name" in obj

函數
1) 做用api

1. 功能的封裝，【方法】
    將特定功能的代碼封裝起來，當須要的時候調用它纔會執行。
2. 構建對象的模板，【構造函數】

2) 定義
    1. 函數聲明
        函數聲明會提高，也就是在執行全部代碼以前，函數聲明會先執行；

        function 函數名(形式參數){
            函數體;
            返回值;
        }
        function add(a,b){
            var result = a + b;
            return result;
        }
        var total = add(1,2);

    2. 函數表達式
        var 函數名 = function(形式參數){};
        var a = 3;
        var obj = {};
        var add = function(a,b){return a+b;};
        var foo = add;
        var bar = add;
3) 函數調用
    1. 函數名(實參);
        add(1,2);
        foo(2,3);
        bar(3,4);
    2. 函數名.call(obj,實參列表)
        調用指定函數名的函數，而且將obj賦值給該函數中的this
    3. 函數名.apply(obj,實參數組)
        調用指定函數名的函數，而且將obj賦值給該函數中的this

4) 函數在內存中的表現形式

5) 函數的做用域
    1. 函數內部聲明的變量，在函數外部不能訪問
    2. 函數外部聲明的變量，在函數內部能夠訪問，那這個時候，函數與外部的這個變量就組成了閉包。
    3. 在js中函數內部不存在局部做用域
        function foo(){
            if(true){
                var a = 3;
            }

            console.log(a);    //3
        }
    4. 若是想在函數中建立一個具備局部做用域的變量，如何實現？
        1) 使用let聲明變量
            function foo(){
                let b = 4;
                if(true){
                    let a = 3;
                }
                console.log(a);    //報錯
            }
        2) 使用匿名函數的執行來虛擬局部變量

            (function(){
                if(true){
                    var b = 1;
                }
            })();
6) 函數的內部屬性
    只有在函數內部才能訪問、只有函數在執行過程當中才能肯定的屬性

    function add(a,b){
        var result = a + b;
        return result;
    }
    add(22,42,12,44);

    1.參數
        形式參數是方法接受實參的快捷方式，真正的實參保存在arguments
    2. arguments
        類數組對象
        {
            '0':22,
            '1':42,
            '2':12,
            '3':44
        }
    3. this
        當前的執行對象
        this的取值與函數的調用方式有關
        1) 若是使用"()"調用函數，觀察"()"左邊是不是函數名，若是是函數名，繼續觀察函數名左邊是否存在對象，若是是，那麼this指向這個對象；若是不是指向全局對象（global/window）

        var sayName = function(){
            console.log("hello i am "+this.name);
        }
        var p1 = {
            name:"terry",
            age:12,
            sayName:sayName
        }
        var p2 = {
            name:"larry",
            age:12,
            sayName:sayName
        }
        sayName()
        p1.sayName();
        p2.sayName();

7) 引用傳遞，值傳遞【賦值是賦棧區的值】
    var a = 3;
    var b = a;        (值傳遞)
    b++;    

    var a = function(){}
    var b = a;         （引用傳遞）
        a將指向函數的引用地址傳遞給b,a和b都指向該函數

    var a = {name:"terry",age:12};
    var b = a;        (引用傳遞)
    b.age++；
    a.age             

8) 函數做爲值，實參，返回值
    var a = function(){}    【匿名函數】
    1. 函數當作實參
        回調函數（函數當作參數來傳遞）【定製】
        函數，參數進行遍歷，調用者
        加工廠     成衣             貼牌
        A對象調用B對象的C方法，C方法在執行的過程當中又返回來調用A對象的D方法 
    2. 函數當作返回值    
        比較器函數
        [{
            id:1,
            name:"terry",
            age:12
        },{
            id:2,
            name:"larry",
            age:9
        } ,{
            id:2,
            name:"tom",
            age:19
        }]

        按照age來排序
            function(a,b){
                if(a.age>b.age){
                    return 1;
                } else {
                    return -1;
                }
            }
        按照編號來排序
            function(a,b){
                if(a.id>b.id){
                    return 1;
                } else {
                    return -1;
                }
            }

        工廠函數
            function factory(prop){
                return function(a,b){
                    if(a[prop]>b[prop]){
                        return 1;
                    } else {
                        return -1;
                    }
                }
            }

            factory("age");

數組
數組是存聽任意數據類型值的集合，容器。在數組字面量中，數組使用"[]"做爲數組的邊界，數組由多個元素組成，元素與元素之間經過","隔開，元素能夠爲任意數據類型。數組是一種特殊的對象，經過length屬性來獲取數組的長度（也就是數組中元素的個數）數組

1) 數組的定義閉包

1. 數組字面量
    var name = "name"
    var arr = [12,name,true,"larry",{},function(){},[],null];

    arr.length
2. 構造函數
    var arr = new Array();     
    =》
    var arr = [];

    var arr = new Array(length);
    建立一個長度爲length的數組
        var arr = new Array(2);
        var arr = [undefined,undefined];

    var arr = new Array(p1,p2,...);
    建立一個數組，數組中的元素使用實參初始化
        var arr = new Array(1,2,3);
        var arr = [1,2,3];

3) 數組的訪問
        經過索引來訪問，索引從0開始的，直到數組的長度-1，索引能夠超過索引範圍，只不過訪問的值爲undefined

        var arr = [1,2,3];
        索引：0~2

        arr[0]         //1
        arr[100]     //undefined

    4) 數組的遍歷
        1. 普通for循環
            var arr = [1,2,3];
            for(var i=0;i<arr.length;i++){
                var item = arr[i];
            }
        2. while循環
        3. do-while循環
        4. 加強for循環
            for(var key in arr){
                var val = arr
            }
    5) 數組在內存中的表現
        var arr = [[1,2],[3,4],[5,6]];
        arr[1][0]    //3

    7) 數組api
        arr     Array     Object
        arr能夠調用Array.prototype的方法,也能夠調用Object.prototype中的方法

        api (應用程序編程接口)
            做用
            參數
            返回值

        1. 添加或者移除元素 【對原值進行了改變】
            push()    入棧，將元素添加到數組的最後
                參數：入棧的元素
                返回值：入棧後數組的長度
            pop()     出棧，將數組中的最後一個元素移除，而且返回
                參數：none
                返回值：被出棧的元素
            shift() 出隊，將數組中的第一個元素移除，而且返回
                參數：none
                返回值：被移除的元素
            unshift()     插隊，將元素添加到數組的最前面
                參數：插隊的元素
                返回值：插隊後數組的長度
        2. 排序方法【改變原值】

            var arr = [82,1,43,2,8,32,5];
            arr.mySort()
            console.log(arr);

            // [1,2,5,8.32,43,82]

            sort();
                默認狀況下，按照每位字符在字符編碼表中出現的位置進行排序
            sort(comparator)
                comparator
                    接受兩個參數a,b;
                    若是a在b以前返回-1
                    若是a在b以後返回1

        3. 截取方法
            concat()     【不改變原值】
                數組合並
                參數：多個數組
                返回值：合併的後的新數組
            slice(begin [,end])【不改變原值】
                截取子數組，而且返回
                參數： begin表示截取的開始位置；end默認爲0
                返回值：截取後的子數組
            splice(begin,delete,insert,...)【改變原值】
                arr.splice(3,2)
                arr.splice(3,2,"terry","larry")

                返回值：被刪除的元素組成的數組
        4. 索引方法
            indexOf()
            lastIndexOf()
        5. 序列表
            JSON

            字符串
                arr.join("*")
                將數組元素轉換爲字符串，使用"*"鏈接arr中的每一個元素

        6. 迭代
            1) 循環方法
                forEach(function(item,index,arr){

                })

                Array.prototype.myForEach = function(handler){
                    for(var i=0;i<this.length;i++){
                        handler.call(this,this[i],i,this)
                    }
                }
                arr.myForEach(function(item,index,arr){})
            2) every
                every(function(item,index,arr){
                    return boolean
                })
                當回調函數每次都返回true，返回值才爲true
                當回調函數有一次返回false,返回值就爲false，而且會中止執行
            3) some
                some(function(item,index,arr){
                    return boolean
                })
                當回調函數每次都返回false，返回值才爲false
                當回調函數有一次返回true,返回值就爲true，而且會中止執行
            4) filter
                filter(function(item,index,arr){
                    return boolean
                })
                當回調函數返回true的時候，當前元素會被添加到返回值數組中
            5) map
                filter(function(item,index,arr){
                    return v
                })

                將回調函數的返回值組成一個新的數組返回

包裝器數據類型
var a = 3;app
- a = new Number(a);// 自動裝箱

a.toString();    

Number()
Boolean()
String()
    var a = 3;
    var b = true;
    var c = "hello world"    

c 能夠調用String.prototype中的方法以及Object.prototype原型中的方法

String相關API
    length         字符串中字符個數
    charAt()    指定索引位置上的字符
    charCodeAt()     指定索引位置上字符的字符編碼號
    indexOf()         從前日後查找指定字符在字符串中出現的位置
    lastIndexOf() 從後往前查找指定字符在字符串中出現的位置

    concat()     字符串拼接
    slice(begin,end)     從begin處開始截取，直到end可是不包含，將截取的值返回，不改變原值
    substring(begin,end)    從begin處開始截取，直到end可是不包含，將截取的值返回，不改變原值
    substr(begin,len)     從begin處開始截取，截取長度爲len

    trim()     刪除字符串左右兩邊的空格
    toUpperCase()     轉換爲大寫
    toLowerCase()     轉換爲小寫


    正則表達式相關方法：
    search()     
    match()
    replace()
    split()