• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

JavaScript函数式编程详解

JavaScript cps12345 1年前 (2020-06-23) 323次浏览 0个评论

什么是JavaScript函数式编程?

请遵循以下两个简单的函数式编程规则,以编写最佳的JavaScript:

  1. 保持数据不变
  2. 保持函数纯净—接受至少一个参数,返回数据或另一函数

在函数式程序中,数据是不可变的。它永远不会改变。我们没有更改原始数据结构,而是构建了这些数据结构的更改后的副本,并改为使用它们

1.1。不变函数与可变函数

要了解不变性是如何工作的,让我们看一下改变数据的含义。考虑一个代表颜色草坪的对象:

let color_lawn = {
title: “lawn”,
color: “#00F00”,
rating: 0
}

我们可以构建一个对颜色进行评级的函数,然后使用该函数来更改颜色对象的评级。

function rateColor(color, rating) {
color.rating = rating
return color
}

console.log(rateColor(color_lawn, 5).rating) // 5
console.log(color_lawn.rating)

在JavaScript中,函数参数是对实际数据的引用。像这样设置颜色等级很不好,因为它会更改或更改原始颜色对象。

var rateColor = function(color, rating) {
return Object.assign({}, color, {rating: rating})
}

console.log(rateColor(color_lawn, 5).rating) // 5
console.log(color_lawn.rating) // 4

在这里,我们通过Object.assign更改颜色等级。Object.assign是复印机;它需要一个空白对象,将颜色复制到该对象,并覆盖副本上的等级

const rateColor = (color, rating) =>
({
…color,
rating
})

我们可以使用ES6箭头功能和ES7对象扩展运算符来编写相同的功能。该rateColor 函数使用的扩散操作的颜色复制到一个新的对象,然后覆盖其评级


1.2。不变与可变运算符

让我们考虑一个颜色名称数组

let list = [
{ title: “Rad Red”},
{ title: “Lawn”},
{ title: “Party pink”},
]

我们可以创建一个函数,使用以下命令向该数组添加颜色 Array.push

var addColor = function(title, colors) {
colors.push({ title: title })
return colors;
}

console.log(addcoLOR(“Glam Green”, list).length) // 4
console.log(list.length) // 4

但是,Array.push这不是一个不变的功能。此addColor函数通过向其添加另一个字段来更改原始数组

为了保持colors数组不变,我们必须Array.concat改用

const addColor = (title, array) => array.concat({title})

console.log(addColor(“Glam Green”, list).length) // 4
console.log(list.length) // 3

Array.concat连接数组。在这种情况下,它需要一个具有新颜色标题的新对象,并将其添加到原始数组的副本中

const addColor = (title, list) => […list, {title}]

此函数将原始列表复制到新数组,然后向该副本添加一个包含颜色标题的新对象。

纯函数是返回根据其参数计算得出的值的函数

纯函数的定义

  • 纯函数至少接受一个参数,并始终返回一个值或另一个函数
  • 它们不会引起副作用,设置全局变量或更改有关应用程序状态的任何内容
  • 他们将参数视为不可变的数据

var frederick = {
name: “Frederick Douglass”,
canRead: false,
canWrite: false
}

function selfEducate() {
frederick.canRead = true
frederick.canWrite = true
return frederick
}

selfEdcuate() // Execute the function
console.log( frederick )

由于以下原因,selfEducate函数不是纯函数

  • 它不接受任何参数,也不返回值或函数
  • 它还会在“范围” Frederick之外更改变量

const frederick = {
name” “Frederick Douglass”,
canRead: false,
canWrite: false
}

const selfEducate = (person) => {
frederick.canRead = true
frederick.canWrite = true
return person
}

console.log(selfEdcuate(frederick)) // Execute the function
console.log( frederick )

这种自我教育功能也是不纯正的,因为它会引起副作用。调用此函数会使发送给它的对象发生变异

仅当我们可以将发送给该​​函数的参数视为不可变数据时,才能使用纯函数

const frederick = {
name” “Frederick Douglass”,
canRead: false,
canWrite: false
}

const selfEducate = person =>
({
…person,
canRead: true,
canWrite: true
})

console.log(selfEdcuate(frederick)) // Execute the function
console.log( frederick )

最后,这个版本的selfEducate是一个纯函数

它根据发送给它的参数计算一个值:person。它返回一个新的person对象,而不改变发送给它的参数,因此没有副作用

喜欢 (0)

您必须 登录 才能发表评论!