【重学JS系列】slice用法大合集


让我们回顾下slice的日常用法

slice 工作原理

在深入研究一些更高级的用法之前,让我们看一下slice方法的基础知识。如MDN文档,slice 是数组上的一个方法,它最多有两个参数:

arr.slice([begin[, end]])

begin

从该索引处开始提取原数组中的元素,如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。如果省略 begin,则 slice 从索引 0 开始。

end

在该索引处结束提取原数组元素(从0开始)。slice会提取原数组中索引从 begin 到 end 的所有元素(包含begin,但不包含end)。

slice(1,4) 提取原数组中的第二个元素开始直到第四个元素的所有元素 (索引为 1, 2, 3的元素)。

如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。

如果 end 被省略,则slice 会一直提取到原数组末尾。如果 end 大于数组长度,slice 也会一直提取到原数组末尾。

基本用法

我们的前4个例子突出slice的核心功能。

用法1:简单的复制

const arr2 = arr.slice()

没有任何参数的slice执行一个简单的浅拷贝。当前,主流的用法还是使用展开运算符合来实现,但是如果在旧的代码库中,或者没有使用babel的构建步骤,可能仍然希望使用slice

用法2:获取从 N 开始的子数组

使用slice方法最简单的方法就是原始数组从N开始抽取的所有元素。

一种情况是希望弹出数组的第一个元素并使用它,返回剩余的数组,但希望在不修改原始数组的情况下执行此操作。

function useone (arr) {const usedItem = arr[0]return arr.slice(1)
}

用法3:获取从末尾 N 开始的子数组

slice的另一种使用方法是获取数组的末尾,利用的是负索引从末尾开始计数。

这种负索引使删除任意数量的元素变得超级简单。例如,如果你只想抓取3个

const last3 = arr.slice(-3)

用法4:获取数组的前n个

获取数组的前面的数,我们需要使用第二个参数:end

当有两个参数时,slice方法返回一个从begin开始但不包括end的集合。

由于JavaScript数组是从0开始的(索引从0开始),这使得获取前N个元素变得非常简单:

const first4 = arr.slice(0, 4)


用法5:获取数组中某段子数组

如果我们想要使用slice从任何索引开始获取数组的一段,该怎么办?

为此,我们需要从 (begin, length) 转换为(begin, end)。计算逻辑很简单,我们可以定义一个简单的函数来做到这一点:

function pullSegment(arr, begin, length) {return arr.slice(begin, begin + length);
}

处理类似数组的对象

JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法。

而对于一个普通的对象来说,如果它的所有property名均为正整数,同时也有相应的length属性,那么虽然该对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为 “类数组对象” 。

slice方法也可用于类似数组的对象。

一些类似数组包如arguments(用于访问传递给函数的所有参数的关键字),NodeLists(从返回节点列表的任何DOM API方法返回),甚至是使用数字索引并添加length属性的原始对象。

要在类似数组的对象上使用slice方法,需要直接从Array.prototype引用它,如下所示:

Array.prototype.slice.call(arguments)

在这特定的场合中会很有用处。

用法6:将类似数组的对象转换为数组

slice在类似数组的对象上的一个常见用途是将它们转换为实际数组。例如:

const args = Array.prototype.slice.call(arguments);

你为什么要这么做?为了使用数组方法。例如,想象一个像这样的函数

function addOne() { return arguments.map(i => i+1); 
}

这看起来可行,但如果你试着去做,你就会得到错误:

> addOne(1, 2, 3)
TypeError: arguments.map is not a functionat test (repl:2:18)at repl:1:1at ContextifyScript.Script.runInThisContext (vm.js:44:33)at REPLServer.defaultEval (repl.js:239:29)at bound (domain.js:301:14)at REPLServer.runBound [as eval] (domain.js:314:12)at REPLServer.onLine (repl.js:440:10)at emitOne (events.js:120:20)at REPLServer.emit (events.js:210:7)at REPLServer.Interface._onLine (readline.js:279:10)

这是因为arguments 实际上不是数组,而是类似数组的对象。可以使用slice实现此功能,如下所示:

function addOne() {return Array.prototype.slice.call(arguments).map(i => i+1)
}

现在就可以得到了你所希望的数据:

> addOne(1, 2, 3) [ 2, 3, 4 ]

用法7:将任意长度多余的参数强制转换为数组

有时希望接受函数的多余参数,组成一个数组。

较新版本的JavaScript引入了所谓的Rest语法来处理这个问题,但是如果为为了兼容旧浏览器,你可以使用slice做到这一点:

