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

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

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

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

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

相关推荐

每天一个AI姬,AMD核显用户有福了,AI绘画打破 NVIDIA 显卡垄断

使用StableDiffusion进行AI绘画,并不一定只能使用NVIDIA英伟达显卡,甚至,也不一定只能使用独立显卡。今天我们使用AMD6800H核显,并安装了StableDif...

NETworkManager:功能强大的网络管理与问题排除工具

关于NETworkManagerNETworkManager是一款功能强大的网络管理与问题排除工具,该工具完全开源,可以帮助广大研究人员轻松管理目标网络系统并排除网络疑难问题。该工具使用远程桌面、Po...

AMD也能深度学习+免费AI绘画:StableDiffusion+ROCm部署教程!

某国政客扇扇嘴皮子,CN玩硬件和深度学习的圈子里就掀起了一场风暴,这就是著名的嘴皮子效应(误)。没了高性能计算的A100H100倒也能理解,但是美利坚这波把RTX4090禁售了就让人无语了,所以不少做...

windows 下编译 python_rtmpstream

最近在研究数字人,看了大咖的项目(https://github.com/lipku/metahuman-stream),尝试编译此项目的依赖项目python_rtmpstream(https://gi...

如何使用 Python 操作 Git 代码?GitPython 入门介绍

花下猫语:今天,我在查阅如何用Python操作Gitlab的时候,看到这篇文章,觉得还不错,特分享给大家。文中还提到了其它几种操作Git的方法,后续有机会的话,再陆续分享之~~作者:匿蟒...

网上看了不少,终于把ZlmediaKit流媒体框架搭建起来啦

你都站在2023年代了,视频通话、视频直播、视频会议、视频监控就是风口浪尖上的猪师兄,只要你学那么一丁点,拿个高薪的工作不过分吧!我也是半瓶子晃荡的,所以路人呀,共学习,同进步!本篇开始,只讲在Lin...

MacDown:一款 macOS 的强大 Markdown 编辑器

大家好,很高兴又见面了,我是"...

ZLMediaKit安装配置和推拉流

一、ZLMediaKit库简介ZLMediaKit是一个基于...

大神赞过的:学习 WebAssembly 汇编语言程序设计

文/阿里淘系F(x)Team-旭伦随着前端页面变得越来越复杂,javascript的性能问题一再被诟病。而Javascript设计时就不是为了性能优化设计的,这使得浏览器上可以运行的本地语言一...

【Docker】部署WVP视频监控平台

回来Docker系列,今天将会跟大家分享一则关于开源WVP视频监控平台的搭建。先说结论吧,一开始按照网上说的一步一步搭建没有搭建成功,不知道是版本太旧还是我这边机器有问题,尝试了好几个不同方式的搭建都...

MongoDB+GridFS存储文件方案

GridFS是MongoDB的一个内置功能,它提供一组文件操作的API以利用MongoDB存储文件,GridFS的基本原理是将文件保存在两个Collection中,一个保存文件索引,一个保存文...

【开源】强大、创新且直观的 EDA套件

今天分享的LibrePCB是...

Ollama如何制作自己的大模型?

背景Llama3发布了,这次用了...

Ollama使用指南【超全版】

一、Ollama快速入门Ollama是一个用于在本地运行大型语言模型的工具,下面将介绍如何在不同操作系统上安装和使用Ollama。官网:https://ollama.comGithub:http...

基于区块链的价值共享互联网即时通讯应用平台源码免费分享

——————关注转发之后私信回复【源码】即可免费获取到本项目所有源码基于区块链的价值共享互联网即时通讯应用平台,是一个去中心化的任何人都可以使用的通讯网络,是一款基于区块链的价值共享互联网即时通讯AP...