JavaScript数组高阶函数

文章目录

1. forEach (Array 对象属性)
2. map (Array 对象属性)
3. reduce (Array 对象属性)
4. filter (Array 对象属性)
5. sort (Array 对象属性)
6. every (Array 对象属性)
7. some (Array 对象属性)
8. find (ES6 Array 对象属性)
9. findIndex (ES6 Array 对象属性)

其他数组相关传送门

JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。

Array扩展：forEach、map、reduce、filter、sort 、every 、some 、find 、findIndex

1. forEach (Array 对象属性)

没有return返回值

let arr = [68, 53, 12];

arr.forEach((item, index) => {
	console.log(`第${index}个数是：${item}`);
})
//第0个数是：68
//第1个数是：53
//第2个数是：12

let json = { name: '张三', age: 24 };

console.log(Object.keys(json)) // ["name", "age"]

Object.keys(json).forEach(item => {
  console.log(item+ ':', json[item])
})
// name: 张三   
// age: 24

2. map (Array 对象属性)

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。映射一一对应 n=>n

let arr = [68, 53, 12, 98, 65];

let arr1 = arr.map(function (item) {
    if (item >= 60) {
        return '及格';
    } else {
        return '不及格';
    }
})

// arr1用箭头函数可以简写为：
let arr2 = arr.map(item => item >= 60 ? '及格' : '不及格');

console.log(arr1);  // ["及格", "不及格", "不及格", "及格", "及格"]

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

var r = arr.map(function(i){
	return i*i
});

var m1 = arr.map(function(i){
	return Math.sqrt(i)
});
//简写：
var m2 = arr.map(Math.sqrt);


var s1 = arr.map(function(i){
	return String(i)
});
//简写：
var s2 = arr.map(String);

console.log(r); // [16, 81, 256, 625]

//m2、s2分别是m1、s1的简写  ( String()和Math.sqrt()都是js的内置方法 )
console.log(m1); // [2, 3, 4, 5]
console.log(s1); // ["4", "9", "16", "25"]

3. reduce (Array 对象属性)

有三个参数,数组中的每个值（从左到右）开始缩减，最终计算为一个值。n=>1

let arr = [68, 53, 12, 98, 65];

//从左到右累加
let arr1 = arr.reduce(function(tmp,item,index){ // reduce有三个参数  tmp：前两个数处理的结果
	return tmp + item;
}); 
console.log(arr1); // 296

//从左到右累减
var arr2 = arr.reduce(function (tmp,item,index) {
    return tmp - item;
}); 
console.log(arr2); // -160

// 求平均值
let arr3 = arr.reduce(function(tmp,item,index){
	if(index === arr.length-1){
		return (tmp + item)/arr.length;
	}else{
		return tmp + item;
	}
}); 
console.log(arr3); // 59.2

4. filter (Array 对象属性)

把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。n=>?
过滤掉不符合条件的，只保留符合条件的

let arr = [68, 53, 12, 98, 65];

// 保留及格分
let arr1 = arr.filter(function(item){
	return	item > 60;
})
console.log(arr1); // [68, 98, 65]

// 保留偶数
let arr2 = arr.filter(function(item){
	return	item%2 == 0;
})
console.log(arr2); // [68, 12, 98]

//三个参数
let arr = ['A', 'B', 'C'];
let r = arr.filter(function (item, index, self) {
    console.log(item); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr  ['A', 'B', 'C']
});

//利用filter数组去重
let fruits= ['apple', 'orange', 'banana', 'pear', 'apple', 'orange'];
let f = fruits.filter(function(item, index, self){
	return self.indexOf(item) == index
})
console.log(f); // ["apple", "orange", "banana", "pear"]

5. sort (Array 对象属性)

对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1

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]

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

//注：sort()方法会直接对Array进行修改，它返回的结果仍是当前Array

6. every (Array 对象属性)

判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];

var arr2 = arr.every(function (item) {
    return item < 10;
});
console.log(arr2); // true

var arr3 = arr.every(function (item) {
    return item < 3;
});
console.log(arr3); // false

7. some (Array 对象属性)

判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

var arr = [1, 2, 3, 4, 5];

var arr2 = arr.some(function (item) {
    return item < 3;
});
console.log(arr2); //true

var arr3 = arr.some(function (item) {
    return item < 1;
});
console.log(arr3); // false

8. find (ES6 Array 对象属性)

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}
var a1 = ages.find(checkAdult);  // 18 (返回的是匹配到的第一个元素的值)

// 或者用箭头函数
var a2 = ages.findIndex(ages=>{
	return ages>3
})  // 10 (返回的是匹配到的第一个元素的值)

9. findIndex (ES6 Array 对象属性)

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}
var a1 = ages.findIndex(checkAdult);  // 2 (返回的是匹配到的第一个元素的索引)

// 或者用箭头函数
var a2 = ages.findIndex(ages=>{
	return ages>3
})  // 1 (返回的是匹配到的第一个元素的索引)