ECMAScript Array slice()、splice()操作方法

ECMAScript為操作已經(jīng)包含在數(shù)組中的項(xiàng)提供了很多方法。其中，concat()方法可以基于當(dāng)前數(shù)組中的所有項(xiàng)創(chuàng)建一個(gè)新數(shù)組。具體來(lái)說(shuō)，這個(gè)方法會(huì)先創(chuàng)建當(dāng)前數(shù)組一個(gè)副本，然后將接收到的參數(shù)添加到這個(gè)副本的末尾，最后返回新構(gòu)建的數(shù)組。在沒(méi)有給concat()方法傳遞參數(shù)的情況下，它只是復(fù)制當(dāng)前數(shù)組并返回副本。如果傳遞給concat()方法的是一或多個(gè)數(shù)組，則該方法會(huì)將這些數(shù)組中的每一項(xiàng)都添加到結(jié)果數(shù)組中。如果傳遞的值不是數(shù)組，這些值就會(huì)被簡(jiǎn)單地添加到結(jié)果數(shù)組的末尾。下面來(lái)看一個(gè)例子：

var colors= ["red", "green", "blue"];

var colors2=colors. concat( "yellow", ["black", "brown"]);

南昌網(wǎng)絡(luò)公司工程師提醒,如果想要按照升級(jí)排序，則compare()函數(shù)中的return語(yǔ)句應(yīng)該返回value2 - valuel。

alert (colors); //red, green, blue

alert( colors2); //red, green, blue,yellow, black, brown

以上代碼開(kāi)始定義了一個(gè)包含3個(gè)值的數(shù)組colors。然后，基于colors調(diào)用了concat()方法，并傳人字符串"yellow"和一個(gè)包含"black"和"brown"的數(shù)組。最終，結(jié)果數(shù)組colors2中包含了"red"、"green"、"blue"、"yellow"、"black"和"brown"。至于原來(lái)的數(shù)組colors，其值仍然保持不變。

下一個(gè)方法是slice()，它能夠基于當(dāng)前數(shù)組中的一或多個(gè)項(xiàng)創(chuàng)建一個(gè)新數(shù)組。slice()方法可以接受一或兩個(gè)參數(shù)，即要返回項(xiàng)的起始和結(jié)束位置。在只有一個(gè)參數(shù)的情況下，slice()方法返回從該參數(shù)指定位置開(kāi)始到當(dāng)前數(shù)組末尾的所有項(xiàng)。如果有兩個(gè)參數(shù)，該方法返回起始和結(jié)束位置之間的項(xiàng)——但不包括結(jié)束位置的項(xiàng),南昌網(wǎng)頁(yè)設(shè)計(jì)公司工程師提醒,注意,slice()方法不會(huì)影響原始數(shù)組。請(qǐng)看下面的例子：

var colors = ["red","green","blue","yellow","purple"];

var colors2=colors.slice(1);

var colors3=colors.slice(1,4);

alert( colors2); //green,blue,yellow,purple

alert( colors3); //green,blue,yellow

在這個(gè)例子中，開(kāi)始定義的數(shù)組colors包含5項(xiàng)。調(diào)用slice()并傳人1會(huì)得到一個(gè)包含4項(xiàng)的新數(shù)組;因?yàn)槭菑奈恢?開(kāi)始復(fù)制，所以會(huì)包含"green"而不會(huì)包含"red"。這個(gè)新數(shù)組colors2中包含的是"green"、"blue"、"yellow"和"purple"。接著，我們?cè)俅握{(diào)用slice()并傳入了1和4，表示復(fù)制從位置1開(kāi)始，到位置3結(jié)束。結(jié)果數(shù)組colors3中包含了"green"、"blue"和"yellow"。

南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)前端開(kāi)發(fā)工程師提醒廣大站長(zhǎng)及從事企業(yè)網(wǎng)站建設(shè)開(kāi)發(fā)技術(shù)人員,如果slice()方法的參數(shù)中有一個(gè)負(fù)數(shù),則用數(shù)組長(zhǎng)度加上該數(shù)來(lái)確定相應(yīng)的位置.例如,在一個(gè)包含5項(xiàng)的數(shù)組上調(diào)用slice(-2,-1)與調(diào)用slice(3,4)得到的結(jié)果相同.如果結(jié)束位置小于起始位置,則返回空數(shù)組.

