很多时候，在前端开发过程中我们需要对数组或者字符串进行循环遍历，但是在实际操作中往往需要考虑到边界值问题以及循环计数问题。这时候，我们就需要用到一个非常有用的 npm 包 -- wrap-around。这个包可以为我们解决这类问题，让我们的编码更加方便和快捷。
什么是 wrap-around 包
wrap-around 这个包是一个适用于 JavaScript 和 TypeScript 的 util 库。它通过对数组和字符串进行包装，为我们提供了一些边界值处理和循环遍历的方法。这个包的 github 官方仓库地址为：https://github.com/bumnoshen/wrap-around。
wrap-around 的安装
在使用 wrap-around 包前，我们先需要将它安装到项目中。通过 npm 命令行，我们可以很方便地进行安装。
npm i wrap-around
wrap-around 的使用
第一步：引入 wrap-around 包
首先，在我们需要使用 wrap-around 包的文件中，我们需要先引入这个包。
import { make, view } from 'wrap-around';第二步：使用 make() 方法包装数组或者字符串
接下来，我们可以使用 make() 方法包装我们需要遍历的数组或者字符串。make 函数的语法如下：
function make<T extends readonly any[]>(ary: T): <I extends number = 0>(idx?: I) => T[I];
其中我们需要将数组或者字符串作为参数传递给这个函数。返回的是一个可以接收索引值的函数。make() 函数可以满足循环遍历中数组或者字符串边界值的要求。例如：
let arr = ['a', 'b', 'c']; let wrapArr = make(arr); let char = wrapArr(4); console.log(char); // 输出 'a'
对于上述代码，wrapArr 会返回一个接收索引值的函数，我们可以将索引值当作参数传递给它。当索引值大于或等于数组或者字符串的长度时，wrapArr() 方法会将索引值循环回到 0，从而实现 wrap around。从上面的代码可以看出，我们输入的索引值为 4，超出了数组 arr 的长度，但是 wrap-around 方法将其循环回到了 0。
第三步：使用 view() 方法获取 wrap around 值
最后，我们可以通过 view() 方法获取包装后数组或字符串对应索引位置的值。view() 函数的语法如下：
function view<T extends readonly any[]>(ary: T): <I extends number = 0>(idx?: I) => T[I];
跟 make() 函数类似，我们也需要将数组或者字符串作为参数传递给这个函数。返回的是一个可以接收索引值的函数。例如：
let arr = ['a', 'b', 'c']; let wrapArr = make(arr); let char = view(wrapArr)(4); console.log(char); // 输出 'a'
在上面的代码中，我们将 wrapArr 作为参数传递给了 view() 函数，接着使用它返回的函数获取数组或者字符串的索引值。
wrap-around 示例
下面是一个完整的 wrap-around 应用示例：
-- -------------------- ---- ------- -- -- ----------- - ------ - ----- ---- - ---- -------------- -- -------- --- --- - ----- ---- ---- ---- ----- --- ------- - ---------- --- ---- - - -- - - --- ---- - --- ---- - ----------------- -------------- ------ - -- --------- --- --- - ------- ------- --- ------- - ---------- --- ---- - - -- - - --- ---- - --- ---- - ----------------- -------------- ------ -
运行上面的代码，可以看到控制台输出的结果，完美解决了循环遍历数组和字符串时的边界值问题。
wrap-around 包的开发者手册
如果你是 wrap-around 包的开发者，你可以参考下面的开发者手册，帮助你更好地了解和使用这个包。
API
make():<T extends readonly any[]>(ary: T) => <I extends number = 0>(idx?: I) => T[I]
包装一个数组或者字符串为 wrap-around 对象。
参数：
ary: 必选，被包装的字符数组或者字符串。
返回值：
返回一个包装了数组或者字符串 ary 的函数。将这个函数的参数作为索引传入函数，函数将返回的数组或者字符串对应索引位置的值。
view():<T extends readonly any[]>(ary: T) => <I extends number = 0>(idx?: I) => T[I]
获取包装后的数组或者字符串的索引位置的值。
参数：
ary: 必选，被包装的字符数组或者字符串。
返回值：
返回一个可以接收索引值的函数。将这个函数的参数作为索引传入函数，函数将返回的数组或者字符串对应索引位置的值。
错误处理
如果输入的数组或者字符串为空，make() 和 view() 函数将会报错。
结论
通过本文的介绍，我们了解了 wrap-around 包的作用和使用方法。这个包可以很方便地帮助我们解决数组和字符串循环遍历时的边界值问题，提高我们的编码效率。如果你在实际开发中需要对数组或者字符串进行循环遍历，不妨试试使用 wrap-around 包来解决你的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c8e81e8991b448d9f9c