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 对象属性)

---

其他数组相关传送门

1. ES6之数组新特性
2. JavaScript常用数组处理
3. JavaScript 数组处理

---

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 (返回的是匹配到的第一个元素的索引)