当前位置:首页 > JavaScript

js splice实现

2026-04-06 21:33:13JavaScript

splice 方法的基本概念

JavaScript 的 splice() 方法用于修改数组,可以删除、替换或添加元素。该方法会直接修改原数组,并返回被删除的元素组成的数组。

语法

array.splice(start, deleteCount, item1, item2, ...)
  • start:指定修改的起始位置(从 0 开始)。如果为负数,表示从数组末尾开始计算。
  • deleteCount(可选):要删除的元素个数。如果为 0 或省略,则不删除元素。
  • item1, item2, ...(可选):要添加到数组的元素,从 start 位置开始插入。

使用示例

删除元素

const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(1, 2); // 从索引 1 开始删除 2 个元素
console.log(arr); // [1, 4, 5]
console.log(removed); // [2, 3]

替换元素

const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(1, 2, 'a', 'b'); // 从索引 1 开始删除 2 个元素,并插入 'a' 和 'b'
console.log(arr); // [1, 'a', 'b', 4, 5]
console.log(removed); // [2, 3]

添加元素

const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 0, 'a', 'b'); // 从索引 2 开始插入 'a' 和 'b',不删除元素
console.log(arr); // [1, 2, 'a', 'b', 3, 4, 5]
console.log(removed); // []

实现一个简单的 splice

以下是 splice 方法的一个简化实现:

js splice实现

function customSplice(array, start, deleteCount, ...items) {
    const deleted = [];
    const startIdx = start < 0 ? Math.max(array.length + start, 0) : Math.min(start, array.length);
    const actualDeleteCount = Math.min(deleteCount, array.length - startIdx);

    // 收集被删除的元素
    for (let i = 0; i < actualDeleteCount; i++) {
        deleted.push(array[startIdx + i]);
    }

    // 移动剩余元素
    const remaining = array.length - startIdx - actualDeleteCount;
    if (items.length < actualDeleteCount) {
        // 新元素比删除的元素少,需要向前移动
        for (let i = 0; i < remaining; i++) {
            array[startIdx + items.length + i] = array[startIdx + actualDeleteCount + i];
        }
        array.length = array.length - (actualDeleteCount - items.length);
    } else if (items.length > actualDeleteCount) {
        // 新元素比删除的元素多,需要向后移动
        for (let i = remaining - 1; i >= 0; i--) {
            array[startIdx + items.length + i] = array[startIdx + actualDeleteCount + i];
        }
    }

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

    return deleted;
}

注意事项

  1. 原数组修改splice 会直接修改原数组,使用时需注意。
  2. 负索引start 可以为负数,表示从数组末尾开始计算。
  3. 边界情况start 超出数组长度时,会从数组末尾开始操作;deleteCount 为 0 或负数时,不删除元素。

通过以上示例和实现,可以更好地理解 splice 方法的工作原理和用法。

标签: jssplice
分享给朋友:

相关文章

js实现全屏

js实现全屏

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

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js 实现vue

js 实现vue

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

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…