Array高阶函数reduce&filter

最新推荐文章于 2024-09-13 17:32:25 发布
最新推荐文章于 2024-09-13 17:32:25 发布
阅读量125 收藏
点赞数
文章标签： json
原文链接：https://juejin.im/post/5c84d5136fb9a049d442a199
版权

① reduce()方法

1、语法

arr.reduce(callback,[initialValue])
复制代码

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）

    1、previousValue （上一次调用回调返回的值(没有提供initialValue)，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）
复制代码

2、实例解析 initialValue 参数

  1. 没有提供initialValue参数

    var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
// 打印结果： 
// 1 2 1
// 3 3 2
// 6 4 3 
// [1, 2, 3, 4, 5] 15
复制代码

    这里可以看出，上面的例子index是从1开始的，第一次的prev的值是数组的第一个值。数组长度是4，但是reduce函数循环3次。

  2. 提供initialValue参数

    var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //注意这里设置了初始值
console.log(arr, sum);

 // 打印结果： 
 // 0 1 0
 // 1 2 1
 // 3 3 2 
 // 6 4 3
 // [1, 2, 3, 4] 10
复制代码

    这个例子index是从0开始的，第一次的prev的值是我们设置的初始值0，数组长度是4，reduce函数循环4次。

结论：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

注意：如果这个数组为空，运用reduce是什么情况？

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
//报错，"TypeError: Reduce of empty array with no initial value"
复制代码

但是要是我们设置了初始值就不会报错，如下：

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0)
console.log(arr, sum); // [] 0
复制代码

所以一般来说我们提供初始值通常更安全

3、reduce的高级用法

  1. 计算数组中每个元素出现的次数

    let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
复制代码

  2. 数组去重

    let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]
//-----------------------------------------------
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current)=>{
    if(init.length===0 || init[init.length-1]!==current){
        init.push(current);
    }
    return init;
}, []);
console.log(result); //[1,2,3,4,5]

// 不能使用	pre.push(cur) 因为数组的push方法返回的是新数组的长度,而concat返回的是新数组
复制代码

  3. 将二维数组转化为一维

    let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
复制代码

  4. 将多维数组转化为一维

    let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
复制代码

  5. 对象里的属性求和

    var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function (prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60
复制代码

  6. 按属性对object分类

    var people = [
    { name: 'Alice', age: 21 },
    { name: 'Max', age: 20 },
    { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
    return objectArray.reduce(function (acc, obj) {
        console.log(obj)
        var key = obj[property];
        if (!acc[key]) {
            acc[key] = [];
        }
        acc[key].push(obj);
        return acc;
    }, {});
}

var groupedPeople = groupBy(people, 'age');

// { 
//   20: [
//     { name: 'Max', age: 20 }, 
//     { name: 'Jane', age: 20 }
//   ], 
//   21: [{ name: 'Alice', age: 21 }] 
// }
复制代码

  7. 功能型函数管道

    // Building-blocks to use for composition
const double = x => x + x;
const triple = x => 3 * x;
const quadruple = x => 4 * x;

// Function composition enabling pipe functionality
const pipe = (...functions) => input => functions.reduce(
    (acc, fn) => fn(acc),
    input
);

// 还原函数
// function pipe(...functions) {
//     return function (input) {
//         return functions.reduce(function (acc, fn) {
//             return fn(acc)
//         }, input)
//     }
// }

// Composed functions for multiplication of specific values
const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple);

// Usage
multiply6(6); // 36
multiply9(9); // 81
multiply16(16); // 256
multiply24(10); // 240
复制代码

② filter()方法

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

1、参数

callback

用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。
复制代码

返回true表示保留该元素（通过测试），false则不保留。它接受三个参数：

**element**

	当前在数组中处理的元素。

**index**可选

	正在处理元素在数组中的索引。

**array**可选

	调用了`filter`的数组。
复制代码

thisArg可选

可选。执行 `callback` 时的用于 `this` 的值。
复制代码

2、返回值

一个新的通过测试的元素的集合的数组，如果没有通过测试则返回空数组

3、返回值

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

callback 被调用时传入三个参数：

  1. 元素的值
  2. 元素的索引
  3. 被遍历的数组

如果为 filter 提供一个 thisArg 参数，则它会被作为 callback 被调用时的 this 值。否则，callback 的 this 值在非严格模式下将是全局对象，严格模式下为 undefined。 callback 最终观察到的this值是根据通常函数所看到的 "this"的规则确定的。

filter 不会改变原数组，它返回过滤后的新数组。

filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

4、示例

  • 筛选排除所有的小值
function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
复制代码
  • 过滤JSON中的无效条目
var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  } 
  invalidEntries++;
  return false; 
}

var arrByID = arr.filter(filterByID);

console.log('Filtered Array\n', arrByID); 
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries); 
// Number of Invalid Entries = 5
复制代码
  • 在数组中搜索
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']
复制代码
  • GitHub: 欢迎Star wq93
weixin_34217711
关注
swift 高阶函数Reduce，Filter，Map
qq_36002582的博客
01-25 779
Reduce: Swift中reduct在Array类中的定义为 reduce(initial: U, combine: (U, T) -> U) -> U 接收两个参数，一个为类型U的初始值，另一个为把类型为U的元素和类型为T的元素组合成一个类型为U的值的函数。最终结果整个数组就变成了一个类型为U的值。 在事例中U和T是Int，初始值是0，combine函数计算两个Int之和。 red
typed-morph:用于处理 Javascript 类型数组的高阶函数（map、reduce、filter）
06-26
用于处理 Javascript 类型数组的高阶函数（map、reduce、filter）。 它们不使用中间数组进行链接，而是利用。 安装 npm i typed-morph 用法 地图 var wrap = require ( 'typed-morph' ) ; var elements = new Uint...
Array 中的高阶函数 ---- map, filter, reduce
weixin_43342105的博客
04-23 143
Array 中的高阶函数 ---- map, filter, reduce
Array中的map()，filter()和reduce()
qq_40289624的博客
11-09 218
一、map() map用于遍历数组中每一项的值，进行一系列的操作。 const prices = [19.99, 4.95, 25, 3.50]; let new_prices = []; for(let i = 0; i < prices.length; i++) { new_prices.push(prices[i] * 1.06); } 用map来书写会简单许多： const prices= [19.99, 4.95, 25, 3.50]; let new_prices =
数组的高级用法：Array.filter()，Array.forEach()，Array.find()，Array.reduce()
first_hands的博客
04-13 152
说明：state.car是个数组，对它进行循环第一个参数state就是它本身，newState是传递进来的参数 ，对它进行循环，配合箭头函数，循环出来的goods_state值进行赋值newState。说明： state.cart是个数组，goods_id是传递进来的参数，配合箭头函数使用 意思是cart数组里面的goods_id和传递进来的goods_id判断。// 通过数组里商品的id和外界传过来的id 判断cart数组里 有没有该商品。方法创建一个包含通过测试的数组元素的新数组。
高阶函数---filter函数
菜鸟可以飞的博客
03-12 1118
filter函数:  filter(function or None, iterable) 筛选可迭代对象iterable 中的数据，返回一个可迭代对象，此可迭代对象将对iterable生成的数据进行筛选  function 数将对iterable中每个元素进行求值，返回Flase则将此数据丢充，    返回True则保留此数据  示例：    # 写一个函数判断是奇数还是偶数：    def i...
golang Map Reduce Filter 业务和控制分离
qfzhangwei的专栏
07-27 325
package main import ( "fmt" "strings" ) func Filter(arr []int, fn func(n int) bool) []int { var newArray = []int{} for _, it := range arr { if fn(it) { newArray = append(newArray, it) } } return newArray } func Reduce(arr []string, fn func.
Javascript中的高阶函数介绍
10-24
例如，数组的map、reduce、filter等方法都是高阶函数，因为它们接收函数作为参数，并且基于这些函数来处理数组中的每个元素。 接下来，我们通过几个具体的代码示例来详细说明如何在Javascript中使用高阶函数。 1. ...
swift 常用高阶函数分享
08-28
本文将深入探讨Swift中的三个常用高阶函数：`map`、`filter`和`reduce`，以及它们在处理数组等容器时的应用。 首先，`map`函数用于对容器中的每个元素应用一个函数，并返回一个新的容器，其中包含应用函数后的结果...
详解JavaScript 高阶函数
10-14
在JavaScript中，有几种常见的高阶函数，如`Array.map()`、`Array.reduce()`、`Array.filter()`和`Array.flat()`，它们在处理数组数据时特别有用。 `Array.map()` 是一种高阶函数，用于对数组中的每个元素应用一个...
Array的 every、some、filter、map的区别，以及和reduce的区别
大灰狼的小绵羊哥哥的博客
05-08 1435
这几个方法有时候总是傻傻分不清，尤其map，总是一下子有点懵逼记不清和其他方法的区别，每次都需要查一下API，他们的相同点都是需要遍历数组中的每一项，重点是他们的区别，不要搞混了，搞清楚他们的返回结果有什么区别。every、some这两个比较好理解，测试数组的元素是否都通过了指定函数的测试，测试一个数组是否符合某个条件，every表示每一项都必须通过才会返回true，some表示只要数组元素某一项...
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
大灰狼的小绵羊哥哥的博客
02-11 8488
ECMAScript5标准发布于2009年12月3日，它带来了一些新的，改善现有的Array数组操作的方法。然而，这些新奇的数组方法并没有真正流行起来的，因为当时市场上缺乏支持ES5的浏览器。 Array "Extras" 没有人怀疑这些方法的实用性，但写polyfill（PS:兼容旧版浏览器的插件）对他们来说是不值得的。它把“必须实现”变成了“最好实现”。有人居然将这些数组方法称之为Arra
es5如何实现promise_JavaScript之API实现
weixin_36296063的博客
12-25 225
有不少刚入行的小白跟我说：“JavaScript 很多 API 记不清楚怎么办？数组的这方法、那方法总是傻傻分不清楚，该如何是好？操作 DOM 的方式今天记、明天忘，真让人奔溃！”甚至有的开发者在讨论面试时，总向我抱怨：“面试官总爱纠结 API 的使用，甚至 jQuery 某些方法的参数顺序都需要让我说清楚！”我认为，对于反复使用的方法，所有人都要做到“机械记忆”，能够反手写出。一些貌似永远记不清...
数组去重的几种方法
Vincentyun
05-25 1005
1.对象属性去重（哈希表法） function uniqueArr(arr) { var temp = {}; var result = []; for (var i = 0, j = arr.length; i &amp;lt; j; i++) { if (!temp[arr[i]]) { temp[arr[i]] = true; result.push...
数组Array方法之filter()、map()、sort()、reduce()
Hanhanyoona的博客
07-31 1383
filter()方法：过滤操作，筛选出符合条件的元素，返回组成的新数组。 语法：array.filter(function(currentValue,index,arr)，thisValue) const peoples = [ {name:'Yoona',age:26}, {name:'Jessica',age:27}, {name:'Tiffany',age:29}, {name:'Kr...
ES6高级技巧(二)
weixin_30690833的博客
06-15 126
　Array.from const cities = [ { name: 'Milan', visited: 'no' }, { name: 'Palermo', visited: 'yes' }, { name: 'Genoa', visited: 'yes' }, { name: 'Berlin', visited: 'no' }, { nam...
c++ 构造函数数组_查缺补漏从详细操作js数组到浅析v8中array.js
weixin_39874795的博客
11-20 265
前言最近在写面试编程题，经常用到数组，经常想偷个懒，用它提供的方法，奈何还是对数组方法使用不熟练，导致写了很多的垃圾代码，很多地方稍加修改的话肯定变得简洁高效优雅?所以✍这篇文章本着了解一下JavaScript数组的特性，正如标题所写「通过v8中array.js源码浅析如何自己实现常见的数组方法」，如果你想提高自己编码能力，可以留下来看看这篇文章「阅读完，你将收获?」对常见数组操作方法更...
golang之高阶函数
RenXiang_Code的博客
04-07 2181
golang之高阶函数怎么写一个golang高阶函数 怎么写一个golang高阶函数 首先高阶函数也是函数，相对于普通函数还是有点区别的，区别点在于：这个函数的形参列表或返回参数列表中存在数据类型为函数类型，这就是高阶函数。看下列代码： package main import "fmt" type F func(int int) int func main() { var f F f =...
Gson转换
最新发布
09-13 317
gson格式转换.create());@Overridetry {
深入理解JavaScript高阶函数：AOP实践与原理解析
"这篇关于JavaScript中高阶函数的文章深入探讨了高阶函数的概念，强调了函数作为参数和返回值的能力，并列举了一些常见的高阶函数，如Map、Reduce、Filter和Sort。文章还通过实例展示了如何利用高阶函数实现AOP...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值