# 常见的编程范式

## 命令式编程

``````1- Pour flour in a bowl //将面粉倒入碗中
2- Pour a couple eggs in the same bowl //在碗中打入两个鸡蛋
3- Pour some milk in the same bowl //倒入一些牛奶
4- Mix the ingredients //将它们混合
5- Pour the mix in a mold //将混合物倒入模具
6- Cook for 35 minutes //烤35分钟
7- Let chill //冷却
``````

``````const nums = [1,4,3,6,7,8,9,2]
const result = []

for (let i = 0; i < nums.length; i++) {
if (nums[i] > 5) result.push(nums[i])
}

console.log(result) // 输出: [ 6, 7, 8, 9 ]
``````

## 过程式编程

``````function pourIngredients() {
- Pour flour in a bowl
- Pour a couple eggs in the same bowl
- Pour some milk in the same bowl
}

function mixAndTransferToMold() {
- Mix the ingredients
- Pour the mix in a mold
}

function cookAndLetChill() {
- Cook for 35 minutes
- Let chill
}

pourIngredients()
mixAndTransferToMold()
cookAndLetChill()
``````

## 函数式编程

``````const nums = [1,4,3,6,7,8,9,2]
const result = [] // 外部变量

for (let i = 0; i < nums.length; i++) {
if (nums[i] > 5) result.push(nums[i])
}

console.log(result) // 输出: [ 6, 7, 8, 9 ]
``````

``````const nums = [1,4,3,6,7,8,9,2]

function filterNums() {
const result = [] // 内部变量

for (let i = 0; i < nums.length; i++) {
if (nums[i] > 5) result.push(nums[i])
}

return result
}

console.log(filterNums()) // 输出: [ 6, 7, 8, 9 ]
``````

## 声明式编程

``````const nums = [1,4,3,6,7,8,9,2]

console.log(nums.filter(num => num > 5)) // 输出: [ 6, 7, 8, 9 ]
``````

``````<button onClick={() => console.log('You clicked me!')}>Click me</button>
``````

React使用的JSX语法结合了HTML和JS，这样编写应用就更加简单快捷。但是JSX并不是浏览器读取和执行代码的方式。React的代码之后会被编译成正常的HTML和JS代码，这才是浏览器实际执行的代码。

JSX就是声明式的，目的是为了使得开发者有一个更加友好、高效的工作接口。

## 面向对象的编程

OOP的核心概念是将关注点分离成对象实体，每一个实体包含一组信息（属性）和行为（方法），可以由实体来执行。

OOP大量使用类（是由程序员设定的从蓝图或者模板创建新对象的方法），由类创建的对象叫做实例。

``````// 给每一个实体创建一个类
class Cook {
constructor constructor (name) {
this.name = name
}

mixAndBake() {
- Mix the ingredients
- Pour the mix in a mold
- Cook for 35 minutes
}
}

class AssistantCook {
constructor (name) {
this.name = name
}

pourIngredients() {
- Pour flour in a bowl
- Pour a couple eggs in the same bowl
- Pour some milk in the same bowl
}

chillTheCake() {
- Let chill
}
}

// 将每一个类实例化
const Frank = new Cook('Frank')
const Anthony = new AssistantCook('Anthony')

// 调用实例的方法
Anthony.pourIngredients()
Frank.mixAndBake()
Anthony.chillTheCake()
``````

OOP的优势在于，通过清晰的关注点和责任分离，编程更加易于理解。