JS 命令式声明式函数式编程?

最新推荐文章于 2024-08-18 10:53:12 发布

原创最新推荐文章于 2024-08-18 10:53:12 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

笔记专栏收录该内容

2 篇文章

订阅专栏

本文介绍了JS中的命令式、声明式和函数式编程风格，强调了声明式编程的可读性优势，并通过React框架为例进行说明。JS支持函数式编程，其中函数被视为变量，具有不可变性、纯函数、数据转换和高阶函数等特点。文中还探讨了柯里化和递归的概念。

JS 命令式声明式函数式编程?

——烟雨仔的读书笔记

1. 命令式和声明式是啥?

命令式和声明式是按照编程风格来划分的.

声明式有一个突出特点: 对执行结果的描述远胜于执行过程.

相对地, 命令式的特点是: 关注达成目标的具体过程.

或许你还是很懵, 看下面的命令式编程例子.

	const arr = ['h', 'e', 'l', 'l', 'o' ]
	for(let i = 0; i < arr.length; i++) {
		arr[i] = arr[i].toUpperCase()
	}
	console.log(arr)

在上面的例子中, 包含了完成这个任务的整个过程, 即遍历整个数组并转换成大写.

接下来看声明式编程如何完成.

	const arr = ['h', 'e', 'l', 'l', 'o']
	const arrNew = arr.reduce((prev, cur) => 
		prev += cur.toUpperCase(), '')
	console.log(arrNew)

对于上述代码, 我们之所以明白它发生了什么是由于看到 reduce 方法, 但具体遍历处理的细节被抽象封装到 reduce 内部, 我们并没有看到它循环遍历的过程.

简单理解就是命令式代码的过程相当细节: 切块, 去籽, 扔进搅拌机, 而声明式代码描述的是具体结果: 西瓜, 榨成西瓜汁.

因此声明式编程代码是可读性更强的, 因为我们并不在意榨成西瓜汁的细节. React 框架采用的就是声明式编程, render 函数调用来构建 DOM, 但 DOM 渲染的具体细节是被封装的. 虽然看不到细节, 但我们看到 render 方法就清楚地知道这是在渲染组件.

2. JS 中的函数

JS 可以进行函数式编程, 这意味着变量可以做的事情, 函数也可以.

是的, 接下来你需要谨记: “函数就是变量!”

可以像声明变量那样去声明一个函数(函数表达式)
```
let fn = function(msg) {
	console.log(msg)
}
```

函数就是变量! 因此可以添加到对象中

const obj = {
	msg: 'hello watermelon',
	foo (msg) {
		console.log(msg)
	}
}

函数就是变量! 因此可以添加到数组中

const arr = [
	'hello watermelon',
	msg => console.log(msg),
	'hello world'
]

arr[1](arr[0])	// hello watermelon

函数就是变量! 因此可以作为其他函数的参数传递

let foo = fn => fn('hello watermelon')
foo(msg => console.log(msg))
// hello watermelon

函数就是变量! 因此可以作为其他函数的执行结果返回

const foo = arg1 => arg2 => console.log(arg1 + ' ' + arg2)
const log = foo('hello')// log 是 foo 返回的函数
log('watermelon')

看过以上介绍, 烟雨仔相信你开始有一点了解了.

函数式编程的核心概念

函数式编程是声明式编程的一部分. 这部分偏理论, 以至于烟雨仔也有些迷惑…

不可变性

在函数式编程中, 数据不可变, 数据是无法被修改的. 这意味着不能修改原始数据, 只能进行拷贝编辑. 关于如何拷贝这里就不进行赘述.

纯函数

纯函数是一个返回结果只依赖输入参数的函数. 我们需要明确以下几点.

纯函数至少需要接收一个参数, 并将参数当做不可变数据.
总是返回一个值或其他函数.
不会产生副作用, 即不会修改作用域外的变量.

以下是一个非纯函数.

	const person = {
		name: 'mistrain',
		age: 18,
		hobby: 'watermelon'
	}
	function changeName() {
		person.name = 'zongzi'
		return person
	}
	changeName()
	console.log(person)
	// {name: 'zongzi', age: 18, hobby: 'watermelon'}

以上 changeName 函数是非纯函数. 它并没有接收参数, 也没有返回一个值或其他函数, 并且修改了作用域外数据 person.

接下来看纯函数.

	const person = {
  		name: 'mistrain',
  		age: 18,
  		hobby: 'watermelon'
	}
	const newPerson = info => ({...info, name: 'zongzi'})
	// 扩展运算符, 并修改部分对象属性, 烟雨仔第一次用这种写法, 妙~
	console.log(newPerson(person))
	// {name: 'zongzi', age: 18, hobby: 'watermelon'}
	console.log(person)
	// {name: 'mistrain', age: 18, hobby: 'watermelon'}