function myFunc(a, b) { const extraArgs = Array.prototype.slice.call(arguments, 2); 
}

这允许使用任意数量的参数调用myFunc, 例如:

myFunc(1, 2, 3, 4, 5, 6, 7, 8)

在函数里面会得到a == 1b === 2extraArgs=== [3,4,5,6,7,8]


用法8:修改数组中的特定索引

slice在函数上下文中一个强大而常见的用法是替换数组中特定项的值。

从本质上讲,这很简单,只需要分配新值,但是在函数世界中,不能修改原始数组。

相反,可以将slice与扩展运算符一起使用,以返回一个相同但对于要更新的索引的新数组:

function replaceIdx(arr, index, newVal) {return [...arr.slice(0, index),newVal,...arr.slice(index + 1)]
}

偏函数应用

偏函数应用,英文是partial application,也可以译作“局部应用”、“部分应用”、“偏应用”

函数式编程中的另一种常见模式是所谓的偏函数应用:将函数预先应用于函数,然后返回一个新函数。

这种模式允许你组合函数,通过使用具有不同预应用参数的相同核心函数来创建更大的可重用性。

虽然像Haskell这样的纯函数语言本身支持偏函数应用程序,但是在JavaScript中,我们可以使用slice实现一个函数来实现它

var partial = function() {const fn = arguments[0];const args = Array.prototype.slice.call(arguments, 1);// Return a function that calls fnreturn function() {var remainingArgs = Array.prototype.slice.call(arguments);return fn.apply(this, args.concat(remainingArgs));}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354624.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Github开源】一站搞定各种开发文档

开发者的苦恼:经常要在多个API文档中切换,浏览器书签栏收藏各种语言相关的接口说明文档。无意中在Github上发现DevDocs[1]这个开源项目,它是一个把所有开发相关的文档以web的形式做了一个综合的网站,并提供搜索,离线访…

javafx 表单_JavaFX 2:创建登录表单

javafx 表单在本教程中,我将使用JavaFX 2和CSS设计一个外观漂亮的Login Form 。 它是经典的登录表单,带有用户名和密码以及登录按钮。 为了遵循本教程,我强烈建议您查看以下这些教程: Eclipse IDE中的JavaFX 2入门 JavaFX 2&…

【详细教程】教你如何使用Node + Express + Typescript开发一个应用

Express是nodejs开发中普遍使用的一个框架,下面要谈的是如何结合Typescript去使用。 目标 我们的目标是能够使用Typescript快速开发我们的应用程序,而最终我们的应用程序却是编译为原始的JavaScript代码,以由nodejs运行时来执行。 初始化设置…

结构型模式 适配器模式

结构型模式 适配器模式 适用于: 是将一个类的接口转换成客户希望的另外一个接口。使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 /*** 结构型模式 适配器模式* Adapter模式也叫适配器模式,是构造型模式之一,通过Adapter模式可…

乐哥学AI_Python(二):Numpy索引,切片,常用函数

Numpy的索引和切片 ndarray对象的内容可以通过索引和切片查看和修改。 索引:ndarray对象中的元素索引基于0开始 切片:对数组里某个片段区域的描述 数组的切片也可以理解为原始数组的局部视图,都是指向内存中的原始数组,所以不同于…

仅使用HTML和CSS实现的标签云效果

标签云的效果在博客和网站上不难见到,它其实就是带有超链接的某些关键字,为了达到强调主题的作用。通常出现概率比较大或者受欢迎的标签文字显示比较大,相反的就显示的小。来源于TagCrowd.com我们就不去深入研究标签云带来的效率上的提升和可…

捍卫Java

因此,我们不时发布了一本电子书,名为“十大Java性能问题” 。 毫无例外,一些人回答说“问题是您正在使用Java”。 显然,Java一直在受到批评,人们已经预测了它的消亡已有一段时间了。 当然,它不像Python&am…

vuex的使用二

1.先看项目的目录结构 2.在main.js里需要引入store这个文件并挂在实例上 import store from ./store/store ............new Vue({el: #app,router,store,template: <App/>,components: { App } }) 3.store.js里引入action.js和mutation.js文件 // 状态管理器 import Vue…

收到短信验证码自动填充到表单,竟然是这么玩的

苹果系统上的App和网站可以实现来自短信的验证码自动填充表单的功能&#xff0c;通常你是怎么实现这个功能的&#xff1f;有一种实现方式可能你不知道&#xff0c;单纯的HTML标签就能实现&#xff0c;不需要任何的Javascript代码该特性第一次发布是在 WWDC 2018[1]&#xff1a;…

web实现数据交互的几种常见方式

前言在当今社会&#xff0c;作为一名前端程序猿&#xff0c;并不是一昧的去制作静态页面就可以满足滴&#xff1b;你说你会制作网页&#xff0c;好吧&#xff0c;只能说你算是一个前端程序猿。但这是你作为一个程序猿最基本的能力&#xff0c;并不会为你进行加分&#xff1b; 我…

【超详细教程】如何使用TypeScript和GraphQL开发应用

GraphQL是一个专为构建灵活的API而生的强大的查询语言。它允许您为数据定义类型系统&#xff0c;因此在执行查询时&#xff0c;它仅返回所需的数据。与TypeScript一起使用时&#xff0c;GraphQL可以为开发人员提供更好的体验&#xff0c;因为它们都是类型语言。TypeScript是Jav…

jpa jsf_完整Web应用程序Tomcat JSF Primefaces JPA Hibernate –第2部分

jpa jsf托管豆 这篇文章是本教程第1部分的继续。 在“ com.mb”包中&#xff0c;您将需要创建以下类&#xff1a; package com.mb;import org.primefaces.context.RequestContext;import com.util.JSFMessageUtil;public class AbstractMB {private static final String KEEP…

【利好工具】JavaScript及时运行调试工具

今天要介绍的这个工具叫RunJS[1]&#xff0c;是运行在各大系统上的客户端&#xff0c;目前支持主流的macOS、Windows、Debian和Universal Linux平台。你可以在上面编写你的JavaScript或TypeScript代码&#xff0c;并且获得即时反馈。它的左边是代码区域&#xff0c;右边是输出结…

CIFAR-10 dataset 的下载与使用

基本信息 CIFAR-10 是一个包含60000张图片的数据集。其中每张照片为32*32的彩色照片&#xff0c;每个像素点包括RGB三个数值&#xff0c;数值范围 0 ~ 255。 所有照片分属10个不同的类别&#xff0c;分别是 airplane, automobile, bird, cat, deer, dog, frog, horse, ship, tr…

教你如何创建一款属于自己的VSCode主题

你有没有想过创建一款属于自己的VSCode主题&#xff1f;没有你想像的那么难&#xff0c;但是真正实现起来也不是那么轻松&#xff0c;需要你对将要去改变的主题的一些属性要有所了解和准备。如果你要想让你的主题适用于多种编程语言&#xff0c;并且看起来还很漂亮的话&#xf…

调试

http://www.cnblogs.com/CARPE-DIEM-wu/p/7798119.html 黄金规则 从帮助台得到的观点是不明确的 检查插头 不要想,而要看 回到目录制造失败 回到目录不要想,而要看 回到目录分而治之 回到目录一次只改一个地方 回到目录保持审计跟踪 回到目录检查插头 回到目录获得全新观点 回到…

【视频内含福利】原来手机套壳视频是这么做出来的

最近视频圈子里都在发这种视频&#xff0c;究竟是怎么做出来的&#xff1f;研究下来发现原来是用的这款名字叫Record Maker的APP&#xff0c;旨在帮助用户轻松快速给视频加上手机壳的效果。目前App Store上的版本是1.2.1&#xff0c;最近一次更新支持了iPhone11/iPhone12模型&a…

apache thrift_使用Java快速入门的Apache Thrift

apache thriftApache Thrift是由facebook创建的RPC框架&#xff0c;现在它是一个Apache项目。 Thrift允许您在不依赖语言的定义文件中定义数据类型和服务接口。 该定义文件用作编译器的输入&#xff0c;以生成用于构建通过不同编程语言进行通信的RPC客户端和服务器的代码。 您也…

前端八大灵感设计,代码变为现实

我们都知道掌握编程技术是一项很难的事情&#xff0c;没有捷径可走。需要我们在日复一日的工作中去锻炼。如果想要达到擅长甚至需要长年累月的积累。下面列举了一些可以给你带来编码灵感的例子&#xff0c;相信你看到会有想去写代码的冲动。因为一个好的工程师&#xff0c;是不…

Apple 公司开发者账号添加团队成员

Apple 公司开发者账号添加团队成员 简介 首先公司内部团队开发需要的账号类型为公司账号&#xff0c;可以添加团队成员协同开发。 账号下的团队成员有三种角色&#xff1a; Team Agent (代理) 代理: 就是注册开发者账号的那一个&#xff0c;权限最高&#xff0c;续费和创建开发…