ES8 标准对数组对象 slice 方法的变革-JavaScript中文网-JavaScript教程资源分享门户

ES8标准（也被称为ECMAScript 2017）为JavaScript开发者带来了许多新特性，其中包括对数组对象slice方法的变革。在本文中，我们将深入研究slice方法的改进以及如何利用这些改进来提高我们的开发效率。

slice() 方法回顾

在讨论slice方法的改进之前，我们先概述一下slice方法的本质。slice方法可以从一个数组中返回一段子数组，而不改变原始数组。slice() 方法接收两个可选参数，分别表示子数组的起始和结束位置。如果未提供这些参数，则将整个数组视为子数组。

以下是一个简单的例子：

const arr = [1, 2, 3, 4, 5];
const subArr = arr.slice(1, 4);
console.log(subArr); // [2, 3, 4]

在上面的代码中，我们从索引1（第二个元素）开始，一直到索引4（第五个元素）结束，即仅包括索引1、2、3三个元素，返回一个子数组。

ES8标准对slice() 方法的改进

在ES8标准中，slice() 方法得到了两个重要的改进，分别是允许负数参数和对NodeList对象提供支持。

允许负数参数

slice() 方法的第一个参数和第二个参数可以是负数。负数参数表示从数组的末尾开始计算，例如-1表示数组的最后一个元素。

以下是一个使用负数参数的例子：

const arr = [1, 2, 3, 4, 5];
const subArr = arr.slice(-3, -1);
console.log(subArr); // [3, 4]

在上面的代码中，我们从倒数第三个元素开始，一直到倒数第一个元素结束，即仅包括索引2、3两个元素，返回一个子数组。

对NodeList对象提供支持

NodeList对象是由浏览器实现的类数组对象，表示与文档相关的节点列表。在过去，我们无法使用slice() 方法来截取NodeList对象的子集。而在ES8标准中，slice() 方法也可以用于截取NodeList对象，返回一个包含部分节点的新NodeList对象。

以下是一个使用slice方法对NodeList对象进行截取的例子：

// javascriptcn.com 代码示例
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

<script>
  const list = document.querySelectorAll("#list li");
  const subList = Array.prototype.slice.call(list, 2, 4);
  console.log(subList); // [<li>Item 3</li>, <li>Item 4</li>]
</script>

在上面的代码中，我们使用document.querySelectorAll()方法获取ID为list的ul元素中的所有li元素，并将其赋值给变量list。接着，我们使用slice() 方法对list进行截取，从索引2（第三个li元素）开始，截取到索引4（第五个li元素）结束，即仅包括第三个和第四个li元素，返回一个新的NodeList对象。

总结

ES8标准对数组对象slice方法的变革，不仅大大扩展了slice方法的用途，在从数组中提取子数组时也提供了更大的灵活性。使用负数参数可以轻松地从数组末尾开始截取子数组，而将slice() 方法用于NodeList对象则使得从文档中获取元素的任务变得更加容易。

希望你能从本文中学到有用的技巧，并将它们应用到你的开发工作中。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65375daf7d4982a6ebfda797