当前位置:首页 > JavaScript

js slice实现

2026-03-13 19:11:13JavaScript

slice 方法的基本用法

slice() 是 JavaScript 数组的一个内置方法,用于提取数组的一部分并返回一个新数组,而不修改原数组。它可以接受两个参数:起始索引和结束索引(不包括结束索引本身)。

js slice实现

语法:

js slice实现

array.slice(start, end)
  • start:可选参数,表示提取的起始索引(从 0 开始)。如果为负数,则表示从数组末尾开始计算。
  • end:可选参数,表示提取的结束索引(不包括该索引)。如果为负数,则表示从数组末尾开始计算。

示例:

const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];

// 提取索引 1 到 3(不包括 3)
const sliced1 = fruits.slice(1, 3); // ['banana', 'orange']

// 从索引 2 开始提取到末尾
const sliced2 = fruits.slice(2); // ['orange', 'grape', 'kiwi']

// 使用负数索引
const sliced3 = fruits.slice(-3, -1); // ['orange', 'grape']

实现自定义 slice 方法

以下是手动实现 slice 功能的代码示例:

function customSlice(array, start, end) {
  const length = array.length;
  let result = [];

  // 处理 start 参数
  start = start === undefined ? 0 : start;
  start = start < 0 ? Math.max(length + start, 0) : Math.min(start, length);

  // 处理 end 参数
  end = end === undefined ? length : end;
  end = end < 0 ? Math.max(length + end, 0) : Math.min(end, length);

  // 提取元素
  for (let i = start; i < end; i++) {
    result.push(array[i]);
  }

  return result;
}

// 测试
const arr = [1, 2, 3, 4, 5];
console.log(customSlice(arr, 1, 3)); // [2, 3]
console.log(customSlice(arr, -3, -1)); // [3, 4]

注意事项

  • slice 不会修改原数组,而是返回一个新数组。
  • 如果省略 end 参数,则提取到数组末尾。
  • 负数索引表示从数组末尾开始计算(例如,-1 表示最后一个元素)。
  • 如果 start 大于或等于 end,返回空数组。

类似方法对比

  • splice():会修改原数组,并可以删除或添加元素。
  • concat():用于合并数组,不涉及索引截取。
  • substring()substr():字符串的类似方法,但与数组的 slice 行为不同。

标签: jsslice
分享给朋友:

相关文章

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js实现全屏

js实现全屏

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

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(f…

利用js实现

利用js实现

使用 JavaScript 实现 在 JavaScript 中,可以通过多种方式实现功能,具体取决于需求。以下是几种常见的方法: 方法一:使用原生 JavaScript // 示例代码 funct…

js实现交换

js实现交换

交换变量的方法 在JavaScript中,交换两个变量的值有多种方法。以下是常见的几种实现方式: 使用临时变量 通过引入一个临时变量来存储其中一个变量的值,实现交换: let a = 1; le…