JavaScript函数与函数式编程

一.函数声明，函数表达式，匿名函数与自执行函数

// 函数声明
fn();  // function
function fn() {
    console.log('function');
}
// 表达式声明
fn(); // 报错
var fn = function() {
    console.log('function');
}

函数声明与函数表达式声明，区别在于是否有声明提前。

匿名函数
即没有被进行赋值操作得函数。使用场景： 多作为一个参数传入另一个函数中。

匿名函数传入另一个函数后，在另一个函数中执行，常称该匿名函数为 回调函数

函数自执行与块级作用域

闭包在模块中的重要作用，见 JavaScript作用域链与闭包，模块包含：私有变量，私有方法，公有变量，公有方法

// 使用函数自执行得方式创建模块
(function() {
    // 私有变量
    var age = 20;
    var name = 'Tom';
    // 私有方法
    function getName() {
        return `your name is ` + name;
    }
    // 公有方法
    function getAge() {
        return age;
    }
    // 将引用保存在外部执行环境的变量中，形成闭包，防止该执行环境被垃圾回收
    window.getAge = getAge;
})();
console.log(getAge);
console.log(getAge());

函数自执行的其他方式：!function(){}()，+function(){}().

状态管理器(redux)模块化维护需要保存多数据和多状态的时候使用。

// 自执行创建模块
(function() {
    // states 结构预览
    // states = {
    //     a: 1,
    //     b: 2,
    //     m: 30,  
    //     o: {}
    // }
    var states = {};  // 私有变量，用来存储状态与数据
    // 判断数据类型
    function type(elem) {
        if(elem == null) {
            return elem + '';
        }
        return toString.call(elem).replace(/[\[\]]/g, '').split(' ')[1].toLowerCase();
    }
    /**
     * @Param name 属性名
     * @Description 通过属性名获取保存在states中的值
    */
    function get(name) {
        return states[name] ? states[name] : '';
    }
    function getStates() {
        return states;
    }
    /*
    * @param options {object} 键值对
    * @param target {object} 属性值为对象的属性，只在函数实现时递归中传入
    * @desc 通过传入键值对的方式修改state树，使用方式与小程序的data或者react中的setStates类似
    */
    function set(options, target) {
        var keys = Object.keys(options);
        var o = target ? target : states;

        keys.map(function(item) {
            if(typeof o[item] == 'undefined') {
                o[item] = options[item];
            }
            else {
                type(o[item]) == 'object' ? set(options[item], o[item]) : o[item] = options[item];
            }
            return item;
        })
    }
    // 对外提供接口
    window.get = get;
    window.set = set;
    window.getStates = getStates;
})()
// 具体使用如下
set({ a: 20 });     // 保存 属性a
set({ b: 100 });    // 保存属性b
set({ c: 10 });     // 保存属性c
// 保存属性o, 它的值为一个对象
set({
    o: {
        m: 10,
        n: 20
    }
})
// 修改对象o 的m值
set({
    o: {
        m: 1000
    }
})
// 给对象o中增加一个c属性
set({
    o: {
        c: 100
    }
})
console.log(getStates())

二.函数参数传递方式：按值传递

// 与引用类型相同
var a = { m: 10, n: 20 }
function fn(a) {
    a.m = 20;
    return a;
}
fn(a);
console.log(a);   // { m: 20, n: 20 }
// 验证是按值传递，非按引用传递
var person = {
    name: 'Nicholas',
    age: 20
}
function setName(obj) {  // 传入一个引用
    //指向一个新的引用，修改属性值，原引用属性不变
    obj = {};   // 将传入的引用指向另外的值
    obj.name = 'Greg';  // 修改引用的name属性
}
setName(person);
console.log(person.name);  // Nicholas 未被改变

三.函数式编程

使用函数封装，多次调用，简单便利

function mergeArr(arr) {
    var result = 0;
    for(var i = 0; i < arr.length; i++) { result  += arr[i] }
    return result;
}
mergeArr([1,2,3,4,5]);

命令式编程与函数式编程

// 命令式编程
var array = [1, 3, 'h', 5, 'm', '4'];
var res = [];
for(var i = 0; i < array.length; i ++) {
    if (typeof array[i] === 'number') {
        res.push(array[i]);
    }
}
//函数式编程
function getNumbers(array) {
    var res = [];
    array.forEach(function(item) {
        if (typeof item === 'number') {
            res.push(item);
        }
    })
    return res;
}
// 以上是我们的封装，以下是功能实现
var array = [1, 3, 'h', 5, 'm', '4'];
var res = getNumbers(array);

函数式编程思维的特征

• 函数是一等公民

  即函数与其他数据类型一样，可以赋值给其他变量，可以作为参数传入其他函数，一样可以作为其他函数的返回值

function delay() {
    console.log('5000ms之后执行该方法.');
}
var timer = setTimeout(function() {
    delay();
}, 5000);
// 等同于下
var timer = setTimeout(delay, 5000);

• 只用”表达式”，不使用”语句”
  前者是一个运算过程，有返回值，后者只执行操作没有返回值。

  // 只使用语句进行操作
  var ele = document.querySelector('.test');
  function setBackgroundColor(color) {
      ele.style.backgroundColor = color;
  }
  setBackgroundColor('red');
  setBackgroundColor('#ccc');
  // 使用表达式操作
  function setBackgroundColor(ele, color) {
      ele.style.backgroundColor = color;
      return color;
  }
  var ele = document.querySelector('.test');
  setBackgroundColor(ele, 'red');
  setBackgroundColor(ele, '#ccc');

• 纯函数
  即函数内部运算结果是否影响全局变量的使用。

  函数式编程强调函数独立，所有功能返回一个新的值，尤其不得修改外部变量的值

函数内使用数组的方法：
slice,concat,join方法原数组不变
splice,pop,push,shift,unshift,reverse方法会改变原数组
参考文章：
函数与函数式编程——这波能反杀
如有错误，烦请指正，谢谢！

赏

谢谢！

支付宝

微信