JS中易混淆方法備忘錄

本篇文章將會持續(xù)更新，以便收錄將來可能會出現(xiàn)讓博主犯糊涂的方法們。。。。

Array對象是Javascript內(nèi)置的對象之一，隨著JavaScript版本標(biāo)準(zhǔn)的推進(jìn)，內(nèi)置對象開始支持越來越多的內(nèi)置方法，以前需要借助第三方工具庫，比如underscore.js或者Lo-dash.js，現(xiàn)在基本上內(nèi)置對象已經(jīng)提供了原生支持，唯一可能的瓶頸在于瀏覽器的支持廣度。

本篇文章將會簡述幾組功能相似Javascript內(nèi)置對象提供的方法的用法。當(dāng)然這些內(nèi)容去翻一下文檔完全能夠弄明白，此篇文章僅是博主自我的備忘，因為我在實際使用時，經(jīng)常會遇到一種情況，就是會混淆兩種相似的方法。

Array對象

關(guān)于Array對象，一些非常常用的方法，比如push()或者pop()之類的，就沒必要說了。這里，我將Array對象提供的方法分為兩大類，一類是遍歷類，一類是操作類。

遍歷類的方法一般都會對數(shù)組進(jìn)行遍歷操作，比如map()之類的方法，而操作類基本上就是數(shù)組進(jìn)行處理，可能會修改原數(shù)組，亦可能返回一個新數(shù)組。

slice()和splice()

啊，這是我經(jīng)常弄混淆的一組方法，經(jīng)常會將它們做的事情弄反了。

slice()，可提取數(shù)組、字符串的某個部分，而且不修改原始對象，返回新對象。原型為，

// 切片包含start但是不包含end下標(biāo)
slice(start, end);

splice()，用于插入、刪除、替換數(shù)組元素。原型為，

// 數(shù)組從 start下標(biāo)開始，刪除deleteCount 個元素，并且可以在這個位置開始添加 n個元素
splice (start, deleteCount, [item1[, item2[, . . . [,itemN]]]]);

題外話，

經(jīng)常在一些工具庫中可能會看到下面這一段代碼，

Array.prototype.slice.call(arguments);

它的作用是這樣的，利用slice方法，將類數(shù)組（Array-liked）對象轉(zhuǎn)變成真正的數(shù)組。

forEach()、map()、filter()

這些具有遍歷屬性的方法，有一個重要的區(qū)別標(biāo)準(zhǔn)，就是每次迭代是否返回一個值，最終這些返回值組成一個新的數(shù)組。

forEach()方法就是簡單的遍歷數(shù)組元素，而map()和filter()方法每次迭代將會返回一個值，然后最終根據(jù)返回的值組合生成一個新的數(shù)組。

shift()和unshift()

我不得不吐槽一下這兩個方法，因為我經(jīng)常把它們的功能弄反了。

shift()，作用是移除原數(shù)組的第一個數(shù)組元素。其返回值就是那個被移除的元素。

而unshift()的作用恰好相反，它是往數(shù)組的頭部添加元素，而且可以一次性添加多個，其原型如下

arr.unshift([element1[, ...[, elementN]]])

其返回值為添加了新元素之后的數(shù)組長度。

需要注意的是，這兩個方法都會直接對原數(shù)組進(jìn)行修改。

Function對象

Function對象中的方法不是很多，但是卻非常有用。

call()、apply()和bind()

這三個方法的作用類似，都可以重新綁定函數(shù)執(zhí)行時的上下文（this變量的指向）。不過有些細(xì)節(jié)上的區(qū)別。

call()函數(shù)的原型如下，

// 第一個參數(shù)為`this`變量的指向，后面為函數(shù)的實際參數(shù)
fun.call(thisArg[, arg1[, arg2[, ...]]])

apply()函數(shù)的原型如下，

// 第一個參數(shù)為`this`變量的指向，函數(shù)的實際參數(shù)將會組合起來呈一個數(shù)組的形式進(jìn)行傳遞
fun.apply(thisArg, [argsArray])

我們來看個實際的例子，

var data = {
    name: 'erik',
    getName: function(funcName) {
        return this.name + ', funcName: ' + funcName;
    }
};
var self = {
    name: 'gejiawen'
};
console.log(data.getName('null')); // erik, funcName: null
console.log(data.getName.call(self, 'call')); // gejiawen, funcName: call
console.log(data.getName.apply(self, ['apply'])); // gejiawen, funcName: apply

說完了call()和apply()，我們再來說一下bind()。bind()也擁有和call()和apply()類似的功能，就是重新定義函數(shù)執(zhí)行時的上下文。但是除此之外bind()還有另外一個功能，它將返回一個函數(shù)引用（匿名函數(shù)）而不是立即執(zhí)行函數(shù)。

我們來看個例子，

var name = 'gejiawen';
var data = {
    name: 'erik',
    getName: function() {
        return this.name;
    }
};
var gn = data.getName.bind(this);
console.log(typeof gn); // function
console.log(gn()); // gejiawen
console.log(data.getName.bind(data)()); // erik

String對象

substr()和substring()

這兩個函數(shù)做的事情都是在一個字符串截取一段子串并返回，不過截取策略不太一致。

substr()函數(shù)的原型如下，

// 給出一個開始位置和截取的長度，若不提供長度參數(shù)，則默認(rèn)截取到原字符串的結(jié)尾
str.substr(start[, length])

substring()字符串的原型如下，

// 給出一個開始下標(biāo)和一個結(jié)束小標(biāo)，截取開始和結(jié)束之間的長度，包括開始但是不包括結(jié)尾；若不提供結(jié)束參數(shù)，則默認(rèn)截取到原字符串的結(jié)尾
str.substring(indexA[, indexB])

針對substring()函數(shù)還有個有趣的地方，如果結(jié)束參數(shù)大于開始參數(shù)，那么substring()內(nèi)部會自動將兩者交換，即str.substring(1, 0) == str.substring(0, 1)。

TBC……