JS数组切片方法是JS语言中最强大也是最常用的内置函数之一。随着React和其他面向函数的JavaScript实践的兴起,它变得越来越重要,原因有两个:函数式编程,尤其是高阶函数,与数据列表紧密配合函数式编程需要纯函数,即没有产生副作用的函数或修改输入数据JavaScript数组切片方法满足这两个条件。slice方法可以在不修改原始列表的情况下创建列表子集的浅表副本。因此,它为编写函数式JS提供了一个关键的构建块。在本文中,我们将通过示例掌握切片方法,探索它的8种不同用法。注意:切勿将slice方法与修改原始数组的splice方法混淆。切片的工作原理在深入了解一些更高级的用法之前,让我们先了解一下切片方法的基础知识。MDN文档中slice是数组上的方法,最多有两个参数:arr.slice([begin[,end]])1.begin从这个索引中提取原数组中的元素,如果参数is负数表示从原数组倒数第二个元素开始提取,slice(-2)表示从原数组倒数第二个元素开始提取到最后一个元素(包括最后一个元素)。如果省略begin,则切片从索引0开始。2.end在此索引结束以提取原始数组元素(从0开始)。slice会提取原数组中索引从begin到end的所有元素(包括begin,不包括end)。slice(1,4)提取原始数组中从第二个元素到第四个元素的所有元素(索引为1、2、3的元素)。如果该参数为负数,则表示以原数组的最后几个元素结束提取。slice(-2,-1)表示提取原数组中倒数第二个元素到最后一个元素(不包括最后一个元素,即只提取倒数第??二个元素)。如果省略end,切片将被提取直到原始数组的末尾。如果end大于数组长度,切片也会被提取到原数组的末尾。基本用法我们的前4个示例突出了切片的核心功能。用法1:简单复制constarrarr2=arr.slice执行不带任何参数的切片的简单浅复制。目前,主流的用法仍然是使用展开操作符来实现,但是如果你在一个旧的代码库中,或者如果你不使用babel的构建步骤,你可能还是想使用slice。用法2:获取从N开始的子数组使用slice方法最简单的方法是从N开始的原始数组中提取所有元素。一种情况是要弹出数组的第一个元素并使用它,返回数组的其余部分,但想在不修改原始数组的情况下执行此操作。functionuseone(arr){constusedItem=arr[0]returnarr.slice(1)}用法三:获取从N尾开始的子数组切片另一种使用方式是获取数组的尾,使用负索引开始从末算起。这种负索引使得删除任意数量的元素变得非常容易。比如只想抓取3个constlast3=arr.slice(-3)用法4:获取数组的第n个获取数组的第一个数,我们需要用到第二个参数:end。当给定两个参数时,slice方法返回一个从begin开始但不包括end的集合。由于JavaScript数组是从0开始的(索引从0开始),这使得获取前N个元素变得非常简单:constfirst4=arr.slice(0,4)用法5:获取数组中的某个子数组如果我们想要什么关于使用slice从任何索引开始获取数组的一段?为此,我们需要将(begin,length)转换为(begin,end)。计算逻辑很简单,我们可以定义一个简单的函数来实现:特殊对象,其属性名是一个正整数,其length属性会随着数组成员的增减而变化,同时从Array的构造函数中继承了一些数组操作的方法。对于一个普通的对象,如果它所有的属性名都是正整数,并且有相应的长度属性,那么即使这个对象不是由Array构造函数创建的,它仍然表现得像一个数组。在这种情况下,这些对象被称为 “类数组对象” 。slice方法也可用于类似数组的对象。一些类似数组的包是参数(用于访问传递给函数的所有参数的关键字)、节点列表(从返回节点列表的任何DOMAPI方法返回),甚至是按数字索引并具有长度属性的原始对象添加。要在类似数组的对象上使用slice方法,您需要直接从Array.prototype引用它,如下所示:Array.prototype.slice.call(arguments)在这种特殊情况下很有用。用法6:将类数组对象转换为数组切片在类数组对象上的常见用法是将它们转换为实际数组。例如:constargs=Array.prototype.slice.call(arguments);你为什么要这样做?使用数组方法。例如,想象一个像functionaddOne(){returnarguments.map(i=>i+1);}这样的函数这似乎可行,但如果你尝试这样做,你会得到一个错误:这是因为参数实际上是不是数组,而是类数组对象。可以使用slice来实现这个功能,如下:functionaddOne(){returnArray.prototype.slice.call(arguments).map(i=>i+1)}现在就可以得到你想要的数据了:>addOne(1,2,3)[2,3,4]用法7:将任意长度的冗余参数投射到一个数组中有时你想接受一个函数的冗余参数来组成一个数组。较新版本的JavaScript引入了所谓的Rest语法来处理此问题,但为了与旧版浏览器兼容,您可以使用切片来执行此操作:functionmyFunc(a,b){constextraArgs=Array.prototype.slice.call(arguments,2);}这允许使用任意数量的参数调用myFunc,例如:函数内部的myFunc(1,2,3,4,5,6,7,8)将得到a==1,b===2,extraArgs===[3,4,5,6,7,8]用法8:修改数组切片中的特定索引在函数上下文中一个强大而常见的用法是替换数组中特定项的值.本质上,这个很简单,就是赋新值而已,但是在函数式的世界里,原来的数组是不能修改的。相反,slice可以与扩展运算符一起使用以返回一个相同的新数组,但对于正在更新的索引:functionreplaceIdx(arr,index,newVal){return[...arr.slice(0,index),newVal,...arr.slice(index+1)]}PartialfunctionapplicationPartialfunctionapplication,英文是partialapplication,在函数式编程中也可以译为“局部应用”、“部分应用”、“部分应用”另一种常见的模式是所谓partialfunctionapplication:将一个函数预先应用到一个函数上,然后返回一个新的函数。此模式允许您组合函数,通过使用具有不同预应用参数的相同核心函数来创建更大的可重用性。虽然像Haskell这样的纯函数式语言原生支持部分函数应用,但在JavaScript中我们可以使用切片实现一个函数来实现它
