【JavaScript】高级语法——纯函数

理解JavaScript中的纯函数

纯函数的维基百科定义：

• 在程序设计中，若一个函数符合一下条件那么这个函数被称为纯函数：
• 此函数在相同的输入值时，需产生相同的输出。
• 函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。
• 该函数不能有语义上可观察的函数副作用，诸如：“触发事件”，使输出设备输出，或更改输出值以外物件的内容等。

简单可理解为一下两点：

• 确定的输入，一定会产生确定的输出。
• 函数在执行过程中，不能产生副作用。

副作用（side effect）概念：
在计算机科学中，副作用的概念，表示在执行一个函数时，除了返回函数值之外，还对调用函数产生了附加的影响，比如修改了全局变量，修改参数或者改变外部的存储；

一、slice()和splice()方法谁是纯函数？

说了那么多，还是实际操作一下比较好，如下代码展示两个数组的处理方法：slice()和splice()方法：

slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

• 语法：

    arr.slice([begin[, end]])
  

• 参数：
  • begin:
    提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。
    如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
    如果省略 begin，则 slice 从索引 0 开始。
    如果 begin 大于原数组的长度，则会返回空数组。
  • end:
    提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从begin到 end 的所有元素（包含 begin，但不包含 end）。
    如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
    如果 end 被省略，则 slice 会一直提取到原数组末尾。
    如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。
• 返回值：
  一个含有被提取元素的新数组。

splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

• 语法：

  array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• 参数：
  • start：指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
  • deleteCount：可选值，
    整数，表示要移除的数组元素的个数。
    如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
    如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
    如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
  • item1, item2, … ：可选值，要添加进数组的元素,从start 位置开始。如果不指定，则splice()将只删除数组元素。
• 返回值：
  由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

示例代码如下：

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);
console.log(removed) // [ 'mandarin', 'sturgeon' ]
console.log(myFish) // [ 'angel', 'clown' ]   
// 可以看出myFish数组经过splice函数的处理后，改变了原数组的值


var nums = [10, 20, 30, 40];
var sliceNum = nums.slice(0, 3)
console.log(sliceNum) // [ 10, 20, 30 ]
console.log(nums) // [ 10, 20, 30, 40 ]

有上述示例代码可见：slice函数本身是一个纯函数，splice函数本身不是一个纯函数。

二、纯函数的案例练习

话不多说，直接上案例。

案例一:

示例代码如下：

function foo1 (num1, num2) {
    return num1 * 2 + num2 * num2
}

foo1是纯函数，首先满足相同的输入一定产生相同的输出，其次满足在函数执行过程中，不会产生任何副作用

案例二:

示例代码如下：

var name = "abc"
function foo2 () {
    console.log("foo2正在执行，属于其他执行内容")
    name = "qbz"
}
foo2()

foo2 不是一个纯函数，因为它修改了外界的全局变量name

案例三:

示例代码如下：

function foo3 (info) {
    info.age = 30
}

var obj1 = { name: '21', age: 100 }
foo3(obj1)
console.log(obj1)  // { name: '21', age: 30 }

foo3 不是一个纯函数，因为它修改了传入的参数

案例四:

示例代码如下：

function foo4 (info) {
    return {
        ...obj2,
        age: 100,
    }
}
var obj2 = { name: 'slr', age: 72 }
foo4(obj2)
foo4(obj2)
foo4(obj2)
foo4(obj2) 

foo4是一个纯函数，因为不管我们调用多少次，只要传入的参数obj2不变，得到的输出结果就不变