摘要：發(fā)生這個異常的原因就是因為在調(diào)用函數(shù)時，中的已經(jīng)不再指向?qū)ο蠖侵赶蛄巳謱ο螅捎谙虏]有屬性，所以輸出。在為綁定的上下文環(huán)境之后，并不會立即執(zhí)行。方法用于檢查數(shù)組中的是否存在符合條件的項，存在則返回否則返回。

這篇文章用于總結一些javascript語言中常見的易混淆點。

在js中，最詭異莫測的莫過于this了，理解的不夠深入或是應用場景略微復雜，使用時就會出現(xiàn)各種意想不到的錯誤。所以，在很多時候，我們需要手動指定上下文環(huán)境，來修正this的指向。
最簡單判斷this所在環(huán)境的方法是，尋找this的實際調(diào)用者。

    var a = {
        name: "ein",
        sayName: function () {
            console.log(this.name);
        }
    }

    var b = a.sayName;
    b();  //undefined

我們本想將對象a的sayName賦值給變量b，通過調(diào)用來查看a的name是什么？結果卻輸出了undefined。發(fā)生這個異常的原因就是因為在調(diào)用函數(shù)b時，sayName中的this已經(jīng)不再指向?qū)ο骯而是指向了全局對象window，由于window下并沒有name屬性，所以輸出undefined。

下面我們將通過以上三種方法來修正這個問題。

    var b = a.sayName;
    b.call(a);  //ein

使用call方法，第一個參數(shù)為函數(shù)調(diào)用時的上下文環(huán)境，將其設定為對象a，這樣this就會指向?qū)ο骯,如此便可以取到對象a中的name屬性，輸出想要的值。

    var b = a.sayName;
    b.apply(a); //ein

使用apply方法，傳入上下文環(huán)境，可以實現(xiàn)同樣的效果。

那么call和apply的區(qū)別是什么呢？他們的區(qū)別在于后續(xù)的參數(shù)。讓我們改造一下上面的代碼，來觀察效果。

    var a = {
        name: "ein",
        sayName: function (fistname, lastname) {
            console.log(`${fistname} ${this.name} ${lastname}`);
        }
    }

    var b = a.sayName;

    b.call(a,"nick","snow");  //nick ein snow
    b.apply(a,["nick","snow"]);  //nick ein snow

call和apply的區(qū)別在于后續(xù)參數(shù)，call依次傳入后續(xù)參數(shù)，將被函數(shù)所使用。apply需要將后續(xù)參數(shù)以數(shù)組的形式傳入。

bind同樣可以用來修正this的指向，它與以上二者的區(qū)別在于，bind綁定之后并不會立即執(zhí)行函數(shù)。

    var b = a.sayName;
    b.bind(a);

在為b綁定a的上下文環(huán)境之后，b并不會立即執(zhí)行。

    b.bind(a,"nick","snow")();  //nick ein snow
    var c = b.bind(a);
    c("nick","snow");  //nick ein snow

如此，便可以如愿得到你想要的效果了。使用bind方法可以延緩函數(shù)的執(zhí)行時間，在你想調(diào)用時再執(zhí)行函數(shù)。
bind方法同樣可以傳入其它參數(shù)，和call方法的傳入方式相同。

看到這三個方法有沒有頭暈目眩的感覺？因為它們?nèi)齻€實在是太像三胞胎了，真的很難區(qū)分。首先，我們來學習或是回顧一下這三個單詞。

splice  拼接  
slice   片，切片  
split   分裂，裂開

大多數(shù)api其實其名稱都與其用途有所關聯(lián)，這三個api便是很經(jīng)典的案例。

splice意為拼接，它的用途，便是將一個數(shù)組分割開，并且可以再以指定的方式重新拼接在一起。

slice意為切片，我們可以使用它來在一個數(shù)組或是字符串中切取我們想要的一段。

split意為分裂，它可以將一個字符串分裂成一個數(shù)組。

    var a = [1,2,3,4,5];
    a.splice(1,2,4,4);
    console.log(a);
    //[1,4,4,4,5]

