JS求Number类型数组中最大元素方法


Posted in Javascript onApril 08, 2018

如何使用JS,在一个Number类型的数组里,查找最大(或最小)数呢?

以下介绍四个方法。

1. 不使用任何库函数

代码如下:

function findMax1 (arr) {
  let result = 0;
  if (Array.isArray(arr)) {
    for (let i = 0; i < arr.length; i++) {
      result = arr[i] > result ? arr[i] : result;
    }
    
    return result;
  } else {
    console.error('The parameter arr is not an array');
    return;
  }
}

解释:

利用一个变量result来存储最大值。遍历待查找的数组,如果当前遍历的元素大于result,就把这个元素赋值给result。

2. 利用Array.reduce()

代码如下:

function findMax2 (arr) {
  let result = 0;
  if (Array.isArray(arr)) {
    result = arr.reduce((a, b) => {
      return a > b ? a : b;
    }, 0);
    
    return result;
  } else {
    console.error('The parameter arr is not an array');
    return;
  }
}

解释:

reduce方法就是通过一个函数,针对一个累加器(accumulator)和数组中的每一个元素,将一个数组最终减少到一个值。

reduce接受两个参数:

第一个是callback,就是那个前面提到的那个函数。它有四个参数:

  1. accumulator:累加器,它是上次运行callback的结果。如果提供了initialValue,那么第一次就是initialValue;
  2. currentValue:当前遍历的数组的元素;
  3. currentIndex:当前遍历的数组的元素的index,从0开始。如果提供了initialValue,那就从1开始;
  4. array:当前应用reduce的数组。

第二个是initialValue,是一个初值,作为第一次运行callback函数的第一个实参。这个是可选的。这里要注意一下,如果这个参数不提供,并且应用在一个空数组上,是会报错的。

那么上面代码的意思就是,每次遍历数组进行比较,大的就留下来,即accumulator,并将其用作下一次和数组元素的比较。最后只留下这一个值,即最大值。

3. 利用Apply和Math.max()

代码如下:

function findMax3 (arr) {
  let result = 0;
  if (Array.isArray(arr)) {
    result = Math.max.apply(null, arr);
    
    return result;
  } else {
    console.error('The parameter arr is not an array');
    return;
  }
}

解释:

apply解释稍显复杂,不作进一步的解释。

它接受两个参数,第一个是thisArg,第二个是argsArray。两个都是可选的。此处简单来说,就是使用一个函数时,参数以数组的方式传递进去。

4. 只用Math.max()

代码如下:

function findMax4 (arr) {
  let result = 0;
  if (Array.isArray(arr)) {
    result = Math.max(...arr);
    
    return result;
  } else {
    console.error('The parameter arr is not an array');
    return;
  }
}

解释:

基于上一个解法的思路,在ES6中,有一个扩展运算符(...),可以将一个数组中的元素拆出来,组成一个用逗号分隔的序列。刚好满足Math.max()函数的需求。

在给大家介绍一下JS之number、Math和数组的相关知识点

1、Number对象。

创建Number对象的方式:

方式1:

var 变量= new Number(数字)

方式2:

var 变量 = 数字;

常用的方法:

toString() 把数字转换成指定进制形式的字符串。(输入数字几,就转换为几, number.toString(2))

toFixed() 指定保留小数位,而且还带四舍五入的功能。

2、Math

Math对象常用的方法:

ceil 向上取整

floor() 向下取整

random() 随机数方法 // 产生的伪随机数介于 0 和 1 之间(含 0,不含 1),

round 四舍五入

3、Array数组对象:

创建数组的方式1:

var 变量名 = new Array(); 创建一个长度为0的数组。

方式2:

var 变量名= new Array(长度) 创建一个指定长度的数组对象。

方式3:

var 变量名 = new Array("元素1","元素2"...); 给数组指定元素创建数组 的对象。

方式4:

var 变量名 = ["元素1","元素2"...];

数组要注意的细节:

1. 在javascript中数组的长度是可以发生变化的。

var arr = new Array(); //创建了一个长度为0的数组对象。
arr[100] = 10;
document.write("arr长度:"+arr.length+"<br/>");
var arr2 = new Array("狗娃","狗剩","铁蛋");
arr2 = ["狗娃","狗剩","铁蛋","张三"];
document.write("arr2长度:"+arr2.length+"<br/>");

3.1数字的方法

a、concat把arr1与arr2的数组元素组成一个新的数组返回。
arr1 = arr1.concat(arr2);

b、join使用指定的分隔符把数组中的元素拼装成一个字符串返回。

var elements = arr1.join(",");

c、pop :移除数组中的最后一个元素并返回该元素。

d、push:将新元素添加到一个数组中,并返回数组的新长度值。

arr1.push("你好");

e、reverse(); 翻转数组的元素

f、slice指定数组 的开始索引值与结束索引值截取数组的元素,并且返回子数组。(包头不包尾)

var subArr = arr1.slice(1,2);

g、sort排序,排序的时候一定要传入排序的方法。(不传时默认是按照ASCII表排列)

arr1 = [19,1,20,5];
arr1.sort(sortNumber); //排序,排序的时候一定要传入排序的方法。
function sortNumber(num1,num2){ 
return num1-num2;
}

h、splice第一个参数是开始删除元素的 索引值, 第二参数是删除元素的个数,往后的数据就是插入的元素(也可以不写)。

arr1.splice(1,1,"张三","李四","王五");
Javascript 相关文章推荐
Javascript 继承实现例子
Aug 12 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
angular2模块和共享模块详解
Apr 08 #Javascript
vue下拉列表功能实例代码
Apr 08 #Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 #Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 #Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 #Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 #Javascript
Javascript实现运算符重载详解
Apr 07 #Javascript
You might like
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
python用什么编辑器进行项目开发
2020/06/17 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
求职自我评价范文
2015/03/09 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers