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 (返回的是匹配到的第一个元素的索引)
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499242.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」