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

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

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

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

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

相关推荐

MySQL进阶五之自动读写分离mysql-proxy

自动读写分离目前,大量现网用户的业务场景中存在读多写少、业务负载无法预测等情况,在有大量读请求的应用场景下,单个实例可能无法承受读取压力,甚至会对业务产生影响。为了实现读取能力的弹性扩展,分担数据库压...

Postgres vs MySQL_vs2022连接mysql数据库

...

3分钟短文 | Laravel SQL筛选两个日期之间的记录,怎么写?

引言今天说一个细分的需求,在模型中,或者使用laravel提供的EloquentORM功能,构造查询语句时,返回位于两个指定的日期之间的条目。应该怎么写?本文通过几个例子,为大家梳理一下。学习时...

一文由浅入深带你完全掌握MySQL的锁机制原理与应用

本文将跟大家聊聊InnoDB的锁。本文比较长,包括一条SQL是如何加锁的,一些加锁规则、如何分析和解决死锁问题等内容,建议耐心读完,肯定对大家有帮助的。为什么需要加锁呢?...

验证Mysql中联合索引的最左匹配原则

后端面试中一定是必问mysql的,在以往的面试中好几个面试官都反馈我Mysql基础不行,今天来着重复习一下自己的弱点知识。在Mysql调优中索引优化又是非常重要的方法,不管公司的大小只要后端项目中用到...

MySQL索引解析(联合索引/最左前缀/覆盖索引/索引下推)

目录1.索引基础...

你会看 MySQL 的执行计划(EXPLAIN)吗?

SQL执行太慢怎么办?我们通常会使用EXPLAIN命令来查看SQL的执行计划,然后根据执行计划找出问题所在并进行优化。用法简介...

MySQL 从入门到精通(四)之索引结构

索引概述索引(index),是帮助MySQL高效获取数据的数据结构(有序),在数据之外,数据库系统还维护者满足特定查询算法的数据结构,这些数据结构以某种方式引用(指向)数据,这样就可以在这些数据结构...

mysql总结——面试中最常问到的知识点

mysql作为开源数据库中的榜一大哥,一直是面试官们考察的重中之重。今天,我们来总结一下mysql的知识点,供大家复习参照,看完这些知识点,再加上一些边角细节,基本上能够应付大多mysql相关面试了(...

mysql总结——面试中最常问到的知识点(2)

首先我们回顾一下上篇内容,主要复习了索引,事务,锁,以及SQL优化的工具。本篇文章接着写后面的内容。性能优化索引优化,SQL中索引的相关优化主要有以下几个方面:最好是全匹配。如果是联合索引的话,遵循最...

MySQL基础全知全解!超详细无废话!轻松上手~

本期内容提醒:全篇2300+字,篇幅较长,可搭配饭菜一同“食”用,全篇无废话(除了这句),干货满满,可收藏供后期反复观看。注:MySQL中语法不区分大小写,本篇中...

深入剖析 MySQL 中的锁机制原理_mysql 锁详解

在互联网软件开发领域,MySQL作为一款广泛应用的关系型数据库管理系统,其锁机制在保障数据一致性和实现并发控制方面扮演着举足轻重的角色。对于互联网软件开发人员而言,深入理解MySQL的锁机制原理...

Java 与 MySQL 性能优化:MySQL分区表设计与性能优化全解析

引言在数据库管理领域,随着数据量的不断增长,如何高效地管理和操作数据成为了一个关键问题。MySQL分区表作为一种有效的数据管理技术,能够将大型表划分为多个更小、更易管理的分区,从而提升数据库的性能和可...

MySQL基础篇:DQL数据查询操作_mysql 查

一、基础查询DQL基础查询语法SELECT字段列表FROM表名列表WHERE条件列表GROUPBY分组字段列表HAVING分组后条件列表ORDERBY排序字段列表LIMIT...

MySql:索引的基本使用_mysql索引的使用和原理

一、索引基础概念1.什么是索引?索引是数据库表的特殊数据结构(通常是B+树),用于...