JavaScript学习笔记（十）——高阶函数之map，re…

2018-06-24 00:53:01来源：未知阅读 ()

在学习廖雪峰前辈的JavaScript教程中，遇到了一些需要注意的点，因此作为学习笔记列出来，提醒自己注意！

如果大家有需要，欢迎访问前辈的博客https://www.liaoxuefeng.com/学习。

高阶函数

概念：函数可以接受另一个函数作为参数的函数称作高阶函数。

简单例子：

function add(x, y, f) {
    return f(x) + f(y);
}

x = -5;
y = 6;
var f = Math.abs;
console.log(add(x,y,f)); //返回结果是 11

map

Array的map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

function sqrt(x) { //数组元素开平方根
    return Math.sqrt(x);
}

var arr = [4,9,16,25,36];

console.log(arr.map(sqrt));//结果为[2,3,4,5,6]

由于 map() 方法定义在JavaScript的 Array 中，我们调用 Array 的 map() 方法，传入我们自己的函数，就得到了一个新的 Array 作为结果。

注意： map() 传入的参数是 pow ，即函数对象本身。

map()作为高阶函数，事实上它把运算规则抽象了，因此，我们可以计算任意复杂的函数，比如，把 Array 的所有数字转为字符串，只需要一行代码：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

reduce

Array的reduce()把一个函数作用在这个 Array 的 [x1, x2, x3...] 上，这个函数必须接收两个参数，reduce() 把结果继续和序列的下一个元素做累积计算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

比如对一个 Array 求和，就可以用 reduce 实现：

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

map & reduce练习

1. 利用reduce()求积

var arr = [99,88,77,66];
function practices(arr) {
 var res = arr.reduce(function ans(x,y) {
     return x * y;
 });
 return res;
}
console.log(practices(arr));

2.把 [1, 3, 5, 7, 9] 变换成整数13579

var arr = [1,3,5,7,9];
function practice2(arr) { 
 var res = arr.reduce(function(x,y) {
     return x * 10 + y;
 });
 return res;
}
console.log(practice2(arr));

3.把一个字符串 13579 先变成 Array——[1, 3, 5, 7, 9] ，再利用 reduce() 就可以写出一个把字符串转换为Number的函数

var str = '13579';
function string2int(str) {
 var res = [];
 for (var i = 0; i < str.length; i++)
     res[i] = str[i] - '0';
 var res = res.reduce( function(x,y) {
     return x * 10 + y;
 })
 return res;
}
console.log(string2int(str));

4.把用户输入的不规范的英文名字，变为首字母大写，其他小写的规范名字。输入： ['adam', 'LISA', 'barT'] ，输出： ['Adam', 'Lisa', 'Bart'] `。`

var arr = ['adam', 'LISA', 'barT'];
function normalize(arr) {
 return arr.map(function(x) {
     return x[0].toUpperCase() + x.substring(1).toLowerCase()
 });
} 
console.log(normalize(arr));

filter

filter也是一个常用的操作，它用于把 Array 的某些元素过滤掉，然后返回剩下的元素。

和 map() 类似， Array 的 filter() 也接收一个函数。和 map() 不同的是， filter() 把传入的函数依次作用于每个元素，然后根据返回值是 true 还是 false 决定保留还是丢弃该元素。

在一个 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']

回调函数

filter() 接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示 Array 的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：

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;
});

利用 filter ，可以巧妙地去除 Array 的重复元素：

'use strict';

var r, arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];

r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
});
console.log(r.toString());//apple,strawberry,banana,pear,orange

去除重复元素依靠的是 indexOf 总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。

sort

排序算法

排序也是在程序中经常用到的算法。通常规定，对于两个元素x和y，如果认为 x < y ，则返回-1，如果认为 x == y ，则返回0，如果认为 x > y ，则返回1，这样，排序算法就不用关心具体的比较过程，而是根据比较结果直接排序。

JavaScript的 Array 的 sort() 方法就是用于排序的，但是排序结果可能让你大吃一惊：

// 看上去正常的结果:
['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];

// apple排在了最后:
['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']

// 无法理解的结果:
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

第二个排序把 apple 排在了最后，是因为字符串根据ASCII码进行排序，而小写字母a的ASCII码在大写字母之后。

第三个排序是因为 Array 的 sort() 方法默认把所有元素先转换为String再排序，结果'10'排在了'2'的前面，因为字符'1'比字符'2'的ASCII码小。

如果不知道 sort() 方法的默认排序规则，直接对数字排序，绝对栽进坑里！

幸运的是， sort() 方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。

要按数字大小排序，我们可以这么写：

'use strict';

var arr = [10, 20, 1, 2];

arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});
console.log(arr); // [1, 2, 10, 20]

如果要倒序排序，我们可以把大的数放前面：

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

默认情况下，对字符串排序，是按照ASCII的大小比较的，现在，我们提出排序应该忽略大小写，按照字母序排序。要实现这个算法，不必对现有代码大加改动，只要我们能定义出忽略大小写的比较算法就可以：

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']

忽略大小写来比较两个字符串，实际上就是先把字符串都变成大写（或者都变成小写），再比较。

从上述例子可以看出，高阶函数的抽象能力是非常强大的，而且，核心代码可以保持得非常简洁。

最后友情提示， sort() 方法会直接对 Array 进行修改，它返回的结果仍是当前 Array ：

var a1 = ['B', 'A', 'C'];
var a2 = a1.sort();
a1; // ['A', 'B', 'C']
a2; // ['A', 'B', 'C']
a1 === a2; // true, a1和a2是同一对象

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：阿里云 Angular 2 UI框架 NG-ZORRO介绍

下一篇：Angular 报错 Can't bind to 'formGroup'

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签