当前位置:首页 > JavaScript

js实现splice

2026-01-31 22:05:56JavaScript

js实现splice

js实现splice

实现 JavaScript 的 splice 方法

Array.prototype.splice 是 JavaScript 中用于修改数组的原生方法,它可以实现删除、插入或替换数组元素。以下是手动实现 splice 的核心逻辑:

功能概述

  • 删除元素:从指定索引开始删除一定数量的元素。
  • 插入元素:在指定索引处插入新元素。
  • 替换元素:删除旧元素并插入新元素。
  • 返回值:返回被删除的元素组成的数组。

实现代码

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

    // 处理未指定 deleteCount 的情况
    const normalizedDeleteCount = Math.min(
        Math.max(Number(deleteCount) || 0, 0),
        array.length - normalizedStart
    );

    const deletedElements = array.slice(
        normalizedStart, 
        normalizedStart + normalizedDeleteCount
    );

    // 分割数组:前段、待删除段、后段
    const before = array.slice(0, normalizedStart);
    const after = array.slice(normalizedStart + normalizedDeleteCount);

    // 合并前段、新插入元素、后段
    const newArray = [...before, ...items, ...after];

    // 修改原数组
    array.length = 0;
    array.push(...newArray);

    return deletedElements;
}

参数说明

  • array:目标数组(需手动传入,模拟原生方法)。
  • start:开始操作的索引(支持负数)。
  • deleteCount:要删除的元素数量(可选)。
  • ...items:要插入的新元素(可选)。

边界处理

  • 负数索引会从数组末尾计算。
  • deleteCount 未提供或为 0,仅插入元素。
  • deleteCount 超出可删除范围,仅删除至数组末尾。

使用示例

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]

与原生的区别

  1. 原生 splice 是数组方法,此实现需手动传入数组。
  2. 此实现通过重新构建数组实现修改,而非直接操作原数组内存(仅演示逻辑)。

通过此实现可以深入理解 splice 的内部机制,适用于学习或特殊场景定制。

标签: jssplice
分享给朋友:

相关文章

js实现打印

js实现打印

使用window.print()方法实现打印 在JavaScript中,可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框,用户可以选择打印机和设置打印选项…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 /…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

js实现投球

js实现投球

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

js实现跑马灯

js实现跑马灯

实现跑马灯效果 使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式: HTML结构 <div id="marquee"> <span>…

js实现显示隐藏

js实现显示隐藏

显示隐藏的实现方法 在JavaScript中,实现元素的显示和隐藏可以通过多种方式完成。以下是几种常见的方法: 修改CSS的display属性 通过改变元素的display属性可以在none(隐藏)…