您的位置:首页 > Web前端 > JavaScript

JavaScript ---- 函数式编程

2017-04-08 15:49 507 查看
//全部大写
//一般写法
const arr=["aaaa","bbbb","cccc","dddd"];
for(let i=0;i<arr.length;i++){
arr[i]=arr[i].toUpperCase()
}
console.log(arr)

//函数式写法
function makeUpperCase(v){
return v.toUpperCase();
}
console.log(arr.map(makeUpperCase));


//函数式写法
function add(a,b){
return a+b
}

function multiply(a,b){
return a-b
}

function subtract(a,b){
return a*b
}

var res = subtract(multiply(add(1,2), 3), 4);
console.log(res)


// 链式写法
const result = {
chain(a) {
this._temp = a;
return this;
},
sum(b) {
this._temp += b;
return this;
},
sub(b) {
this._temp -= b;
return this;
},
value() {
const _temp = this._temp;
this._temp = undefined;
return _temp;
}
};

console.log(result.chain(1).sum(2).sub(3).value());


柯里化

柯里化就是把一个函数的多个参数分解成多个函数, 然后把函数多层封装起来,每层函数都返回一个函数去接收下一个参数这样,可以简化函数的多个参数。

function pow(base, p) {/*计算base的p次方*/}

function square(a) {
return pow(a, 2);
}


高阶函数

一个函数就可以接收另一个函数作为参数

function add(x, y, f) {
return f(x) + f(y);
}
add(-5, 6, Math.abs); // 11


map

传入的参数是fn,即函数对象本身。

map接受一个集合和一个函数f,集合中每个元素都映射到函数f上,并返回一个新的集合

//求平方
function res(x) {
return x * x;
}
var arr = [1, 3, 5, 7, 9];
arr.map(res); // [1, 9, 25, 49, 81]

var res = arr.map(function (x) {
return x*x;
});
var arr = [1, 3, 5, 7, 9];
console.log(res)//[1, 9, 25, 49, 81]

//转化为字符串
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']


reduce

reduce接受一个集合和一个函数f,然后将f映射到数组的相邻的两个元素上

//累加
var arr = [1, 3, 5, 7, 9];
var res = arr.reduce(function (x, y) {
return x + y;
});
console.log(res);//25

//把[1, 3, 5, 7, 9]变换成整数13579
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x * 10 + y;
}); // 13579


filter

把Array的某些元素过滤掉,然后返回剩下的元素。

//删掉偶数,只保留奇数
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

//把一个Array中的空字符串删掉,可以这么写:
var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注意:IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
console.log(element); // 依次打印'A', 'B', 'C'
console.log(index); // 依次打印0, 1, 2
console.log(self); // self就是变量arr
return true;
});


sort

排序

//数字排序
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
}); // [1, 2, 10, 20]

//字母排序
var arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function (s1, s2) {
x1 = s1.toUpperCase();
x2 = s2.toUpperCase();
if (x1 < x2) {
return -1;
}
if (x1 > x2) {
return 1;
}
return 0;
}); // ['apple', 'Google', 'Microsoft']


闭包

// 创建一个闭包
function a() {
let k = 0;

return function() {
return ++k;
};
}

const b = a();

console.log(b());  // 1
console.log(b());  // 2


参考

http://www.jianshu.com/p/390147c78967

http://www.ruanyifeng.com/blog/2012/04/functional_programming.html

http://taobaofed.org/blog/2017/03/16/javascript-functional-programing/

http://liuwanlin.info/bu-yao-bei-han-shu-shi-bian-cheng-xia-dao/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript