js 数组 find,some,filter,reduce区别详解

区分清楚Array中filter、find、some、reduce这几个方法的区别，根据它们的使用场景更好的应用在日常编码中。

Array.find

Array.find 返回一个对象（第一个满足条件的对象）后停止遍历

const arrTest = [
    { id: 1, name: "a" },
    { id: 2, name: "b" },
    { id: 3, name: "b" },
    { id: 4, name: "c" }
]

// 过滤条件
function getName(val) {
    return arrTest => arrTest.name === val
}
// 如果我们是想找到第一个满足条件的数据，应该使用`Array.find`
console.log(arrTest.find(getName("b")))
// { id: 2, name: "b" }

Array.some

Array.some 返回是否满足条件的布尔值

const arrTest = [
    { id: 1, name: "a", status: "loading" },
    { id: 2, name: "b", status: "loading" },
    { id: 3, name: "b", status: "success" }
]

// 过滤条件
function getStatus(val) {
    return arrTest => arrTest.status === val
}

// 如果我们需要查找一个数组中是否存在某个数据的时候，使用Array.some直接拿到结果
console.log(arrTest.some(getStatus("success")))
// true

Array.filter

Array.filter 遍历整个Array返回一个数组（包含所有满足条件的对象）

const arrTest = [
    { id: 1, name: "a", status: "loading" },
    { id: 2, name: "b", status: "loading" },
    { id: 3, name: "b", status: "success" }
]

// 过滤条件
function getStatus(val) {
    return arrTest => arrTest.status === val
}

// 如果我们是需要过滤出一个数组中所有满足条件的数据，应该使用Array.filter
console.log(arrTest.filter(getStatus("loading")))
// [
//   { id: 1, name: "a", status: "loading" },
//   { id: 2, name: "b", status: "loading" }
// ]

Array.reduce

Array.reduce 为数组的归并方法，使用场景很多，比如求和、求乘积，计次，去重，多维转一维，属性求和等...
本节示例主要实现Array.reduce对一组数据进行条件过滤后，返回一个新的数组

const arrTest = [
    { id: 1, status: "loading" },
    { id: 2, status: "loading" },
    { id: 3, status: "success" }
]

console.log(
    arrTest.reduce((acc, character) => {
        return character.status === "loading"
            ? acc.concat(
                  Object.assign({}, character, { color: "info" })
              )
            : acc
    }, [])
)
// [
//   { id: 1, status: "loading", color: "info" },
//   { id: 2, status: "loading", color: "info" }
// ]

与Array.filter返回的数组的不同，filter返回的是原数组中符合条件的对象集合，filter与 Array.map 结合也可以实现上面的结果，为什么使用reduce更好呢？

// Array.map 和 Array.filter 组合

console.log(
    arrTest
        .filter(character => character.status === "loading")
        .map(character =>
            Object.assign({}, character, { color: "info" })
        )
)
// [
//   { id: 1, status: "loading", color: "info" },
//   { id: 2, status: "loading", color: "info" }
// ]

结论：同时使用 Array.filter 和 Array.map 的时候，对整个数组循环了 2 遍。第一次是过滤返回一个新的数组，第二次通过 map 又构造一个新的数组。使用了两个数组方法，每一个方法都有各自的回调函数，而且 filter 返回的数组以后再也不会用到。
使用 Array.reduce 同样的结果，代码更优雅。

