給一個數組, 將另一個數組插入其指定位置, 用ES5和ES6語法分別如何實現.
比如給數組[3,4], 要在位置1插入數組[1,2], 要得到的結果是[3,1,2,4].
說道插入,最先想到的就應該是Arrary的splice方法了.語法如下
array.splice(start, deleteCount[, item1[, item2[, ...]]])
但是問題在於,要添加元素需要用參數的形式加入,如何能把數組展開成參數(迭代每次加一個顯然沒有充分利用這個方法).這個方法會修改數組本身.start表示數組從哪一位開始修改,超過長度則視爲數組末尾,接受負數參數表示從末尾開始計數.deleteCount表示從start開始(包括start)要刪除的元素個數,超過後面元素的總數則刪除後面所有.itemN是要加進數組的元素,可以不指定.
返回值是被刪除元素的數組,沒有則返回空數組.
羣內的大神們給出的解答如下:
ES6中引入了一種Spread操作符...,他後面接一個Iterator對象,可以滿足上面的要求.
也就是說我們可以這樣解決這個問題:
//原數組
var a = [3,4];
//要插入的數組
var b = [1,2];
//要插入的位置
var i = 1;
//插入
a.splice(i,0,...b);
//結果 a = [3, 1, 2, 4]
而在ES5中不支持這樣的寫法,又要如何實現呢?
其實我們可以很容易聯想到我們的需求和call與apply之間的差異很像.用apply可以實現將參數用數組的方式綁定到執行的方法上面.於是,我們可以把所有需要的參數放進一個數組裏面,然後用apply.
//原數組
var a = [3,4];
//要插入的數組
var b = [1,2];
//要插入的位置
var i = 1;
//插入
a.splice.apply(a,[i,0].concat(b));
//結果 a = [3, 1, 2, 4]
結合call和apply,靈活使用JS原生對象上的一些方法,往往只需要很短的代碼就能實現很多要求,需要多看,多寫,多聯想.