返回顶部
首页 > 资讯 > 精选 >es6如何求数组最大值
  • 183
分享到

es6如何求数组最大值

2023-07-04 11:07:39 183人浏览 泡泡鱼
摘要

这篇文章主要介绍了es6如何求数组最大值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6如何求数组最大值文章都会有所收获,下面我们一起来看看吧。求数组最大值的方法:1、Math.max()配合apply()

这篇文章主要介绍了es6如何求数组最大值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6如何求数组最大值文章都会有所收获,下面我们一起来看看吧。

求数组最大值的方法:1、Math.max()配合apply()来求,语法“Math.max.apply(null,array);”;2、Math.max()配合扩展运算符“...”来求,语法“Math.max(...array);”;3、利用reduce()来求,语法“array.reduce((a,b)=>{return a=a>b?a:b});”。

取数组的最大值的几种方法

// 写法一:Math.max.apply(null, [14, 3, 77, 30]);// 写法二:Math.max(...[14, 3, 77, 30]);// 写法三:reduce[14,3,77,30].reduce((accumulator, currentValue)=>{    return accumulator = accumulator > currentValue ? accumulator : currentValue});

这里提供了三种写法,前两种用的都是Math.max()方法实现的,最后一种用了reduceapi,下面会讲到如何利用基本的Math.max()方法实现 取数组的最大值,详解apply方法在实例中的运用思想,以及reduceAPI的介绍和使用。

Math.max()


前两种写法用的都是Math.max()方法,这里先介绍一下这个方法:

Math.max() 函数返回一组数中的最大值。

用法:

Math.max(10, 20);   //  20Math.max(-10, -20); // -10Math.max(-10, 20);  //  20

注意是一组数中的最大值,不是一个 数组 的最大值,从上面的用法我们可以看到,参数不是一个数组,而是用逗号隔开的一组数,所以我们才不能直接使用该方法来实现取数组的最大值,而是做一些改进:

apply方法和扩展运算符的使用


1、apply方法

前面讲到我们不能直接使用Math.max()方法来实现取数组的最大值,我们可以使用ES5的apply方法来实现。

这里我们主要讲为什么用apply就可以实现获取数组最大值

console.log(Math.max(1, 2, 344, 44, 2, 2, 333));console.log(Math.max.call(null, 1, 2, 344, 44, 2, 2, 333));console.log(Math.max.apply(null, [1, 2, 344, 44, 2, 2, 333]));

es6如何求数组最大值

我们知道call() 方法是使用一个指定的 this 值来调用一个函数,参数的传递和普通函数一样。我们对Math.max使用call方法,第一个参数传null,这样使用就和原来的Math.max()一样了,这当然还没有实现获取数组的最大值,但这是理解Math.max.apply(null, [14, 3, 77, 30]);写法的第一步,也是关键一步。

Math.max()用的是参数列表,即一组数,我们的目标是一个数组,前面讲到了call方法,那这里不就正好可以利用apply方法的差异性即:apply()方法接受的是一个参数数组,来实现我们的需求。

所以,对Math.max使用apply方法,第一个参数传null,第二个参数传数组,这不就实现了我们的需求。

2、扩展运算符的使用

前面我们讲到了对Math.max()使用apply方法来实现功能,事实上,我们在手写实现apply这个方法的时候,就对参数这个问题上做了特殊的处理,如何在apply内部将传入的参数数组重新解构成参数列表?运用到ES6,我们使用了扩展运算符。

既然使用扩展运算符可以把参数数组解构为参数列表,那我们何不拿来用用,直接对Math.max()使用扩展运算符是实现 获取数组最大值的另一实现方式,而这个方式也使获得数组中的最大值变得更容易:

var arr = [1, 2, 3];var max = Math.max(...arr); // 3

es6如何求数组最大值

reduce


使用reduce API实现获取数组最大值:

// reduce[14,3,77,30].reduce((accumulator, currentValue)=>{    return accumulator = accumulator > currentValue ? accumulator : currentValue});

es6如何求数组最大值

reduce方法参数详解

本文更想讲一下reduce API的使用方法

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

需要着重注意的是该方法的参数:

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

概括一下就是reduce方法有两个参数,一个是callback即你自己定义的 reducer 函数,一个是initialValue即初始值。

在多数情况下,我们可能不会使用initialValue初始值这个参数,只使用callback,但是initialValue初始值这个参数于reduce方法又非常相关,所以我们必须清楚这个initialValue参数是干嘛的,还有其他参数都是如何使用的。

