函数式编程初探

const classA = [
    {
        name: '张三',
        age: 17
    },
    {
        name: '李四',
        age: 15
    },
    {
        name: '王五',
        age: 16
    },
]

let student = [];
for (let i = 0; i < classA.length; i++) {
    if (classA[i].age === 16) {
        student.push(class[i])
    }
}

const student = classA.filter( item => item.age === 16 )

const isAge = item => item.age === 16;
const result = classA.filter(isAge);

[
    {
        name: '张三',
        age: '26',
        price: '1000'
    },
    {
        name: '李四',
        age: '25',
        price: '3655'
    },
    {
        name: '王五',
        age: '30',
        price: '8888'
    },
]

const result = array.reduce((value, item, index) => {
  value[index] = {
    name: item[0],
    age: item[1],
    price: item[2]
  };
  return value;
}, []);

throttle(fn, wait=500) {
    if (typeof fn != "function") {
        // 必须传入函数
        throw new TypeError("Expected a function")
    }
    // 定时器
    let timer,
    // 是否是第一次调用
    firstTime = true;
    
    // 这里不能用箭头函数，是为了绑定上下文
    return function (...args) {
        // 第一次
        if (firstTime) {
            firstTime = false;
            fn.apply(this,args);
        }
        
        if (timer) {
            return;
        }else {
            timer = setTimeout(() => {
                clearTimeout(timer);
                timer = null;
                fn.apply(this, args);
            },wait)
        }

    }
}

// 单独使用，限制快速连续不停的点击，按钮只会有规律的每500ms点击有效
button.addEventListener('click', throttle(() => {
    console.log('hhh')
}))

// 有一个点击增加的功能，但是要求最少过了1秒才能增加一次，就可以
const add = x => x++;
throttle(add,1000);

// 又有了一个减少的功能，但是要求最少2秒减少一次
const cutDown = x => x--;
throttle(cutDown,2000);

const z = 10;
add(x, y) {
    return x + y;
}

const z = 10;
add(x, y) {
    return x + y + z;
}

var xs = [1,2,3,4,5];

// 纯的
xs.slice(0,3);
//=> [1,2,3]

xs.slice(0,3);
//=> [1,2,3]

xs.slice(0,3);
//=> [1,2,3]


// 不纯的
xs.splice(0,3);
//=> [1,2,3]

xs.splice(0,3);
//=> [4,5]

xs.splice(0,3);
//=> []

const add = x => y => x + y;
add(1)(2);
// => 3

// 创建柯里化函数，保存了第一次传入的参数和函数，返回值
//是一个函数并且接收第二次传入参数，同时调用传入的函数进行计算
currying (fn, ...args1) {
    return (...args2) => {
        return fn(...args1, ...args2)
    }
}

// 定义一个一般函数
const add = (x, y) => x + y;

// 使用
const increment = currying(add, 1);
console.log(increment(2));
const addTen = currying(add, 10);
console.log(addTen(2));

// => 3
// => 12

currying(fn, ...args1) {
  // '判断传入的参数是否满足传入函数需要的参数，比如说add函数需要两个参数相加，
  //那么判断是否传入了两个参数，满足调用传入函数计算结果'
  if (args1.length >= fn.length) {
    console.log(args1, '--1--');
    return fn(...args1);
  }
  // '不满足返回一个新的函数，继续调用柯里化函数，传入保存的第一次传入的函数，
  //传入保存的第一次传入的参数，传入第二次传入的参数，继续上面的判断逻辑，返回计算结果'
  return (...args2) => {
    console.log(args2, '--2--');
    return currying(fn, ...args1, ...args2);
  };
},

// 定义一个一般函数
const add = (x, y) => x + y;

// 使用
const increment = currying(add, 1);
console.log(increment(2));
const addTen = currying(add, 10);
console.log(addTen(2));

// => [2] --2--
// => [1,2] --1--
// => 3
// => [2] --2--
// => [10,2] --1--
// => 12

const add = (x, y) => x + y;
console.log(add.length)
// => 2

// 放在函数作为单独参数，会把一个数组变成参数序列，比如上面例子中的数组[1,2]变成了参数x=1,y=2
fn(...args1)

// 放在函数中作为第二个参数，会把传入的值变成一个数组，
//如果传入的是一个数组那么还是数组，传入一个对象，会变成一个数组对象
function currying(fn,...x) {
	console.log(x)
}
currying(0,1)
// => [1]

// 放在回调函数中作为第二个和第三个参数
// 第一次调用会返回一个函数，会在闭包里存贮值，
//第二次调用会把闭包里的值和第二次参数里的值合并成数组
return currying(fn, ...args1, ...args2);
// => [1,2]

// 但是单独在函数中这么使用会报错
function currying(fn,...x,...y) {
	console.log(x)
}
currying(0,1,2)

const compose = (f, g) => x => f(g(x));

// 我们要实现一个给字符串全部变成大写，然后加上个感叹号的功能，只需要定义两个函数，然后组合一下
const toUpperCase = x => x.toUpperCase();
const exclaim = x => `${x}!`;
const shout = compose(exclaim, toUpperCase);

shout('hello world')
// => HELLO WORLD!

const compose = (...fns) => (...args) => fns.reduceRight((res, fn) => [fn.call(null, ...res)], args)[0];

// 使用，实现一个功能，字符串变成大写，加上个感叹号，还要截取一部分，再在前面加上注释
const toUpperCase = x => x.toUpperCase();
const exclaim = x => `${x}!`;
const head = x => `slice is: ${x}`;
const reverse = x => x.slice(0, 7);

const shout = compose(exclaim, toUpperCase, head, reverse)
shout('my name is maya')
// => SLICE IS: MY NAME!

(a + b) + c  =  a + (b + c)

// 第一种
const one = compose(exclaim, toUpperCase)
const shout = compose(one, head, reverse)
shout('my name is maya')
// => SLICE IS: MY NAME!

// 第二种
const two = compose(toUpperCase, head)
const shout = compose(exclaim, two, reverse)
shout('my name is maya')
// => SLICE IS: MY NAME!

// 第三种
const three = compose(head, reverse)
const shout = compose(exclaim, toUpperCase, three)
shout('my name is maya')
// => SLICE IS: MY NAME!

...

  // Returns a function that is the composition of a list of functions, each
  // consuming the return value of the function that follows.
  _.compose = function() {
    var args = arguments;
    var start = args.length - 1;
    return function() {
      var i = start;
      var result = args[start].apply(this, arguments);
      while (i--) result = args[i].call(this, result);
      return result;
    };
  };

// 伪代码，思路
// 比如说，我们请求后台拿到了一个数据，然后我们需要筛选几次这个数据, 取出里面的一部分，并且排序

// 数据
const res = {
    status: 200,
    data: [
        {
            id: xxx,
            name: xxx,
            time: xxx,
            content: xxx,
            created: xxx
        },
        ...
    ]
}

// 封装的请求函数
const http = xxx;

// '传统写法是这样的'
http.post
    .then(res => 拿到数据)
    .then(res => 做出筛选)
    .then(res => 做出筛选)
    .then(res => 取出一部分)
    .then(res => 排序)
    
// '函数式编程是这样的'
// 声明一个筛选函数
const a = curry()
// 声明一个取出函数
const b = curry()
// 声明一个排序函数
const c = curry()
// 组合起来
const shout = compose(c, b, a)
// 使用
shout(http.post)