一、map
- 映射,可以对数组中每个元素进行操作，并逐一返回，生成一个理想的新数组
arr.map(function(item,index,arr){
..............
})
let arr1 = [1,4,9]
let newArr1 = arr1.map(Math.sqrt) // Math.sqrt() 只接受一个参数， 所以默认接受的是数组内每一个元素
// 传入对数组的每一个元素进行开放
console.log(newArr1); // [1,2,3]
//返回对象中指定的字段，组成新数组 (可以将数组的id挑选出来)
let arr4 = [{a:1,x:2},{a:2,x:2},{a:3,x:2}]
let newArr4 = arr4.map(item => item.a)
console.log(newArr4); //[1, 2, 3]
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
- 备注：map的回调函数中不能使用判断语句 (使用的话只能返回 boolean 值)，必须直接return，否则会返回undefined。但是可以返回boolean值
let arr4 = [
{ a: 1, x: 2 },
{ a: 2, x: 2 },
{ a: 3, x: 2 }
]
let newArr4 = arr4.map(item => item.a > 1)
console.log(newArr4) // [false, true, true]
二、reduce
- 接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。
- callback(执行数组中每个值的函数，包含四个参数)
- previousValue(上一次调用回调函数返回的值，或者是提供的初始值（initialValue）)
- currentValue(数组中当前被处理的元素)
- index（当前元素在数组中的索引）
- array（调用reduce的数组）
reduce可以传一个初始值，也可以不传，直接，将previousValue当做初始值
初始值可以传任何类型的值
// 不传递初始值，直接以数组内的第一个元素为初始值。没传递初始值时，第一个参数就是上一次回调返回的值，这里的init依次是：1 3 6
// 累加arr的值
let arr = [10, 20, 30, 40]
let total = arr.reduce((pre, value, index, arr) => {
console.log(pre) // 10, 20, 40, 70 (有初始化值 10)
// console.log(pre) // 10, 30, 60, 100 (无初始化值)
return pre + value
})
console.log(total)
// data 为10
// 传递一个Number初始值，
//init第一次是初始值10，之后每次都是上一次回调函数返回的值：
11 13 16
let arr = [1,2,3,4]
let data = arr.reduce((init,now) => {
return init+now
},10)
//data为20
//传递一个Object初始值. 使对象里的属性和某数组内的元素累加
let arr = [1,2,3,4]
let data = arr.reduce((init,now) => {
init.sum = init.sum + now
return init
},{sum:2})
console.log(data); // {sum:12}
//对象内的某个属性进行累加
let arr = [
{a:1,name:'a'},
{a:2,name:'b'},
{a:3,name:'c'},
]
let data = arr.reduce((init,now) => {
return init + now.a
},0)
console.log(data); // 6
// 查看某字符串，每个字符出现的次数
var str = 'abccacbbaacaa'
var obj = str.split('').reduce((init,now) => {
init[now] ? ++init[now] : init[now] = 1
return init
},{})
console.log(obj); //{a: 6, b: 3, c: 4}
- 再看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
- 计数值大于2的有几个
let arr = [1, 2, 3, 4]
let total = arr.reduce((pre, value, index, arr) => {
if (value > 2) {
return pre + 1
}
return pre
}, 0)
console.log(total)
三、filter
filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。
和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：
···
//过滤掉数组中不符合的元素
let arr = [1,2,3]
let newArr = arr.filter((item) => item > 1)
// 过滤掉数组中空项，转为布尔为false的元素
let arr = [1,'',undefined,2,3]
let newArr = arr.filter(item => item)
// 过滤掉数组内不符合条件的对象
let arr = [{a:1},{a:2},{a:3}]
let newArr = arr.filter(item => item.a > 1)
console.log(newArr); // [{a:2},{a:3}]
//过滤掉指定的空项，将没有x属性的对象过滤掉
let arr = [{a:1,x:2},{b:1},{c:1,x:3}]
let newArr = arr.filter(item => item.x)
console.log(newArr);
// 数组去重
var arr = [1,2,3,1,2,5,4,3,3,1]
var newArr = arr.filter((item,index,arr)=>{
return arr.indexOf(item) === index
})
console.log(newArr)
- 总结： filter： 过滤出来当前完整的元素。 map: 处理过的元素。如果是从一组元素中找出某个元素，用filter，如果对一组元素的子元素需要处理后返回，使用 map
四、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()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。
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 = [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的大小比较的，现在，我们提出排序应该忽略大小写，按照字母序排序。要实现这个算法，不必对现有代码大加改动，只要我们能定义出忽略大小写的比较算法就可以：
默认情况下，对字符串排序，是按照ASCII的大小比较的，现在，我们提出排序应该忽略大小写，按照字母序排序。要实现这个算法，不必对现有代码大加改动，只要我们能定义出忽略大小写的比较算法就可以：
忽略大小写来比较两个字符串，实际上就是先把字符串都变成大写（或者都变成小写），再比较。
从上述例子可以看出，高阶函数的抽象能力是非常强大的，而且，核心代码可以保持得非常简洁。最后友情提示，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是同一对象