splice(starts, count, item1, ..., itemx)方法接受多個參數(shù),第一個參數(shù)為刪除的起始元素，第二個參數(shù)為刪除數(shù)量，后續(xù)為插入的內(nèi)容。
注意: splice方法會修改原始數(shù)組，返回被刪除的內(nèi)容數(shù)組。

    var a = [1,2,3,4,5];
    var b = "12345";
    a.slice(1,3);  //[2,3]
    a.slice(1);  //[2,3,4,5]
    a.slice(2,-1)  //[3,4]
    b.slice(1,2);  //"2"
    console.log(a);  //[1,2,3,4,5]
    console.log(b);  //"12345"

slice方法既可應用于數(shù)組也可應用于字符串。

slice(stats, beforeEnds)方法接受最多兩個參數(shù),第一個參數(shù)代表的序列號必須小于第二個參數(shù)，第二個參數(shù)為切片的終止位置，第二個參數(shù)省略時默認截取到數(shù)據(jù)末尾，參數(shù)為負數(shù)時，將反向查找匹配項。

注意: slice方法不會修改原始數(shù)組，返回的是被切片節(jié)選的片段。

    var a = "123456";
    a.split("");  //["1","2","3","4","5","6"]
    a.split("",3);  //["1","2","3"]
    console.log(a);  //"123456"

split(separator, count)方法可接受兩個參數(shù)，第一個參數(shù)為分割符，用于指定字符串的分割規(guī)則，第二個參數(shù)為返回數(shù)組的最大長度，返回的輸出長度不會大于這個參數(shù)。
注意: split不會修改原始字符串，返回值為新數(shù)組。

這六個方法時常用的操作數(shù)組的api，均為Array.prototype的本地方法。所以一切數(shù)組均可使用這些方法遍歷操作數(shù)組的每一項，下面將逐一介紹這些方法。

    var arr = [
        {"name": "ein"},
        {"name": "zwei"},
        {"name": "drei"}
    ];

    let newarr = arr.map((item, index) => {
        return (
            {
                "name": item.name,
                "order": index
            }
        )
    });
    console.log(arr);
    // [{"name": "ein"},{"name": "zwei"},{"name": "drei"}] 
    console.log(newarr);
    // [{"name": "ein","order": 0},{"name": "zwei","order": 1},{"name": "drei","order": 2}]

map(fn(item, index))方法接收一個函數(shù)作為參數(shù)，這個函數(shù)接收兩個參數(shù)，第一個參數(shù)為每一項的數(shù)組內(nèi)容，第二個參數(shù)為數(shù)組下標。
注意: map方法返回一個新的數(shù)組，如果在操作中沒有return返回值，默認返回一個值為undefined的數(shù)組。
默認返回：[undefined, undefined, undefined]

    arr.forEach((item, index) => {
        item.old = true;
        delete item.name;
    })
    console.log(arr);
    //  [{"old": true},{"old": true},{"old": true}]

forEach(fn(item, index))方法接收一個函數(shù)作為參數(shù)，這個函數(shù)接收兩個參數(shù)，第一個參數(shù)為每一項的數(shù)組內(nèi)容，第二個參數(shù)為數(shù)組下標。
注意: forEach方法直接操作原始數(shù)組，并且不返回任何內(nèi)容。

簡單用例

    var arr1 = [1,2,3,4,5];
    var res = arr1.reduce((curr, next) => {
        return curr + next
    });
    console.log(res);  //15
    console.log(arr1);  //[1, 2, 3, 4, 5]

復雜用例

    var res1 = arr1.reduce((curr, next,index,arr) => {
        console.log("content",curr,next,index,arr);
        return curr + next
    },10);
    console.log(res1);

reduce方法用于對數(shù)組進行累積化操作，常用于數(shù)組求和。接收兩個參數(shù)，第一個參數(shù)為操作函數(shù)，第二個參數(shù)為函數(shù)初始值。對于數(shù)組的操作不會修改原始值。

    var res = arr1.filter((item, index) => {
        console.log("data:",index,item);
        return item > 3
    });
    console.log(res);
    //  [4, 5]

filter方法用于過濾數(shù)組的每一項，刪選出符合條件的項，并組成一個新的數(shù)組。

    var res = arr1.every((item, index) => {
        return item > 3
    });
    console.log(res);
    // false

every方法用于檢查數(shù)組的每一項是否符合條件，全部符合條件時返回true,否則返回false。

    var res = arr1.some((item, index) => {
        return item > 3
    });
    console.log(res);
    // true

some方法用于檢查數(shù)組中的是否存在符合條件的項，存在則返回true,否則返回false。

一副生動有趣的圖解，everyday will be better！