到此这篇关于js 数组 find,some,filter,reduce区别详解的文章就介绍到这了,更多相关js 数组 find,some,filter,reduce内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js删除数组中的元素delete和splice的区别详解

    例如有一个数组是 :var textArr = ['a','b','c','d']; 这时我想删除这个数组中的b元素: 方法一:delete 删除数组 delete textArr[1]  结果为: ["a",undefined,"c","d"] 只是被删除的元素变成了 undefined 其他的元素的键值还是不变. 方法二:aplice 删除数组 splice(index,len,[item]) 注释:该方法会改变原始数组. index:数组开

  • JS数组合并push与concat区别分析

    本文实例讲述了JS数组合并push与concat区别.分享给大家供大家参考,具体如下: 注意 concat 拼写,二者功能很相像,但有两点区别. 先看代码: var arr = []; arr.push(1); arr.push([2, 3]); arr.push(4, 5); arr = arr.concat(6); arr = arr.concat([7, 8]); arr = arr.concat(9, 10); arr.each(function(index, value){ alert

  • JavaScript 数组some()和filter()的用法及区别

    some方法 array1.some(callbackfn[, thisArg]) 对数组array1中的每个元素调用回调函数callbackfn,当回调函数返回true或者遍历完所有数组后,some方法终止.可选参数thisArg可以替换回调函数中的this对象 filter方法 array1.filter(callbackfn[, thisArg]) 对数组array1中的每个元素调用回调函数callbackfn方法,该方法会返回一个在回调函数中返回true的元素的新的集合.可选参数this

  • js数组如何添加json数据及js数组与json的区别

    JSON(JavaScript Object Notation )是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,JSON是JavaScript原生数据格式. 下面给大家介绍js数组添加json数据的两种方式. // 第一种方式 personInfo : [], for(var i = 0; i < _STAGE.passengerInfoArray.length; i++){ var name = _STAGE.passengerInfoArray[i]; var person =

  • JavaScript伪数组和数组的使用与区别

    伪数组和数组 在JavaScript中,除了5种原始数据类型之外,其他所有的都是对象,包括函数(Function). 对象与数组的关系 在说区别之前,需要先提到另外一个知识,就是 JavaScript 的原型继承. 所有 JavaScript 的内置构造函数都是继承自 Object.prototype . 在这个前提下,可以理解为使用 new Array() 或 [] 创建出来的数组对象,都会拥有 Object.prototype 的属性值. var obj = {};// 拥有 Object.

  • javascript数组遍历for与for in区别详解

    js中遍历数组的有两种方式 复制代码 代码如下: var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){     alert(array[i]) } //foreach循环 for(var i in array){     alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key

  • js 数组 find,some,filter,reduce区别详解

    区分清楚Array中filter.find.some.reduce这几个方法的区别,根据它们的使用场景更好的应用在日常编码中. Array.find Array.find 返回一个对象(第一个满足条件的对象)后停止遍历 const arrTest = [ { id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "b" }, { id: 4, name: "c" }

  • 原生JS与JQ获取元素的区别详解

    这篇文章主要介绍了原生JS与JQ获取元素的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定的元素封装成DOM对象): (1)通过元素ID获取:document.getElementById(),示例如下: 我们在控制台输出,结果如下: 可以

  • node.js中grunt和gulp的区别详解

    node.js中grunt和gulp的区别详解 自nodeJS登上前端舞台,自动化构建变得越来越流行.目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不多,不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地,有着她独到的优点. 易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码. 高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件. 高质量 Gulp的每个插件只完成一个功能

  • 基于js中this和event 的区别(详解)

    今天在看javascript入门经典-事件一章中看到了 this 和 event 两种传参形式.因为作为一个初级的前端开发人员平时只用过 this传参,so很想弄清楚,this和event的区别是什么,什么情况下用什么比较合适. onclick = changeImg(this)       vs     onclick = changeImg(event) <img src='usa.gif' onclick="changeImg(event)" /> <scrip

  • 对python中数组的del,remove,pop区别详解

    以a=[1,2,3] 为例,似乎使用del, remove, pop一个元素2 之后 a都是为 [1,3], 如下: >>> a=[1,2,3] >>> a.remove(2) >>> a [1, 3] >>> a=[1,2,3] >>> del a[1] >>> a [1, 3] >>> a= [1,2,3] >>> a.pop(1) 2 >>>

  • python中的数组赋值与拷贝的区别详解

    具体的注解我已经写在了程序里面:通俗的解释了python里面的浅拷贝与深拷贝的不同,请看程序. # -*- coding: utf-8 -*- import numpy as np import copy as cp import matplotlib.pyplot as plt import time import math fig = plt.figure() ax = fig.add_subplot(241) # 定义一个多维数组 x = np.array([[1, 2, 3], [4,

  • js 数组当前行添加数据方法详解

    js 数组当前行添加数据方法详解

    需求:1.点击新增一栏商品信息,表单验证区分 2.输入SKU编码,带出当前行的产品名称,品牌及单位 解决: 到此这篇关于js 数组当前行添加数据方法详解的文章就介绍到这了,更多相关js 数组当前行添加数据方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • JS数组降维的几种方法详解

    二维数组降维 使用数组实例方法concat和ES6扩展运算符降维 let arr=[1,2,[3,4],5]; let arr1=[].concat(...arr); //先使用扩展运算符打散最外边的数组,concat自带打散粘合数组的功能 console.log(arr1); // [1, 2, 3, 4, 5] //ES6之前用apply打散数据的兼容性写法 var arr2=[1,2,[3,4],5]; var arr3=[].concat.apply([],arr2); console.

  • php数组转换js数组操作及json_encode的用法详解

    对于php,个人感觉能够熟练操作数组和字符串,基本上已经是入门了,php本身有很多操作数组和字符串的函数,今天在做一个功能时,需要用Js动态的创建门店信息,这些信息是要从后台添加的,想来想去,通过php读取数据库,得到数组,然后将数组转化成符合需求js数组,php数组形式为: 复制代码 代码如下: $newArray = array(array('地区'=>'北京地区','items'=>'10','detail'=>array(0=>array('店名'=>'旗舰店','u

  • JS数组扁平化(flat)方法总结详解

    需求:多维数组=>一维数组 let ary = [1, [2, [3, [4, 5]]], 6]; let str = JSON.stringify(ary); 第0种处理:直接的调用 arr_flat = arr.flat(Infinity); 第一种处理 ary = str.replace(/(\[\]))/g, '').split(','); 第二种处理 str = str.replace(/(\[\]))/g, ''); str = '[' + str + ']'; ary = JSON

随机推荐