js入门之基础计算api--splice的底层源码实现

83 阅读 0 评论 55 点赞

我是靠谱客的博主纯情缘分，最近开发中收集的这篇文章主要介绍js入门之基础计算api--splice的底层源码实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

作为刚刚进入前端的一个小小菜鸟在初步学习js之后就想着先用原生开发将js中的基础计算api进行实现
splice函数中有的功能包括了删除一个或者多个,以及删除之后进行替换的功能.在这里就进行一些逻辑上的分享.
首先在函数运行的时候对数组进行操作例如[1,2,3,4,5,6,7,8,]若果进行splice(2,3,‘a’)调用的话,最后结果就是[1,2,‘a’,6,7,8]就是从数组的下标开始进行3个数组的元素的删除,然后将字符串a插入其中;
我第一次想的逻辑就是先进行删除就是需要删除的元素与最后一位的元素进行调换位置,然后使用数组.length- 1的方式实现,但是这里产生了一个问题,就是删除之后数组的顺序产生了改变以及数组的插入该如何实现;所以采用了另外一个逻辑;
从需要删除的元素开始,将所有需要删除的元素赋值为undefined,因为在js的代码逻辑里,undefined的值判定为false其余所有的数字(除0以外)字符串都是true,这样就方便我们判定然后将第一个undefined值前面的数组保存下来为before以及最后一个undefined值后面的数组保存下来为last,如果需要插入元素的时候使用appendchild()就可以将元素插入到最后一个,如果不想使用任何函数纯原生开发的话就是元素=数组.length实现插入再将last中的元素遍历之后一一插入before中方式如同前面一致.
下面就是代码的实现`


// 实现实现splice数组的删除
let array = [1, 2, 3, 4, 5]
//进行数组与原函数的对比
array.splice(2, 3, 'a')
console.log(array);
function SpliceArr(arr, index, length, element) {
let beforeArr = [];
let lastArr = [];
let lastArray = [];
for (i = 0; i < length; i++) {
arr[index + i] = undefined;//将所有需要删除的数组值转化为undefined
}
console.log(arr);
//进行数组的拆分保存
for (i = 0; i < arr.length; i++) {
if (arr[i]) {
beforeArr[i] = arr[i]
} else break;
}
if (arr[index] == undefined) {
for (i = index; i < arr.length - 1; i++)
lastArr[lastArr.length] = arr[i + length]
}
console.log(beforeArr);
console.log(lastArr);
//现在插入元素
beforeArr.push(element)
lastArr.forEach(function (item) {
beforeArr.push(item)
})
beforeArr.forEach(function (item) {
if (item) {
lastArray[lastArray.length] = item
}
})
return lastArray;
}
console.log(SpliceArr(array, 2, 3, 'a'));

`
这里面还是有一些bug的比如前面所说的在js中数字0转化为布尔类型的时候也会变成false这样在前面的判定中就是讲原有数组中元素值为0的同步转化,这里做安全处理的话就是增加一个条件