当前位置:首页 > 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实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue-r…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

vue实现js休眠

vue实现js休眠

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

js实现正交

js实现正交

正交的概念 正交在数学和计算机科学中通常指两个向量垂直或线性无关。在编程中,正交性常被用于设计模块化、低耦合的系统。 向量正交判断 判断两个向量是否正交可以通过点积是否为0来实现: functio…