当前位置:首页 > JavaScript

js实现splice

2026-03-13 20:09:03JavaScript

js实现splice

实现 splice 方法

JavaScript 的 splice 方法用于修改数组,可以删除、替换或添加元素。以下是手动实现 splice 的方法:

js实现splice

基本功能实现

function customSplice(array, start, deleteCount, ...items) {
    // 处理负数索引
    const normalizedStart = start < 0 
        ? Math.max(array.length + start, 0) 
        : Math.min(start, array.length);

    // 处理未指定 deleteCount 的情况
    const actualDeleteCount = deleteCount === undefined 
        ? array.length - normalizedStart 
        : Math.min(Math.max(0, deleteCount), array.length - normalizedStart);

    // 创建被删除元素的数组
    const deletedElements = array.slice(normalizedStart, normalizedStart + actualDeleteCount);

    // 计算需要移动的元素数量
    const elementsToMove = array.length - normalizedStart - actualDeleteCount;
    const newLength = array.length - actualDeleteCount + items.length;

    // 移动元素
    if (items.length !== actualDeleteCount) {
        // 如果添加和删除的数量不同,需要调整数组大小
        if (items.length < actualDeleteCount) {
            // 向左移动元素
            for (let i = normalizedStart + items.length; i < newLength; i++) {
                array[i] = array[i + (actualDeleteCount - items.length)];
            }
            array.length = newLength;
        } else {
            // 向右移动元素
            array.length = newLength;
            for (let i = newLength - 1; i >= normalizedStart + items.length; i--) {
                array[i] = array[i - (items.length - actualDeleteCount)];
            }
        }
    }

    // 插入新元素
    for (let i = 0; i < items.length; i++) {
        array[normalizedStart + i] = items[i];
    }

    return deletedElements;
}

使用示例

const arr = [1, 2, 3, 4, 5];
const deleted = customSplice(arr, 1, 2, 'a', 'b');
console.log(arr); // [1, "a", "b", 4, 5]
console.log(deleted); // [2, 3]

边界情况处理

  • start 为负数时,从数组末尾开始计算
  • deleteCount 为 0 或负数时,不删除任何元素
  • deleteCount 大于可删除元素数量时,只删除到数组末尾
  • start 大于数组长度时,从数组末尾开始操作
  • 可以处理任意数量的插入元素

与原生的区别

这个实现模拟了原生 splice 的核心功能,但可能在某些极端情况下表现不同。原生方法是高度优化的,而这个实现主要用于演示原理。

性能考虑

对于大型数组,这个实现可能不如原生方法高效,因为它涉及多次数组元素移动。在实际应用中,通常应优先使用原生 splice 方法。

标签: jssplice
分享给朋友:

相关文章

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以直…

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

使用js实现

使用js实现

使用JavaScript实现 JavaScript可以通过Math.random()函数生成随机数,结合其他方法可以实现多种随机数生成需求。 // 生成0到1之间的随机小数 const random…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…