Javascript数组系列三之你不了解的迭代2

今天我们来继续 Javascript 数组系列的文章,上文 《Javascript数组系列二之迭代方法1》 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们的开发效率以及数据的处理。接下来我们继续来讲解其他的一些迭代的方法。

天也黑了,时间也不早了,话不多说,撸起袖子干起来!

数组的迭代方法

reduce

该方法对一个累加值和数组中的每一个元素执行给定的函数,返回一个函数累计处理的结果。

乍一看定义好像不是很好理解,来看一个例子你就会立刻明白,简单来说该方法就是对数组进行合并操作。

const numbers = [1, 2, 3, 4, 5];
const result = numbers.reduce((sum, value) => sum + value);
console.log(result); //15

这里值得注意的是,reduce 方法的执行顺序是从左到右,为什么特意指出,因为下面我们会介绍一个从右到左的方法(reduceRight),先行了解下。

从上面的例子我们能看出「reduce」方法的作用,但是可能我们还不清楚具体的执行过程是怎么样的,继续走起!

还是按照以往的惯例,我们先来看看「reduce」的参数和语法

该方法接受两个参数,一个是元素每一项执行的回调函数;一个是可选的参数,作为第一次调用函数的初始值(也就是第一次的累加值)

传入的回调函数会接受个参数分别是:调用函数返回的累计值(accumulator),数组中当前处理的元素(currentValue),当前处理元素的索引(currentIndex,可选),数组本身(array,可选)。

//语法
array.reduce(callback[, initialValue])
array.reduce(callback(accumulator, currentValue, currentIndex, array){
    //return 合并操作
});

参数与语法认清之后,先来看两个例子

//例子1
const numbers = [1, 2, 3, 4, 5];
const result = numbers.reduce((accumulator, currentValue, currentIndex) => {
    console.log(currentIndex); //1, 2, 3, 4
    return accumulator + currentValue;
});
console.log(result); //15

//例子2
const newResult = numbers.reduce((accumulator, currentValue, currentIndex) => {
    console.log(currentIndex);  //0, 1, 2, 3, 4
    return accumulator + currentValue;
}, 10);
console.log(newResult); //25

从以上两个例子中我们也看到一些不同的输出结果,原因是因为我们给定了一个初始值之后,方法开始执行的位置发生变化,那么是如何变化的呢?

这里存在两种情况:

  1. 如果我们在使用「reduce」方法的时候,提供可选的初始值(initialValue),在回调函数第一次执行的时候,第一次的累计值会默认取值为给定的初始值,当前参与计算的元素会从数组的第一项开始 (即:accumulator = initialValue,currentValue = array0)
  2. 如果我们在使用「reduce」方法的时候,没有提供初始值(initialValue),那么在回调函数第一次执行的时候,第一次的累计值为数组的第一项,当前参与计算的值为数组的第二项(即: accumulator = array0, currentValue = array1)

简单来说如果我们提供初始值,回调函数会从数组的第二项(index=0)开始执行,反之回调函数会从数组的第一项开始执行(index=1),这就是上面例子中输出索引的结果不同的原因。

说了这么多,大家肯定很清楚了,那最后我们来看看 「reduce」 方法的兼容性,还是直接上图。

reduce支持的浏览器

reduceRight

从名字我们已经看出「reduceRight」与「reduce」肯定有扯不清的关系了。上面我们也说到「reduce」方法的执行顺序是从左到右。

而「reduceRight」方法的执行顺序为从右到左,除了在这一点上与「reduce」不同之外,其他地方与「reduce」一毛一样,所以我们就不做过多解释了,看一个简单的例子即可。

const numbers = [1, 2, 3, 4, 5];
const result = numbers.reduceRight((accumulator, currentValue, currentIndex) => {
    console.log(currentIndex); //3, 2, 1, 0
    return accumulator + currentValue;
});
console.log(result); //15

find

该方法对数组的每一个元素执行给定的函数,返回满足条件的元素,如果发现满足条件的值会立即返回当前元素,如果未发现满足条件的元素则返回 undefined。

该方法接受两个参数,一个是元素每一项执行的回调函数,一个是可选参数,回调函数运行时 this 的值。

传入的回调函数会接受三个参数分别是:数组中的元素(item),元素的索引(index,可选),数组本身(array,可选)。

//语法
array.find(callback[, this])
array.find(callback(item, index, array){
    //return 执行的操作
});

//例子
const numbers = [4, 9, 16, 25, 29];
const result = numbers.find((item, index)=> {
    console.log(index); //0, 1, 2
    return item > 10;
});
console.log(result); //16

根据案例中打印的结果与最后返回的结果来看,当找到满足条件的元素时会立刻返回结果,并终止函数的执行。可以理解为「find」方法就是在众多数据中找到一个我们想要的。

让我们来看看 「find」方法的兼容性,继续直接上图。

find支持的浏览器

findIndex

通过「find」方法聪明的你们肯定会发现「findIndex」用法。

是的「findIndex」的用法与 「find」基本相同,不同的是「findIndex」返回的是我们满足条件元素的索引,而「find」返回的是元素。

既然如此我们就不做过多介绍,还是利用我们在「find」方法中使用的案例。

//例子
const numbers = [4, 9, 16, 25, 29];
const result = numbers.findIndex((item)=> {
    return item > 10;
});
console.log(result); //2

虽说两者的用法基本相同,但是在没有得到满足我们条件的元素时,其两者返回的结果会略有不同。一个返回 undefined,一个返回 -1。

