高阶函数
1 <script> 2 3 /* 4 高阶函数 5 JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数 6 编写高阶函数,就是让函数的参数能够接收别的函数 7 */ 8 function add(x, y, f) { 9 return f(x) + f(y); 10 } 11 /* 12 map/reduce 13 map() 14 由于map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果 15 作为高阶函数,事实上它把运算规则抽象了,因此,我们不但可以计算简单的f(x)=x2,还可以计算任意复杂的函数 16 reduce 17 18 */ 19 //练习 20 function pow(x) { 21 return x*x 22 } 23 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] 24 console.log(arr.map(pow)) 25 console.log(arr.map(String)) 26 27 // arr.reduce(f) = f(f(f(x1, x2), x3), x4)) 28 arr.reduce(function(x, y){ 29 var a = x + y; 30 console.log(a) 31 return a 32 }) 33 34 35 36 function product(arrs) { 37 return arrs.reduce(function(x, f){ 38 var j = x * f 39 console.log(j) 40 return j 41 }) 42 } 43 // 测试: 44 if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) { 45 console.log('测试通过!'); 46 } 47 else { 48 console.log('测试失败!'); 49 } 50 51 52 53 54 function string2int(s) { 55 //split()分割字符串返回的是一个数组; 56 var arr = s.split(''); 57 return arr.map(function(x){ 58 //js的弱类型转换,‘-’会将字符串转变为数字, 59 //x (乘) 1也是一个道理,但这样为何不直接return s (乘) 1呢; 60 return x-0; 61 }).reduce(function a(x,y){ 62 return x*10+y; 63 }); 64 } 65 // 测试: 66 if (string2int('0') === 0 && string2int('12345') === 12345 && string2int('12300') === 12300) { 67 if (string2int.toString().indexOf('parseInt') !== -1) { 68 console.log('请勿使用parseInt()!'); 69 } else if (string2int.toString().indexOf('Number') !== -1) { 70 console.log('请勿使用Number()!'); 71 } else { 72 console.log('测试通过!'); 73 } 74 } 75 else { 76 console.log('测试失败!'); 77 } 78 79 80 81 function normalize(arr4){ 82 arr4.map(function(s){ 83 console.log(s = s[0].toUpperCase()+s.substring(1).toLowerCase()) 84 }) 85 } 86 normalize(['ass', 'bdd']) 87 88 89 90 91 var arr3 = ['1', '2', '3']; 92 var r; 93 function returnInt(element){ 94 return parseInt(element,10) 95 } 96 r = arr3.map(returnInt) 97 console.log('[' + r[0] + ', ' + r[1] + ', ' + r[2] + ']'); 98 99 /* 100 filter 101 filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。 102 103 和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。 104 105 用filter()这个高阶函数,关键在于正确实现一个“筛选”函数 106 */ 107 108 //删掉偶数,只保留奇数 109 var arr5 = [1, 2, 3, 4, 5, 7] 110 var jishu = arr5.filter (function (x) { 111 return (x % 2) !== 0 112 }) 113 console.log (jishu) 114 115 //把一个Array中的空字符串删掉 116 var arr6 = ['A', '', 'B ', null, undefined, 'C', ' '] 117 var kong = arr6.filter (function (x){ 118 return x && x.trim(); 119 }) 120 console.log (kong) 121 122 /* 123 回调函数 124 filter() 接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身 125 */ 126 var arr7 = ['A', 'B', 'C'] 127 var huidiao = arr7.filter(function (element, index, self) { 128 console.log(element) 129 console.log(index) 130 console.log(self) 131 return true 132 }) 133 134 //去重 135 var arr8 = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'] 136 var quchong = arr8.filter(function(element, index, self){ 137 return self.indexOf(element) === index; 138 }) 139 console.log(quchong.toString()) 140 141 142 //取素数 143 function get_primes(arr) { 144 return arr.filter(element => { 145 for (let i = 2; i < element; i++) { 146 if (element % i === 0) return false; 147 } 148 if (element === 1) return false; 149 return true; 150 }); 151 } 152 // 测试: 153 var 154 x, 155 r, 156 arr = []; 157 for (x = 1; x < 100; x++) { 158 arr.push(x); 159 } 160 r = get_primes(arr); 161 if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) { 162 console.log('测试通过!'); 163 } else { 164 console.log('测试失败: ' + r.toString()); 165 } 166 167 168 169 /* 170 sort 171 JavaScript的Array的sort()方法就是用于排序的 172 排序规则:Array的sort()方法默认把所有元素先转换为String再按照ASCII排序 173 174 如果不知道sort()方法的默认排序规则,直接对数字排序,绝对栽进坑里! 175 幸运的是,sort()方法也是一个高阶函数,它还可以接收一个比较函数来实现自定义的排序 176 177 sort()方法会直接对Array进行修改,它返回的结果仍是当前Array 178 */ 179 180 181 //顺序 182 var arr9 = [10, 20, 1, 2] 183 arr9.sort(function (x, y) { 184 if (x < y) { 185 return -1 186 } 187 if (x > y) { 188 return 1 189 } 190 return 0 191 }) 192 console.log(arr9) 193 194 //倒序 195 arr9.sort(function (x, y) { 196 if (x < y) { 197 return 1 198 } 199 if (x > y) { 200 return -1 201 } 202 return 0 203 }) 204 console.log(arr9) 205 206 //字符串排序应忽略大小写,定义出忽略大小写的比较算法 207 //顺序 208 var arr10 = ['Google', 'apple', 'Microsoft'] 209 arr10.sort(function (x, y) { 210 x = x.toUpperCase() 211 y = y.toUpperCase() 212 if (x < y) { 213 return -1 214 } 215 if (x > y) { 216 return 1 217 } 218 return 0 219 }) 220 console.log(arr10) 221 222 //倒序 223 arr10.sort(function (x, y) { 224 x = x.toUpperCase() 225 y = y.toUpperCase() 226 if (x < y) { 227 return 1 228 } 229 if (x > y) { 230 return -1 231 } 232 return 0 233 }) 234 console.log(arr10) 235 236 237 //高阶函数的抽象能力是非常强大的,而且,核心代码可以保持得非常简洁。 238 </script>
<script>
/*高阶函数JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数编写高阶函数,就是让函数的参数能够接收别的函数*/function add(x, y, f) { return f(x) + f(y);}/*map/reducemap()由于map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果作为高阶函数,事实上它把运算规则抽象了,因此,我们不但可以计算简单的f(x)=x2,还可以计算任意复杂的函数reduce
*///练习function pow(x) {return x*x}var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]console.log(arr.map(pow))console.log(arr.map(String))
// arr.reduce(f) = f(f(f(x1, x2), x3), x4))arr.reduce(function(x, y){var a = x + y;console.log(a)return a})
function product(arrs) {return arrs.reduce(function(x, f){var j = x * fconsole.log(j)return j}) }// 测试:if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) { console.log('测试通过!');}else { console.log('测试失败!');}
function string2int(s) {//split()分割字符串返回的是一个数组;var arr = s.split('');return arr.map(function(x){ //js的弱类型转换,‘-’会将字符串转变为数字, //x (乘) 1也是一个道理,但这样为何不直接return s (乘) 1呢; return x-0;}).reduce(function a(x,y){ return x*10+y;});}// 测试:if (string2int('0') === 0 && string2int('12345') === 12345 && string2int('12300') === 12300) { if (string2int.toString().indexOf('parseInt') !== -1) { console.log('请勿使用parseInt()!'); } else if (string2int.toString().indexOf('Number') !== -1) { console.log('请勿使用Number()!'); } else { console.log('测试通过!'); }}else { console.log('测试失败!');}
function normalize(arr4){arr4.map(function(s){console.log(s = s[0].toUpperCase()+s.substring(1).toLowerCase())})}normalize(['ass', 'bdd'])
var arr3 = ['1', '2', '3'];var r;function returnInt(element){ return parseInt(element,10)}r = arr3.map(returnInt)console.log('[' + r[0] + ', ' + r[1] + ', ' + r[2] + ']');
/*filterfilter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。
和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。
用filter()这个高阶函数,关键在于正确实现一个“筛选”函数*/
//删掉偶数,只保留奇数var arr5 = [1, 2, 3, 4, 5, 7]var jishu = arr5.filter (function (x) {return (x % 2) !== 0 })console.log (jishu)
//把一个Array中的空字符串删掉var arr6 = ['A', '', 'B ', null, undefined, 'C', ' ']var kong = arr6.filter (function (x){return x && x.trim();})console.log (kong)
/*回调函数filter() 接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身*/var arr7 = ['A', 'B', 'C']var huidiao = arr7.filter(function (element, index, self) {console.log(element)console.log(index)console.log(self)return true})
//去重var arr8 = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry']var quchong = arr8.filter(function(element, index, self){return self.indexOf(element) === index;})console.log(quchong.toString())
//取素数function get_primes(arr) { return arr.filter(element => { for (let i = 2; i < element; i++) { if (element % i === 0) return false; } if (element === 1) return false; return true; });}// 测试:var x, r, arr = [];for (x = 1; x < 100; x++) { arr.push(x);}r = get_primes(arr);if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) { console.log('测试通过!');} else { console.log('测试失败: ' + r.toString());}
/*sortJavaScript的Array的sort()方法就是用于排序的排序规则:Array的sort()方法默认把所有元素先转换为String再按照ASCII排序
如果不知道sort()方法的默认排序规则,直接对数字排序,绝对栽进坑里!幸运的是,sort()方法也是一个高阶函数,它还可以接收一个比较函数来实现自定义的排序
sort()方法会直接对Array进行修改,它返回的结果仍是当前Array*/
//顺序var arr9 = [10, 20, 1, 2]arr9.sort(function (x, y) {if (x < y) {return -1}if (x > y) {return 1}return 0})console.log(arr9)
//倒序arr9.sort(function (x, y) {if (x < y) {return 1}if (x > y) {return -1}return 0})console.log(arr9)
//字符串排序应忽略大小写,定义出忽略大小写的比较算法//顺序var arr10 = ['Google', 'apple', 'Microsoft']arr10.sort(function (x, y) {x = x.toUpperCase()y = y.toUpperCase()if (x < y) {return -1}if (x > y) {return 1}return 0})console.log(arr10)
//倒序arr10.sort(function (x, y) {x = x.toUpperCase()y = y.toUpperCase()if (x < y) {return 1}if (x > y) {return -1}return 0})console.log(arr10)
//高阶函数的抽象能力是非常强大的,而且,核心代码可以保持得非常简洁。</script>