JS中易混淆方法備忘錄

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

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

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

Array對(duì)象

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

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

slice()和splice()

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

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

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

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

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

題外話，

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

Array.prototype.slice.call(arguments);

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

forEach()、map()、filter()

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

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

shift()和unshift()

我不得不吐槽一下這兩個(gè)方法，因?yàn)槲医?jīng)常把它們的功能弄反了。

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

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

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

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

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

Function對(duì)象

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

call()、apply()和bind()

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

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

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

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

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

我們來(lái)看個(gè)實(shí)際的例子，

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

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

我們來(lái)看個(gè)例子，

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對(duì)象

substr()和substring()

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

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

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

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

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

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

TBC……