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/
相关文章推荐
- JS函数式编程【译】4.在Javascript中实现函数式编程的技术
- JavaScript 函数式编程的性能问题
- javascript 之趣味 函数式编程
- JavaScript中的函数式编程实践
- 初探 JavaScript 中的函数式编程
- 转:用函数式编程技术编写优美的 JavaScript
- 用函数式编程技术编写优美的 JavaScript
- JavaScript与函数式编程解释
- JavaScript 函数式编程实践(来自IBM)第1/3页
- [原创]JavaScript与函数式编程
- javascript-----函数式编程风格
- 函数式JavaScript编程指南
- 转贴:用函数式编程技术编写优美的 JavaScript
- 【UnderScore.js】JavaScript 工具库,提供了一整套函数式编程的实用功能
- [学习笔记]JavaScript之函数式编程
- JavaScript 函数式编程
- JavaScript 函数式编程到底是个啥
- javascript 函数式编程
- JavaScript 函数式编程
- JavaScript 函数式编程理解笔记 (2)