Array.slice 8种不同用法

张春雷发布于2019-08-23 18:35 / 2064人阅读

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

为了保证的可读性，本文采用意译而非直译。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

JS数组slice方法是JS语言中最强大、最常用的内建函数之一。

随着React和其他面向功能的JavaScript实践的兴起，它变得越来越重要，原因有两个:

函数式编程，尤其是高阶函数，与数据列表密切配合

函数式编程需要纯函数，即不会产生副作用或修改输入数据的函数

JavaScript 数组slice方法符合这两个标准。

slice方法可以在不修改原始列表的情况下创建列表子集的浅拷贝。因此，它为编写函数式 JS 提供了一个关键的构建块。

在这篇文章中，我们将通过实例来掌握slice方法，探索它的8种不同用法。

注意:slice 方法不要与splice方法混淆，splice方法会修改原始数组。

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 function
    at test (repl:2:18)
    at repl:1:1
    at 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 == 1，b === 2，extraArgs=== [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 fn
  return function() {
    var remainingArgs = Array.prototype.slice.call(arguments);
    return fn.apply(this, args.concat(remainingArgs));
  }
}

交流

我是小智，公众号「大迁世界」作者，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，即可看到福利，你懂的。

云服务器 GPU云服务器四种用法 js输出8个不同的数不同域名内容不同 8

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105491.html

Javascript数组详解

摘要：创建数组判断比是否是个数组取数组元素属性返回数组的成员数量。增加数组元素方法在数组的末尾增加一个或多个元素，并返回数组的新长度。表示要移除的数组元素的个数要添加进数组的元素最主要的的用途是向数组的中部插入元素。数组的定义数组是按序号排列的一组值，每个值的位置都有编号（从0开始）。数组本质上是一种特殊的对象。它的键名是按（0，1，2...）排列的一组数字。创建数组： var a...

geekidentity 2019-08-21 14:05 评论0 收藏0
Javascript数组系列五之增删改和强大的 splice()

摘要：删除数组元素的开始索引需要删除元素的个数，插入数组的元素语法因为参数变化多样，我们主要从三个方面来展示的用法。今天是我们介绍数组系列文章的第五篇，也是我们数组系列的最后一篇文章，只是数据系列的结束，所以大家不用担心，我们会持续的更新干货文章。生命不息，更新不止！今天我们就不那么多废话了，直接干货开始。我们在《Javascript数组系列一之栈与队列》中描述我们是如何利用 pus...

chavesgu 2019-08-23 12:01 评论0 收藏0
js数组用法

摘要：方法是方法的逆向操作，后者是将字符串分割成数组。不是所有的值都是偶数含有偶数和将数组元素进行组合，生成单个值数组求和数组求积求最大值函数需要两个函数，第一个是执行简化操作的函数，第二个是初始值。数组的添加和删除 push()方法在数组的尾部添加一个或者多个元素 a = []; a.push(zero) // a = [zero] a.push(on...

Harriet666 2019-08-26 11:50 评论0 收藏0
爱上Javascript数组Array（二）——方法解读

摘要：返回一个将数组所有元素用分隔符拼接成的字符串，默认分隔符为逗号。重复的次数就是数组长度减一，因为字符串是分隔符。由于数组本身是对象，拥有方法，利用它也能实现将数组拼接成一个字符串，只不过分隔符只能是逗号了。接上一篇《爱上Javascript数组Array（一）——基础介绍》，这一篇详细介绍Array的所有方法。所有数组的方法都定义在Array.prototype上,而Array.p...

CoffeX 2019-08-19 17:49 评论0 收藏0
Slice无参调用可以将类数组对象（含有length属性）转化成数组

摘要：首先，有两个用法，一个是一个是，第一个返回的是字符串，第二个返回的是数组，这里我们看第个。最后，附个转成数组的通用函数据说这样比快 Array.prototype.slice.call(arguments) 根据call的使用方法，我们可以猜测以下可能相等： [].slice.call(arguments) => arguments.slice() 我带着好像少了一个必需参数的疑问去...

MudOnTire 2019-08-22 18:31 评论0 收藏0