-
Notifications
You must be signed in to change notification settings - Fork 22
/
array-filter-map-reduce.js
129 lines (119 loc) · 3.93 KB
/
array-filter-map-reduce.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/**
* Array filter(), map() and reduce()
*
* @参考资料:
* http://danmartensen.svbtle.com/javascripts-map-reduce-and-filter
* http://elijahmanor.com/reducing-filter-and-map-down-to-reduce/
* http://cryto.net/~joepie91/blog/2015/05/04/functional-programming-in-javascript-map-filter-reduce/
*
* 进阶学习:
* JavaScript 内部实现 filter, map, reduce 的方式:
* http://matthewodette.com/map-filter-and-fold-in-javascript/
*/
/** 普通的 for() 循环
* for 循环在处理大型数组时依旧有用武之地(例如,拥有 1000 个元素的数组)
* 或者需要在循环时根据条件来中断的话,for 也依旧很好用
*/
(function () {
var array = [1, 2, 3, 4];
var models = [];
for (var i = 0; i < array.length; i++) {
if (array.indexOf(array[i]) % 2 === 0) {
models.push(array[i]);
}
}
})();
/** Array.map()
*
* 什么时候使用:
* 当你想把一个 array 中的所有元素进行转换,并返回新的数组时
*
* map 方法做了什么:
* 从左往右遍历数组,将各元素分别代入回调函数进行调用,并返回回调函数的返回值,最终组成一个新的数组
*
* 举个栗子:把 一组华氏温度 转换成 一组摄氏温度
*
* 语法:
* array.map(function(elem, index, array) {
* ...
* }, thisArg);
*
* elem: array 中的各个元素
* index: 偏移,从左往右递增
* array: 调用 map 方法的数组
* thisArg: 作为回调中的作用域(this)
*/
(function () {
var farenheit = [0, 32, 45, 55, 67, 79, 94, 105];
var celcius = farenheit.map(function (elem) {
return Math.round((elem - 32) * 5 / 9);
});
console.log(celcius); // [-18, 0, 7, 13, 19, 26, 34, 41]
})();
/** Array.filter()
*
* 什么时候使用:
* 从 array 中过滤不需要的元素时
*
* filter 方法做了什么:
* 与 map 方法类似,从左往右遍历数组,将各元素分别代入回调函数进行调用。
* 但回调函数的返回值必须是一个 boolean,以此来确定当前循环的元素是否要过滤掉。返回 false 则过滤,否则保留
* 但要注意的是,在循环完毕之后,将返回一个新的数组,而只有使回调函数返回了 true 的元素才会在新数组里。
* 回调函数的参数和 map() 方法一样。
*
* 举个栗子:移除数组中重复的元素
*
* 语法:
* array.filter(function(elem, index, array) {
* ...
* }, thisArg);
*
* elem: array 中的各个元素
* index: 偏移,从左往右递增
* array: 调用 filter 方法的数组
* thisArg: 作为回调中的作用域(this)
*/
(function () {
var arr = [1, 2, 3, 4, 5, 3, 7, 2];
var uniqueArr = arr.filter(function (elem, i, arr) {
return arr.indexOf(elem) === i;
});
console.log(uniqueArr);
})();
/** Array.reduce()
*
* 什么时候使用:
* 当你想对一个 array 中的元素进行累加或者拼接时
*
* reduce 方法做了什么:
* 与 map 方法类似,从左往右遍历数组,将各元素分别代入回调函数进行调用。
* 但回调函数的返回值会作为下一次遍历时回调函数的参数,在遍历完所有元素之后,返回最终结果
*
* 举个栗子:计算 2014 年各国家发射火箭数目的综合
*
* 语法:
* array.reduce(function(prevVal, elem, index, array) {
* ...
* }, initialValue);
*
* prevVal: 上一个回调返回的结果
* elem: array 中的元素
* index: 偏移,从左往右递增
* array: 调用 reduce 方法的数组
* initialValue: 初始化的值,作为第一个回调的参数
*
*/
(function () {
var rockets = [
{country: 'Russia', launches: 32},
{country: 'US', launches: 23},
{country: 'China', launches: 16},
{country: 'Europe(ESA)', launches: 7},
{country: 'India', launches: 4},
{country: 'Japan', launches: 3}
];
var sum = rockets.reduce(function (prevVal, elem) {
return prevVal + elem.launches;
}, 0);
console.log(sum);
})();