当前位置:首页 > JavaScript

js slice实现

2026-04-05 13:27:30JavaScript

slice 方法的基本用法

slice 是 JavaScript 数组和字符串的一个内置方法,用于提取部分内容并返回一个新数组或字符串,不改变原数组或字符串。以下是具体用法:

数组的 slice 方法
语法:array.slice(startIndex, endIndex)

  • startIndex:开始提取的索引(包含),默认为 0。
  • endIndex:结束提取的索引(不包含),默认为数组长度。
  • 返回从 startIndexendIndex(不含)的新数组。
const arr = [1, 2, 3, 4, 5];
const subArr = arr.slice(1, 4); // [2, 3, 4]

字符串的 slice 方法
语法:string.slice(startIndex, endIndex)
参数与数组类似,返回提取的子字符串。

const str = "Hello, world!";
const subStr = str.slice(0, 5); // "Hello"

负索引和默认值

  • 负索引:表示从末尾开始计算。例如,-2 表示倒数第二个元素。
  • 省略参数
    • 省略 endIndex:提取到末尾。
    • 省略所有参数:返回完整副本。
const arr = [1, 2, 3, 4, 5];
arr.slice(-3);    // [3, 4, 5]
arr.slice(1);     // [2, 3, 4, 5]
arr.slice();      // [1, 2, 3, 4, 5](浅拷贝)

实现自定义 slice 方法

以下是一个模拟 slice 功能的实现(以数组为例):

js slice实现

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

  // 处理 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, 4)); // [2, 3, 4]

关键点说明

  • 边界处理:确保 startend 在合理范围内(非负且不超过数组长度)。
  • 浅拷贝slice 返回的新数组是浅拷贝,嵌套对象或数组仍共享引用。
  • 字符串实现:字符串的 slice 类似,但需通过字符索引提取子串。

通过以上方法,可以灵活提取数组或字符串的子集,适用于分割、复制等场景。

标签: jsslice
分享给朋友:

相关文章

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 使用JavaScript实现拖拽功能需要监听鼠标事件,包括mousedown、mousemove和mouseup。以下是实现的基本逻辑: const draggableEleme…

vue实现js休眠

vue实现js休眠

Vue 中实现 JavaScript 休眠 在 Vue 中实现 JavaScript 休眠通常需要使用异步方式,以避免阻塞主线程。以下是几种常见方法: 使用 setTimeout 和 Promise…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js实现dh

js实现dh

JavaScript 实现 DH(Diffie-Hellman)密钥交换 Diffie-Hellman(DH)密钥交换是一种安全协议,允许双方在不安全的通信信道上建立一个共享密钥。以下是如何在 Jav…

js实现授权

js实现授权

授权流程设计 授权流程通常涉及前端与后端的交互,常见方案包括OAuth2.0、JWT等。以JWT为例的典型流程: 用户提交凭证(如用户名密码)到认证服务 服务端验证通过后生成包含用户信息的J…

js实现正交

js实现正交

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