用JavaScript在一个数组中插入另一个数组

发表于 | 分类于 |

今天群里大神给大家出了一道思考题:

给一个数组, 将另一个数组插入其指定位置, 用ES5和ES6语法分别如何实现.

比如给数组[3,4], 要在位置1插入数组[1,2], 要得到的结果是[3,1,2,4].

说道插入,最先想到的就应该是Arrary的splice方法了.语法如下

1
array.splice(start, deleteCount[, item1[, item2[, ...]]])

这个方法会修改数组本身.
start表示数组从哪一位开始修改,超过长度则视为数组末尾,接受负数参数表示从末尾开始计数.
deleteCount表示从start开始(包括start)要删除的元素个数,超过后面元素的总数则删除后面所有.
itemN是要加进数组的元素,可以不指定.
返回值是被删除元素的数组,没有则返回空数组.

但是问题在于,要添加元素需要用参数的形式加入,如何能把数组展开成参数(迭代每次加一个显然没有充分利用这个方法).

群内的大神们给出的解答如下:
ES6中引入了一种Spread操作符...,他后面接一个Iterator对象,可以满足上面的要求.
也就是说我们可以这样解决这个问题:

1
2
3
4
5
6
7
8
9
//原数组
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.

1
2
3
4
5
6
7
8
9
//原数组
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原生对象上的一些方法,往往只需要很短的代码就能实现很多要求,需要多看,多写,多联想.