在 ECMAScript 2019 (ES10) 中，一个非常实用的新特性是 Array 的 flat() 方法。但是另外一个可能会被忽略的方法是 Array 的 from() 方法，它可以用于一种更加简洁的方式对数组进行切片。
什么是数组的切片？
数组的切片是指从一个数组中获取其中一部分元素。例如，如果有一个数组 [0, 1, 2, 3, 4, 5]，我们可能只希望获取其中的前三个元素 [0, 1, 2]。
在 JavaScript 中，我们通常使用 slice() 方法对数组进行切片。例如，上面的数组可以通过以下代码进行切片：
----- --- - --- -- -- -- -- --- ----- --------- - ------------ ---
slice() 方法会从数组的起始位置（索引为 0）开始，获取长度为 3 的子数组。当然，也可以通过指定其他起始位置和长度的参数，来获取具有不同长度和起始位置的子数组。
用 from() 方法对数组进行切片
在 ECMAScript 2019 (ES10) 中，我们可以使用更加简洁的方式对数组进行切片。这可以通过 Array 对象的 from() 方法来实现。
from() 方法接收两个参数。第一个参数是需要进行切片的数组，第二个参数是一个函数，该函数用于对切片后得到的新数组中的每一个元素进行计算和操作。
这可能有点抽象，让我们看一个例子：
----- --- - --- -- -- -- -- --- ----- --------- - --------------- - -- - - ---
在这个例子中，我们希望对原始数组 arr 进行切片，获取到一个新的数组 slicedArr，并且在这个新数组中每个元素都乘以 2。这个操作可以通过 from() 方法和一个简单的箭头函数来完成。
通过运行上述代码，我们可以得到一个新的数组 [0, 2, 4]，其中前三个元素分别是原始数组 arr 的前三个元素（即 [0, 1, 2]），并且每个元素都乘以了 2。
from() 方法的优势
使用 from() 方法来对数组进行切片，与传统的 slice() 方法相比有几个优势。
第一个优势是可读性。通过 from() 方法，我们可以在一行代码中完成对数组的切片和对每个元素进行操作的两个任务。这使得代码更加简洁和易于理解。
第二个优势是该方法返回一个新的数组对象。当我们对数组进行切片并对每个元素进行操作时，我们不会影响原始数组的值。这有助于保持代码的可维护性和可测试性。
第三个优势是可扩展性。由于 from() 方法接收一个函数作为第二个参数，我们可以通过更改用于操作每个元素的函数来实现不同的逻辑，从而使代码更加具有扩展性。
结论
在 ECMAScript 2019 (ES10) 中，我们有两种方法可以对数组进行切片：传统的 slice() 方法和更加简洁的 from() 方法。虽然两种方法都可以完成相同的任务，但 from() 方法具有更好的可读性、可维护性和可扩展性。考虑使用 from() 方法来对数组进行切片，从而提高代码质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/670e35e65f5512810260225f