JS示例:8个JavaScript阵列切片的不同用途

发布时间:2018-11-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JS示例:8个JavaScript阵列切片的不同用途脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
avaScript数组slice方法是JavaScript语言中功能最强大且最常用的内置函数之一。 随着React和其他功能导向的JavaScript实践的兴起,它变得更加重要原因有两个:
  1. 功能编程,特别是更高级别的功能,与数据列表密切配合
  2. 功能编程需要纯函数,不会产生副作用或修改输入数据的函数。

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

slice方法提供了一种机制,用于创建列表子集的浅表副本,而无需修改原始列表。因此,它为编写功能JavaScript提供了一个关键的构建块。 在这篇文章中,我们将slice通过示例掌握该方法,探索可以使用的8种不同方式。 注意:slice方法是不与混淆splice的方法,其中修改的阵列就位。 切片保留原始数组完整并返回所选项的浅表副本,splice修改原始数组。

Javascript数组切片如何工作

在我们深入研究一些更高级的用法之前,让我们先看一下该slice方法的基础知识。 如MDN文档中所示,slice是一个最多需要2个参数的数组上的方法:
@H_777_31@arr.slice([begin[, end]])
所述begin参数是基于0的索引识别何处开始萃取,而end自变量是基于0的索引标识在哪里结束。 该slice方法创建一个从begin最多但不包括的数组的副本end。 它还接受负指数,指示从数组末尾开始的计数。

基本用途

我们的前4个用途突出了其核心功能slice

使用1:简单复制

const arr2 = arr.slice();
没有任何参数的切片执行简单的浅拷贝。在现代JavaScript中,使用扩展运算符来实现此功能更为惯用,但如果在较旧的代码库中工作或没有使用babel的构建步骤,您可能仍然希望使用slice

使用2:从N开始的子阵列

使用该slice方法的最简单方法是从N开始抓取数组的所有元素。 一个示例用例可能是您想要弹出数组的第一个元素并使用它,返回剩余的数组,但您希望在不修改原始数组的情况下执行此操作。
function useOne(arr) {
  const usedITem = arr[0];
  // do something with usedItem
  return arr.slice(1);
}

使用3:数组的最后N个

slice可以使用的另一种方法是获取数组的末尾,利用负索引从末尾开始计数的事实。 这种负索引使得剥离你想要的许多元素变得非常简单。例如,如果你想只抓3:
const last3 = arr.slice(-3)

使用4:数组的前n个

拉出数组的前面,我们需要开始使用方法的第二个参数:end。 当两个参数都被传递时,该slice方法返回一个从最开始begin但不包括的集合end。 由于JavaScript数组是从零开始的(索引从0开始),这使得拉出前N个元素变得非常简单:
const First4 = arr.slice(0, 4)

使用5:n的内部段,从m开始

一般化使用5,如果我们想用来slice从任何索引开始拉出数组的一部分怎么办? 要做到一点,我们需要翻译(begin, length)(begin, end)。幸运的是,数学很简单,我们可以定义一个简单的函数来做到这一点:  
function pullSegment(arr, begin, length) {
  return arr.slice(begin, begin + length);
}

使用类似数组的对象

slice方法也可用于类似数组的对象。这些对象的行为大多类似于数组,但实际上并不是数组。这些本质上是包含length值的任何对象,可以通过数字索引访问,但不包括Array方法。 一些示例包括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);
}
这允许使用任意数量的args调用MyFunc。例如:
myFunc(1, 2, 3, 4, 5, 6, 7, 8)
而且里面你会结束了a === 1b === 2extraArgs === [3, 4, 5, 6, 7, 8]

功能阵列操作

另一个巨大的用途slice是以功能/纯粹方式操作数组,而无需修改原始数组。

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

slice功能上下文中强大而常见的用法是替换数组中特定项的值。 这很简单,只需分配新值,但在功能世界中,您无法修改原始数组。 相反,您可以slice与新的JavaScript扩展运算符结合使用,以返回一个相同但对于要更新的​​索引的新数组:
function replaceidx(arr, index, newVal) {
  return [
    ...arr.slice( 0, index ),
    newVal,
    ...arr.slice( index + 1)
  ],
}

部分功能应用

函数式编程中的另一种常见模式是所谓的部分函数应用程序:将函数预先应用于函数,然后返回新函数。 此模式允许您通过使用具有不同预应用参数的相同核心功能来组合函数,从而创建更高的可重用性。 虽然像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));
  }
}
正如您在这一点上所看到的,Array slice方法在JavaScript工具箱中是一个非常有用的工具,特别是当您开始转向更多功能的编程方式时。 觉得可用,就经常来吧!es6教程 脚本宝典 欢迎评论哦!巧夺天工,精雕玉琢。小宝典献丑了!      

脚本宝典总结

以上是脚本宝典为你收集整理的JS示例:8个JavaScript阵列切片的不同用途全部内容,希望文章能够帮你解决JS示例:8个JavaScript阵列切片的不同用途所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。