最近几年，随着对React的使用，对Javascript也有了深度的探索。这也促进了我们对纯函数和不可变性（都是Redux之类的库的主要基础）的学习和实战。
同时，在未意识到不可变函数的情况下，使用可变函数是需要面临很多bug的，因此，在项目中使用Javascript的数组时，不可变函数是首选。

例如：splice 是一个可变函数，它修改了原数组返回一个新数组。
也许你会认为已经有很多类似 ImmutableJS和Immutability 这样的类库 可以解决这个问题了。但是，我们鼓励尽可能的使用原生的Javascript ，而不是求助于第三方库，也防止加载太多的依赖项。

下面就是几个不可变函数的解决方法：

Inmutable Push

function immutablePush(arr, newEntry){
    return [ ...arr, newEntry ]      
}

Inmutable Pop

function immutablePop(arr){
    return arr.slice(0, -1)     
}

Inmutable Unshift

function immutableUnshift(arr, newEntry){
    return [ newEntry, ...arr ]
}

这些都是一些比较简单的；再举几个比较复杂的。

Sort

原生Javascript 的 sort排序 是修改原数组的，我们通常有两种解决方案：一种是编写我们自己的排序函数或是最简单的方法，制作原始数组的副本并应用该方法，以使原始数组不受影响。以下是我们的解决方法：

function immutableSort(arr, compareFunction) {
    return [ ...arr ].sort(compareFunction)
}
// or...
function immutableSort(arr, compareFunction) {
    return arr.slice().sort(compareFunction)
}

Reverse

function immutableSort(arr, compareFunction) {
    return [ ...arr ].reverse()
}
// or...
function immutableSort(arr, compareFunction) {
    return arr.slice().reverse()
}

Splice

splice 方法允许我们从数组的某个位置添加元素或者删除元素，但它也是改变原数组的，所以我们可以将它转换为不可变的以供需要。

// ES6
function immutableSplice(arr, start, deleteCount, ...items) {
    return [ ...arr.slice(0, start), ...items, ...arr.slice(start + deleteCount) ]
}

Delete

如果你想以不变的方式从数组中某个的位置删除一个元素，我们可以通过以下方式做到这一点：

function immutableDelete (arr, index) {
    return arr.slice(0,index).concat(arr.slice(index+1))
}

其实这些方法都很简单，但重要的是要理解它们的原理，以避免可变性的错误，一般这种错误不容易检测到。

翻译： Linder
原创：Https://Www.Ma-No.Org/En/Programming/Javascript/Javascript-Arrays-Immutable-Functions

本文由 Linder 原创翻译。
翻译工作和译文发表仅用于学习和交流目的，翻译工作遵照 Cc-By-Nc-Sa 协议规定，如果我们的工作有侵犯到您的权益，请及时联系我们。
欢迎遵照 Cc-By-Nc-Sa 协议规定转载，敬请在正文中标注并保留原文/译文链接和作者/译者等信息。
文章仅代表作者的知识和看法，如有不同观点，请楼下排队吐槽 ?