下面我们来细细讲一下callback和initialValue这两个参数。

  • callback:

es6如何求数组最大值

callback 执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数,注意这个:如果没有提供 initialValue则第一个值除外,你会发现initialValue在reduce方法中比较关键如果搞不清楚initialValue参数的意义,几乎很难去运用reduce方法。

callback函数又有四个参数,其中前三个参数也是十分关键的,和initialValue参数一样,需要搞清楚含义,分别是:accumulator,currentValue 和 index。

之所以说清楚reduce方法的几个关键参数是非常关键的,主要就在于,initialValue初始值有和没有这两种情况下,callback的三个参数(accumulator,currentValue 和 index)是不一样的。

  • initialValue:

initialValue参数 可选,这个参数作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

下面讲方法在执行过程中,callback的三个参数(accumulator,currentValue 和 index)是如何不一样的:

回调函数第一次执行时,accumulator 和currentValue的取值有两种情况:如果调用reduce()时提供了initialValue,accumulator取值为initialValue,currentValue取数组中的第一个值;如果没有提供 initialValue,那么accumulator取数组中的第一个值,currentValue取数组中的第二个值。

注意:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

这也是index参数里描述的:index 可选。是数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则从索引1起始。

reduce方法如何运行

1.无初始值的情况

假如运行下段reduce()代码:

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){  return accumulator + currentValue;});

callback 被调用四次,每次调用的参数和返回值如下表:

es6如何求数组最大值

由reduce返回的值将是最后一次回调返回值(10)。

你还可以使用箭头函数来代替完整的函数。 下面的代码将产生与上面的代码相同的输出:

[0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr );

2.有初始值的情况

如果你打算提供一个初始值作为reduce()方法的第二个参数,以下是运行过程及结果:

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {    return accumulator + currentValue}, 10)

es6如何求数组最大值

这种情况下reduce()返回的值是20。

reduce使用场景

reduce使用场景1.将二维数组转化为一维

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(  function(a, b) {    return a.concat(b);  },  []);// flattened is [0, 1, 2, 3, 4, 5]

写成箭头函数的形式:

var flattened = [[0, 1], [2, 3], [4, 5]].reduce( ( acc, cur ) => acc.concat(cur), []);

注意!!!上面这个例子,有初始值,初始值是一个空数组[]

concat()方法介绍:

concat() 方法用于合并两个或多个数组。

const array1 = ['a', 'b', 'c'];const array2 = ['d', 'e', 'f'];const array3 = array1.concat(array2);console.log(array3);// expected output: Array ["a", "b", "c", "d", "e", "f"]

连接两个数组

以下代码将两个数组合并为一个新数组:

var alpha = ['a', 'b', 'c'];var numeric = [1, 2, 3];alpha.concat(numeric);// result in ['a', 'b', 'c', 1, 2, 3]

连接三个数组

以下代码将三个数组合并为一个新数组:

var num1 = [1, 2, 3],    num2 = [4, 5, 6],    num3 = [7, 8, 9];var nums = num1.concat(num2, num3);console.log(nums);// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

reduce使用场景2.数组里所有值的和

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {  return accumulator + currentValue;}, 0);// 和为 6

写成箭头函数的形式:

var total = [ 0, 1, 2, 3 ].reduce(  ( acc, cur ) => acc + cur,  0);

注意,这里设置了初始值,为0,如果不这个初始值会怎么样呢?数组为空的时候,会抛错TypeError,再看一遍下面的描述:

如果数组为空且没有提供initialValue,会抛出TypeError 。如果数组仅有一个元素(无论位置如何)并且没有提供initialValue, 或者有提供initialValue但是数组为空,那么此唯一值将被返回并且callback不会被执行。

所以,在使用reduce时我们可以先判断一下数组是否为空,来避免这个问题。

关于“es6如何求数组最大值”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“es6如何求数组最大值”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。

--结束END--

本文标题: es6如何求数组最大值

