Declarative VS Imperative，这两者的区别简单来说其实就是 What VS How。

意识形态上的区别

声明式

  • 程序抽象了控制流的过程，代码描述的是 数据流，即 做什么

  • 描述依赖表达式

    1. 表达式是指一小段代码，它用来计算某个值。表达式通常是某些函数调用的复合、一些值和操作符，用来计算出结果值。
    1. 蔬菜.做成菜(蔬菜沙拉)

    命令式

  • 代码描述用来达成期望结果的特定步骤 —— 控制流：即如何做

  • 频繁使用语句。

    1. 洗干净(蔬菜)
    2. 混合(蔬菜, 沙拉)
    3. 放入盘中(混合物)

    个人写代码的过程： 先命令式，逐步分析，然后声明式，抽象

    demo

    例1：希望得到一个数组每个数据平方后的和

    ```javascript // 命令式 function mysteryFn (nums) { let squares = [] let sum = 0 // 1. 创建中间变量

    for (let i = 0; i < nums.length; i++) { squares.push(nums[i] * nums[i]) // 2. 循环计算平方 }

    for (let i = 0; i < squares.length; i++) { sum += squares[i] // 3. 循环累加 }

    return sum }

// 以上代码都是 how 而不是 what…

// 声明式 const mysteryFn = (nums) => nums .map(x => x * x) // a. 平方 .reduce((acc, cur) => acc + cur, 0) // b. 累加

  1. <a name="zDDL5"></a>
  2. ### 例2：希望得到一个数组所有偶数值的一半的平均值
  3. ```javascript
  4. // 命令式
  5. function mysteryFn(nums) {
  6.   let sum = 0
  7.   let tally = 0                         // 1. 创建中间变量
  9.   for (let i = 0; i < nums.length; i++) {
  10.     if (nums[i] % 2 === 0) {            // 2. 循环，值为偶数时累加该值的一半并记录数量
  11.       sum += nums[i] / 2
  12.       tally++
  13.     }
  14.   }
  16.   return tally === 0 ? 0 : sum / tally  // 3. 返回平均值
  17. }
  19. // 声明式
  20. const mysteryFn = (nums) => nums
  21.   .filter(x => x % 2 === 0)             // a. 过滤非偶数
  22.   .map(x => x / 2)                      // b. 折半
  23.   .reduce((acc, cur, idx, { length }) => (
  24.     idx < length - 1
  25.       ? acc + cur                       // c. 累加
  26.       : (acc + cur) / length            // d. 计算平均值
  27.   ), 0)