当前位置:首页 > JavaScript

js slice实现

2026-03-13 19:11:13JavaScript

slice 方法的基本用法

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

语法:

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 功能的代码示例:

js 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实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https://…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js实现类

js实现类

JavaScript 实现类的几种方式 JavaScript 是一种基于原型的语言,但在 ES6 之后引入了 class 语法糖,使得实现类更加直观。以下是几种常见的实现方式: 使用构造函数 传统的…

js实现瀑布流

js实现瀑布流

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

js实现抽奖

js实现抽奖

实现抽奖功能的基本思路 抽奖功能的核心是随机选择奖项并展示结果。可以通过数组存储奖项,利用随机数生成索引,最后通过动画增强用户体验。 准备奖项数据 定义一个数组存储奖项信息,每个奖项可以包含名称、图…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…