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

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

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

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

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

相关推荐

SQL轻松入门(5):窗口函数(sql语录中加窗口函数的执行)

01前言标题中有2个字让我在初次接触窗口函数时,真真切切明白了何谓”高级”?说来也是一番辛酸史!话说,我见识了窗口函数的强大后,便磨拳擦掌的要试验一番,结果在查询中输入语句,返回的结果却是报错,Wh...

28个SQL常用的DeepSeek提示词指令,码住直接套用

自从DeepSeek出现后,极大地提升了大家平时的工作效率,特别是对于一些想从事数据行业的小白,只需要掌握DeepSeek的提问技巧,SQL相关的问题也不再是个门槛。...

从零开始学SQL进阶,数据分析师必备SQL取数技巧,建议收藏

上一节给大家讲到SQL取数的一些基本内容,包含SQL简单查询与高级查询,需要复习相关知识的同学可以跳转至上一节,本节给大家讲解SQL的进阶应用,在实际过程中用途比较多的子查询与窗口函数,下面一起学习。...

SQL_OVER语法(sql语句over什么含义)

OVER的定义OVER用于为行定义一个窗口,它对一组值进行操作,不需要使用GROUPBY子句对数据进行分组,能够在同一行中同时返回基础行的列和聚合列。...

SQL窗口函数知多少?(sql窗口怎么执行)

我们在日常工作中是否经常会遇到需要排名的情况,比如:每个部门按业绩来排名,每人按绩效排名,对部门销售业绩前N名的进行奖励等。面对这类需求,我们就需要使用sql的高级功能——窗口函数。...

如何学习并掌握 SQL 数据库基础:从零散查表到高效数据提取

无论是职场数据分析、产品运营,还是做副业项目,掌握SQL(StructuredQueryLanguage)意味着你能直接从数据库中提取、分析、整合数据,而不再依赖他人拉数,节省大量沟通成本,让你...

SQL窗口函数(sql窗口函数执行顺序)

背景在数据分析中,经常会遇到按某某条件来排名、并找出排名的前几名,用日常SQL的GROUPBY,ORDERBY来实现特别的麻烦,有时甚至实现不了,这个时候SQL窗口函数就能发挥巨大作用了,窗...

sqlserver删除重复数据只保留一条,使用ROW_NUMER()与Partition By

1.使用场景:公司的小程序需要实现一个功能:在原有小程序上,有一个优惠券活动表。存储着活动产品数据,但因为之前没有做约束,导致数据的不唯一,这会使打开产品详情页时,可能会出现随机显示任意活动问题。...

SQL面试经典问题(一)(sql经典面试题及答案)

以下是三个精心挑选的经典SQL面试问题及其详细解决方案,涵盖了数据分析、排序限制和数据清理等常见场景。这些问题旨在考察SQL的核心技能,适用于初学者到高级开发者的面试准备。每个问题均包含清晰的...

SQL:求连续N天的登陆人员之通用解答

前几天发了一个微头条:...

SQL四大排序函数神技(sql中的排序是什么语句)

在日常SQL开发中,排序操作无处不在。当大家需要排序时,是否只会想到ORDERBY?今天,我们就来揭秘SQL中四个强大却常被忽略的排序函数:ROW_NUMBER()、RANK()、DENSE_RAN...

四、mysql窗口函数之row_number()函数的使用

1、窗口函数之row_number()使用背景窗口函数中,排序函数rank(),dense_rank()虽说都是排序函数,但是各有用处,假如像上章节说的“同组同分”两条数据,我们不想“班级名次”出现“...

ROW_NUMBER()函数(rownumber函数与rank区别)

ROW_NUMBER()是SQL中的一个窗口函数(WindowFunction)...

Dify「模板转换」节点终极指南:动态文本生成进阶技巧(附代码)Jinja2引擎解析

这篇文章是关于Dify「模板转换」节点的终极指南,解析了基于Jinja2模板引擎的动态文本生成技巧,涵盖多源文本整合、知识检索结构化、动态API构建及个性化内容生成等六大应用场景,助力开发者高效利用模...

Python 最常用的语句、函数有哪些?

1.#coding=utf-8①代码中有中文字符,最好在代码前面加#coding=utf-8②pycharm不加可能不会报错,但是代码最终是会放到服务器上,放到服务器上的时候运行可能会报错。③...