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

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

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

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

在 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 编程技巧。如果你有任何问题或建议,欢迎在评论区留言交流!祝你编程愉快!

相关推荐

每天一个编程技巧!掌握这7个神技,代码效率飙升200%

“同事6点下班,你却为改BUG加班到凌晨?不是你不努力,而是没掌握‘偷懒’的艺术!本文揭秘谷歌工程师私藏的7个编程神技,每天1分钟,让你的代码从‘能用’变‘逆天’。文末附《Python高效代码模板》,...

Git重置到某个历史节点(Sourcetree工具)

前言Sourcetree回滚提交和重置当前分支到此次提交的区别?回滚提交是指将改动的代码提交到本地仓库,但未推送到远端仓库的时候。...

git工作区、暂存区、本地仓库、远程仓库的区别和联系

很多程序员天天写代码,提交代码,拉取代码,对git操作非常熟练,但是对git的原理并不甚了解,借助豆包AI,写个文章总结一下。Git的四个核心区域(工作区、暂存区、本地仓库、远程仓库)是版本控制的核...

解锁人生新剧本的密钥:学会让往事退场

开篇:敦煌莫高窟的千年启示在莫高窟321窟的《降魔变》壁画前,讲解员指着斑驳色彩说:"画师刻意保留了历代修补痕迹,因为真正的传承不是定格,而是流动。"就像我们的人生剧本,精彩章节永远...

Reset local repository branch to be just like remote repository HEAD

技术背景在使用Git进行版本控制时,有时会遇到本地分支与远程分支不一致的情况。可能是因为误操作、多人协作时远程分支被更新等原因。这时就需要将本地分支重置为与远程分支的...

Git恢复至之前版本(git恢复到pull之前的版本)

让程序回到提交前的样子:两种解决方法:回退(reset)、反做(revert)方法一:gitreset...

如何将文件重置或回退到特定版本(怎么让文件回到初始状态)

技术背景在使用Git进行版本控制时,经常会遇到需要将文件回退到特定版本的情况。可能是因为当前版本出现了错误,或者想要恢复到之前某个稳定的版本。Git提供了多种方式来实现这一需求。...

git如何正确回滚代码(git命令回滚代码)

方法一,删除远程分支再提交①首先两步保证当前工作区是干净的,并且和远程分支代码一致$gitcocurrentBranch$gitpullorigincurrentBranch$gi...

[git]撤销的相关命令:reset、revert、checkout

基本概念如果不清晰上面的四个概念,请查看廖老师的git教程这里我多说几句:最开始我使用git的时候,我并不明白我为什么写完代码要用git的一些列指令把我的修改存起来。后来用多了,也就明白了为什么。gi...

利用shell脚本将Mysql错误日志保存到数据库中

说明:利用shell脚本将MYSQL的错误日志提取并保存到数据库中步骤:1)创建数据库,创建表CreatedatabaseMysqlCenter;UseMysqlCenter;CREATET...

MySQL 9.3 引入增强的JavaScript支持

MySQL,这一广泛采用的开源关系型数据库管理系统(RDBMS),发布了其9.x系列的第三个更新版本——9.3版,带来了多项新功能。...

python 连接 mysql 数据库(python连接MySQL数据库案例)

用PyMySQL包来连接Python和MySQL。在使用前需要先通过pip来安装PyMySQL包:在windows系统中打开cmd,输入pipinstallPyMySQL ...

mysql导入导出命令(mysql 导入命令)

mysql导入导出命令mysqldump命令的输入是在bin目录下.1.导出整个数据库  mysqldump-u用户名-p数据库名>导出的文件名  mysqldump-uw...

MySQL-SQL介绍(mysql sqlyog)

介绍结构化查询语言是高级的非过程化编程语言,允许用户在高层数据结构上工作。它不要求用户指定对数据的存放方法,也不需要用户了解具体的数据存放方式,所以具有完全不同底层结构的不同数据库系统,可以使用相同...

MySQL 误删除数据恢复全攻略:基于 Binlog 的实战指南

在MySQL的世界里,二进制日志(Binlog)就是我们的"时光机"。它默默记录着数据库的每一个重要变更,就像一位忠实的史官,为我们在数据灾难中提供最后的救命稻草。本文将带您深入掌握如...