const numbers = [4, 9, 16, 25, 29];
const result = numbers.find((item)=> {
    return item > 30;
});
console.log(result); //undefined
const resultIndex = numbers.findIndex((item)=> {
    return item > 30;
});
console.log(resultIndex); //-1

indexOf

该方法会对给定的一个值在数组中进行查找,如果找到相同的元素则返回元素的索引,否则返回 -1 。

该方法接受两个参数:一个是要查找的元素(searchElement),一个是查找开始的位置(fromIndex,可选),默认值为 0 。

//语法
arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])

//案例
const numbers = [2, 3, 2, 4, 2];
console.log(numbers.indexOf(2)); //0
console.log(numbers.indexOf('2')); //-1
console.log(numbers.indexOf(2, 1)); //2
console.log(numbers.indexOf(2, -1)); //4

「indexOf」方法有几点需要我们注意的地方。

  • 在方法执行查找的过程中使用的是严格相等(===),案例中查找 '2' 时返回 -1 ,就是这个原因,如果不知道 == 与 === 有什么区别的小伙伴可以自己查阅下资料进行了解。
  • 关于第二个参数 fromIndex,如果当 fromIndex 的数值大于或者等于执行的数组长度时,就会返回 -1,因为没有地方查找了。如果查找的数值为负数,则会从数组的后面开始查找。
  • 要注意的是数组的末尾的索引是从 -1 开始的;例如:-1从数组的最后一个元素开始,-2从数组的倒数第二个元素开始。
  • 非常重要的一点是不管 fromIndex 的数值为正数还是负数「indexOf」方法的查找顺序都是从前向后执行的,案例中最后一个方法输出的是 4 而不是 2 的原因。

那有没有从后向前查找元素的方法呢?答案是肯定的,后面我们会继续说的,在这之前我们先来看一个我们在项目开发过程中经常使用的一个例子。

我们就利用上面说到的 reduce 与 indexOf 来实现一个数组简单去重的方法

const numbers = [2, 3, 2, 4, 2, 3, 1, 4];
const result = numbers.reduce((prev, current) => {
    if (prev.indexOf(current) === -1) {
        prev.push(current);
    }
    return prev;
}, []);
console.log(result); //[2, 3, 4, 1]

最后我们再来看看「indexOf」方法的兼容性。

兼容图表

lastIndexOf

「lastIndexOf」与「indexOf」用法相同;不同的是前者

是从后向前查找,后者是从前向后查找。

const numbers = [2, 3, 2, 4, 2];
console.log(numbers.lastIndexOf(2)); //4
console.log(numbers.lastIndexOf('2')); //-1
console.log(numbers.lastIndexOf(2, 1)); //0
console.log(numbers.lastIndexOf(2, -1)); //4

总结

我们花了两篇文章说了数组的一系列迭代方法,其实包括 forEach、map、filter、find、reduce等等,从中我们可以看出数组在 Javascript 中的地位,同时数组在我们实际的项目中也扮演着重要的地位。如果文章你喜欢,可以继续关注,后面我们还会说到数组的其他一些操作方法也同样有着很重要的作用。

本文原创文章发布于微信公众号:Modeng。关注并回复 「前端书籍」百本经典技术书籍免费领取,你懂的!

系列文章列表:

  1. 《Javascript数组系列一之栈与队列》
  2. 《Javascript数组系列二之迭代方法1》https://cloud.tencent.com/developer/article/1339842)
  3. 《Javascript数组系列三之迭代方法2》
  4. 《Javascript数组系列四之数组的转换与排序sort》
  5. 《Javascript数组系列五之增删改和强大的 splice》

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏风口上的猪的文章

.NET面试题系列[10] - IEnumerable的派生类

IEnumerable分为两个版本:泛型的和非泛型的。IEnumerable只有一个方法GetEnumerator。如果你只需要数据而不打算修改它,不打算为集合...

12220
来自专栏jessetalks

C#集合类型大盘点

C#集体类型( Collections in C#)   集合是.NET FCL(Framework Class Library)中很重要的一部分,也是我们开发...

29470
来自专栏哲学驱动设计

重构一个繁琐的数据结构

    在GIX4项目的开发过程中,遇到一个比较复杂的数据结构。复杂,是因为它有许多限制条件。我的工作是在现有系统中,添加新的功能,并在过程中重构部分旧代码。 ...

250100
来自专栏Java Web

《编写高质量代码》学习笔记(2)

写着写着发现简书提醒我文章接近字数极限,建议我换一篇写了。 ---- 建议52:推荐使用String直接量赋值 一般对象都是通过new关键字生成的,但是Str...

36940
来自专栏CDA数据分析师

Python3 大作战之 encode 与 decode 讲解

原文链接http://blog.csdn.net/qq_29053519/article/details/79170519 大家好,很久没更新了,也是年底了最近...

30450
来自专栏Coco的专栏

高性能Javascript--高效的数据访问

10820
来自专栏程序你好

C# 发展历史及版本新功能介绍

9320
来自专栏飞雪无情的博客

从Java到Golang快速入门

Golang从09年发布,中间经历了多个版本的演进,已经渐渐趋于成熟,并且出现了很多优秀的开源项目,比如我们熟知的docker,etcd,kubernetes等...

12330
来自专栏影子

jsp的C标签一般使用方法以及js接收servlet中的对象及对象数字

40680
来自专栏Jimoer

在Java的反射中,Class.forName和ClassLoader的区别

最近在面试过程中有被问到,在Java反射中Class.forName()加载类和使用ClassLoader加载类的区别。当时没有想出来后来自己研究了一下就写下来...

16420

扫码关注云+社区

领取腾讯云代金券