百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT技术 > 正文

深度解析 JavaScript 数组方法:自定义实现 slice

wptr33 2025-03-20 20:08 21 浏览

大家好,很高兴又见面了,我是姜茶的编程笔记,我们一起学习前端相关领域技术,共同进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力

在 JavaScript 中,Array.prototype.slice 方法用于从一个数组中返回一个浅拷贝的子数组。为了更好地理解这个方法的内部机制,我们将从零开始实现一个自定义的 slice 方法,并逐步解析其实现步骤。

手搓 slice 方法

slice 方法会返回数组的一个子数组。以下是我们自定义实现的 slice 方法的代码:

Array.prototype.mySlice = function(start, end) {
  // 将传入的数组转换为对象
  if (this == null) {
    throw new TypeError('Array.prototype.mySlice called on null or undefined');
  }

  const O = Object(this);
  const len = O.length >>> 0;

  // 设置默认值
  const relativeStart = start >> 0;
  const relativeEnd = (end === undefined) ? len : end >> 0;

  const k = Math.max(relativeStart >= 0 ? relativeStart : len + relativeStart, 0);
  const final = Math.min(relativeEnd >= 0 ? relativeEnd : len + relativeEnd, len);

  const count = Math.max(final - k, 0);
  const A = new Array(count);

  for (let n = 0; n < count; n++) {
    const from = k + n;
    if (from in O) {
      A[n] = O[from];
    }
  }

  return A;
};

解析实现步骤

1. 检查数组是否为 nullundefined

确保 this 不为空:

if (this == null) {
  throw new TypeError('Array.prototype.mySlice called on null or undefined');
}

2. 将 this 转换为对象,并获取数组长度

this 转换为对象并获取数组长度:

const O = Object(this);
const len = O.length >>> 0;

3. 设置默认值并处理负索引

处理 startend 参数,支持负索引:

const relativeStart = start >> 0;
const relativeEnd = (end === undefined) ? len : end >> 0;

const k = Math.max(relativeStart >= 0 ? relativeStart : len + relativeStart, 0);
const final = Math.min(relativeEnd >= 0 ? relativeEnd : len + relativeEnd, len);

4. 计算需要提取的元素数量,并创建新数组

计算子数组的长度,并初始化一个新数组 A 来存储结果:

const count = Math.max(final - k, 0);
const A = new Array(count);

5. 将元素复制到新数组

使用 for 循环将元素从原数组复制到新数组 A

for (let n = 0; n < count; n++) {
  const from = k + n;
  if (from in O) {
    A[n] = O[from];
  }
}

6. 返回新数组

返回新数组 A

return A;

示例使用

下面是一个示例,展示如何使用自定义的 mySlice 方法:

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.mySlice(1, 3);

console.log(slicedArr); // 输出 [2, 3]

在这个示例中,我们使用 mySlice 方法提取了数组的一部分,并返回了 [2, 3],这与原生 slice 方法的行为一致。

实用小技巧:从数组中提取最后几个元素

你可以使用 slice 方法轻松地从数组中提取最后几个元素。例如,提取数组的最后两个元素:

const arr = [1, 2, 3, 4, 5];
const lastTwo = arr.mySlice(-2);

console.log(lastTwo); // 输出 [4, 5]

通过这种方式,我们可以灵活地从数组中提取需要的部分,简化数组操作过程。

最后

通过实现自定义的 slice 方法,我们深入理解了 JavaScript 中数组的操作方式。相信你也可以更好地掌握 slice 方法的内部机制,并提升你的 JavaScript 编程技巧。如果你有任何问题或建议,欢迎在评论区留言交流!祝你编程愉快!

相关推荐

什么是Java中的继承?如何实现继承?

什么是继承?...

Java 继承与多态:从基础到实战的深度解析

在面向对象编程(OOP)的三大支柱中,继承与多态是构建灵活、可复用代码的核心。无论是日常开发还是框架设计,这两个概念都扮演着至关重要的角色。本文将从基础概念出发,结合实例与图解,带你彻底搞懂Java...

Java基础教程:Java继承概述_java的继承

继承概述假如我们要定义如下类:学生类,老师类和工人类,分析如下。学生类属性:姓名,年龄行为:吃饭,睡觉老师类属性:姓名,年龄,薪水行为:吃饭,睡觉,教书班主任属性:姓名,年龄,薪水行为:吃饭,睡觉,管...

java4个技巧:从继承和覆盖,到最终的类和方法

日复一日,我们编写的大多数Java只使用了该语言全套功能的一小部分。我们实例化的每个流以及我们在实例变量前面加上的每个@Autowired注解都足以完成我们的大部分目标。然而,有些时候,我们必须求助于...

java:举例说明继承的概念_java继承的理解

在现实生活中,继承一般指的是子女继承父辈的财产。在程序中,继承描述的是事物之间的所属关系,通过继承可以使多种事物之间形成一种关系体系。例如猫和狗都属于动物,程序中便可以描述为猫和狗继承自动物,同理,...

从零开始构建一款开源的 Vibe Coding 产品 Week1Day4:业界调研之 Agent 横向对比

前情回顾前面两天我们重点调研了了一下Cursor的原理和Cursor中一个关键的工具edit_file的实现,但是其他CodingAgent也需要稍微摸一下底,看看有没有优秀之处,下...

学会这几个插件,让你的Notepad++使用起来更丝滑

搞程序开发的小伙伴相信对Notepad++都不会陌生,是一个占用空间少、打开启动快的文件编辑器,很多程序员喜欢使用Notepad++进行纯文本编辑或者脚本开发,但是Notepad++的功能绝不止于此,...

将 node_modules 目录放入 Git 仓库的优点

推荐一篇文章Whyyoushouldcheck-inyournodedependencies[1]...

再度加码AI编程,腾讯发布AI CLI并宣布CodeBuddy IDE开启公测

“再熬一年,90%的程序员可能再也用不着写for循环。”凌晨两点半,王工还在公司敲键盘。他手里那份需求文档写了足足六页,产品经理反复改了三次。放在过去,光数据库建表、接口对接、单元测试就得写两三天。现...

git 如何查看stash的内容_git查看ssh key

1.查看Stash列表首先,使用gitstashlist查看所有已保存的stash:...

6万星+ Git命令懒人必备!lazygit 终端UI神器,效率翻倍超顺手!

项目概览lazygit是一个基于终端的Git命令可视化工具,通过简易的TUI(文本用户界面)提升Git操作效率。开发者无需记忆复杂命令,即可完成分支管理、提交、合并等操作。...

《Gemini CLI 实战系列》(一)Gemini CLI 入门:AI 上命令行的第一步

谷歌的Gemini模型最近热度很高,而它的...

deepin IDE新版发布:支持玲珑构建、增强AI智能化

IT之家8月7日消息,深度操作系统官方公众号昨日(8月6日)发布博文,更新推出新版deepin集成开发环境(IDE),重点支持玲珑构建。支持玲珑构建deepinIDE在本次重磅更...

狂揽82.7k的star,这款开源可视化神器,轻松创建流程图和图表

再不用Mermaid,你的技术文档可能已经在悄悄“腐烂”——图表版本对不上、同事改完没同步、评审会上被一句“这图哪来的”问得哑口无言。这不是危言耸听。GitHub2025年开发者报告显示,63%的新仓...

《Gemini CLI 实战系列》(五)打造专属命令行工具箱

在前几篇文章中,我们介绍了GeminiCLI的基础用法、效率提升、文件处理和与外部工具结合。今天我们进入第五篇...