当前位置:首页 > 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验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js实现瀑布流

js实现瀑布流

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

vue实现js休眠

vue实现js休眠

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

js怎么实现异步

js怎么实现异步

异步实现方法 JavaScript中实现异步操作主要通过以下几种方式: Promise Promise是ES6引入的异步解决方案,用于处理异步操作的成功或失败状态。 const promise =…