当前位置:首页 > 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实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时功能可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是几种常见的实现方式: 使用 setInterva…

js 实现链表

js 实现链表

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和指向下一个节点的指针。与数组不同,链表在内存中是非连续存储的,插入和删除操作效率较高。 链表的实现 在 JavaScrip…

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…

js画图实现

js画图实现

使用Canvas API绘制图形 Canvas是HTML5提供的绘图API,通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例: <canvas id="myC…

js实现授权

js实现授权

授权流程设计 授权流程通常涉及前端与后端的交互,常见方案包括OAuth2.0、JWT等。以JWT为例的典型流程: 用户提交凭证(如用户名密码)到认证服务 服务端验证通过后生成包含用户信息的JWT令牌…

js实现图片

js实现图片

图片加载与显示 在JavaScript中,可以通过Image对象动态加载图片。创建实例后设置src属性触发加载,通过onload回调处理加载完成后的操作: const img = new Ima…