下面我們來(lái)介紹splice()方法，這個(gè)方法恐怕要算是最強(qiáng)大的數(shù)組方法了，它有很多種用法。

splice()的主要用途是向數(shù)組的中部插入項(xiàng)，但使用這種方法的方式則有如下3種。

刪除——可以刪除任意數(shù)量的項(xiàng)，只需指定2個(gè)參數(shù)：要?jiǎng)h除的第一項(xiàng)的位置和要?jiǎng)h除的項(xiàng)數(shù)。例如，splice(O，2)會(huì)刪除數(shù)組中的前兩項(xiàng)。

插入——可以向指定位置插入任意數(shù)量的項(xiàng)，只需提供3個(gè)參數(shù)：起始位置、0(要?jiǎng)h除的項(xiàng)數(shù))和要插入的項(xiàng)。如果要插入多個(gè)項(xiàng)，可以再傳人第四、第五，以至任意多個(gè)項(xiàng)。例如， splice(2，o，"red"，"green")會(huì)從當(dāng)前數(shù)組的位置2開(kāi)始插入字符串"red"和"green"。

替換——可以向指定位置插入任意數(shù)量的項(xiàng)，且同時(shí)刪除任意數(shù)量的項(xiàng)，只需指定3個(gè)參數(shù)：起始位置、要?jiǎng)h除的項(xiàng)數(shù)和要插入的任意數(shù)量的項(xiàng)。插入的項(xiàng)數(shù)不必與刪除的項(xiàng)數(shù)相等。例如，splice(2，l，"red"，ugreen")會(huì)刪除當(dāng)前數(shù)組位置2的項(xiàng)，然后再?gòu)奈恢?開(kāi)始插入字符串"red"和"green"。

splice()方法始終都會(huì)返回一個(gè)數(shù)組，該數(shù)組中包含從原始數(shù)組中刪除的項(xiàng)(如果沒(méi)有刪除任何項(xiàng)，則返回一個(gè)空數(shù)組)。下面的代碼展示了上述3種使用splice()方法的方式：

var colors=["redn, "green", "blue"];

var removed=colors.splice(O，1); //刪除第一項(xiàng)

alert (colors); //green,blue

alert (removed); //red，返回的數(shù)組中只包含一項(xiàng)

removed=colors.splice(1，0，"yellow"， "orange"); //從位置1開(kāi)始插入兩項(xiàng)

alert (colors); //green,yellow, orange,blue

alert( removed); //返回的是一個(gè)空數(shù)組

removed=colors.splice(1，l，"red"，"purple"); //插入兩項(xiàng)，刪除一項(xiàng)

alert (colors); //green, red, purple, orange. blue

alert( removed); //yellow，返回的數(shù)組中只包含一項(xiàng)

上面的例子首先定義了一個(gè)包含3項(xiàng)的數(shù)組colors。第一次調(diào)用splice()方法只是刪除了這個(gè)數(shù)組的第一項(xiàng)，之后colors還包含"green"和"blue"兩項(xiàng)。第二次調(diào)用splice()方法時(shí)在位置1插入了兩項(xiàng)，結(jié)果colors中包含"green"、"yellow"、"orange"和nblue"。這一次操作沒(méi)有刪除項(xiàng)，因此返回了一個(gè)空數(shù)組。最后一次調(diào)用splice()方法刪除了位置1處的一項(xiàng)，然后又插入了"red"和"purple"。在完成以上操作之后，數(shù)組colors中包含的是"green"、"red"、"purple"、"orange"和"blue"。

希望本文對(duì)廣大站長(zhǎng)或從事企業(yè)網(wǎng)站建設(shè)公司的團(tuán)隊(duì)有所幫助，如對(duì)此不太理解的，可以與南昌做網(wǎng)站公司百恒網(wǎng)絡(luò)技術(shù)部聯(lián)系。我們很高興與廣大站長(zhǎng)和從事企業(yè)網(wǎng)站建設(shè)公司技術(shù)人員分享我們的技術(shù)和經(jīng)驗(yàn)。