本文链接: https://lsjlt.com/news/344802.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • es6如何求数组最大值
    这篇文章主要介绍了es6如何求数组最大值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6如何求数组最大值文章都会有所收获,下面我们一起来看看吧。求数组最大值的方法:1、Math.max()配合apply()...
    99+
    2023-07-04
  • es6怎么求数组最大值
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。取数组的最大值的几种方法// 写法一: Math.max.apply(null, [14, 3, 77, 30]); // 写法二: Math.max(...
    99+
    2022-11-22
    javascript ES6 es6数组
  • javascript如何求数组最大值
    这篇文章主要介绍javascript如何求数组最大值,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! javascript求数组最大值的方法:1、声明一个保...
    99+
    2024-04-02
  • php如何求数组中最大值
    这篇“php如何求数组中最大值”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“php如何求数组中最大值”文章吧。php中的ma...
    99+
    2023-07-04
  • 如何求js数组的最大值和最小值
    这篇文章将为大家详细讲解有关如何求js数组的最大值和最小值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。给定数组[54,65,43,21,12,34,45,58,97,2...
    99+
    2024-04-02
  • 如何求php数组的最大值和最小值
    这篇文章主要介绍“如何求php数组的最大值和最小值”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何求php数组的最大值和最小值”文章能帮助大家解决问题。两种方法:1、用“max(数组)”语句获取最...
    99+
    2023-06-30
  • php如何求数组最大值和最小值的差值
    本文小编为大家详细介绍“php如何求数组最大值和最小值的差值”,内容详细,步骤清晰,细节处理妥当,希望这篇“php如何求数组最大值和最小值的差值”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。求差值的步骤:1、使用...
    99+
    2023-07-02
  • php如何求数组中的最大值
    在php中利用for循环求出数组中的最大值,具体方法如下:首先,新建一个php项目文件;php项目文件新建好后,在文件中定义一个数组,并将数组赋值给一个变量;$arr = array(1,5,6,8,9);$max = $arr[0];最后...
    99+
    2024-04-02
  • php如何求数组最大值和下标
    这篇文章主要介绍了php如何求数组最大值和下标的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇php如何求数组最大值和下标文章都会有所收获,下面我们一起来看看吧。php求数组最大值和下标的方法:1、利用max()...
    99+
    2023-06-30
  • mongodb怎么求数组最大值
    在MongoDB中,可以使用$max运算符来求数组的最大值。下面是一个示例:假设有一个名为"students"的集合,其中每个文档包...
    99+
    2023-09-05
    mongodb
  • mongodb数组最大值怎么求
    可以使用MongoDB的$unwind和$group操作来求解数组的最大值。假设有一个名为"collection"的集合,其中有一个...
    99+
    2023-08-23
    mongodb
  • php求二维数组最大最小值
    PHP是一种流行的服务器端编程语言,它可以操作各种类型的数据结构,包括二维数组。在开发Web应用程序时,有时候需要在二维数组中找到最大或最小的值。本文将介绍如何实现这样的功能。首先,我们需要了解什么是二维数组。二维数组是由一组有序的元素组成...
    99+
    2023-05-19
  • php数组如何去掉最大值和最小值后求平均
    这篇文章主要讲解了“php数组如何去掉最大值和最小值后求平均”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php数组如何去掉最大值和最小值后求平均”吧!方法:1、对数组进行升序排序,并用“a...
    99+
    2023-06-30
  • JavaScript如何求最大值
    这篇文章给大家分享的是有关JavaScript如何求最大值的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。最大值Math.max(...[1,2,3,4]) //4 Ma...
    99+
    2024-04-02
  • php中怎么求数组最大值
    这篇文章主要介绍了php中怎么求数组最大值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇php中怎么求数组最大值文章都会有所收获,下面我们一起来看看吧。php中求数组最大值的函数是“max()”。max()函数...
    99+
    2023-07-02
  • javascript求数组最大最小值的方法
    这篇文章主要介绍“javascript求数组最大最小值的方法”,在日常操作中,相信很多人在javascript求数组最大最小值的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2024-04-02
  • php怎么求数组最大值和最小值的差值
    求差值的步骤:1、使用max()函数获取数组最大值,语法“max($arr)”;2、使用min()函数获取数组最小值,语法“min($arr)”;3、使用“-”运算符将获取的最大值和最小值相减计算差值即可,语法“最大值 - 最小值”。本教程...
    99+
    2022-07-07
    php数组 php
  • javascript如何求数组最大值以及它的下标
    这篇文章将为大家详细讲解有关javascript如何求数组最大值以及它的下标,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 方法:1、使用“M...
    99+
    2024-04-02
  • c++求数组最大最小值函数的实现
    目录求数组元素最大最小值函数c++中min和max函数求数组元素最大最小值函数 #include<iostream> #include<algorithm> ...
    99+
    2024-04-02
  • c++怎么求数组的最大和最小值
    本篇内容主要讲解“c++怎么求数组的最大和最小值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“c++怎么求数组的最大和最小值”吧!求数组元素最大最小值函数#include<iostream...
    99+
    2023-07-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作