JS算法题之查找数字在数组中的索引位置


Posted in Javascript onMay 15, 2019

前言

编写算法时,排序是一个非常重要的概念。它有各种各样的种类:冒泡排序、希尔排序、分块块排序,梳排序,鸡尾酒排序,侏儒排序 —— 这些可不是我瞎编的!

这个算法题能够让我们一睹精彩的世界。我们必须对数字数组进行升序排序,并找出给定数字在该数组中的位置。

算法说明

将值(第二个参数)插入到数组(第一个参数)中,并返回其在排序后的数组中的最低索引。返回的值应该是一个数字。
例如 getIndexToIns([1,2,3,4], 1.5) 应该返回 1,因为 1.5 大于 1(索引0),但小于 2(索引1)。

同样,getIndexToIns([20,3,5], 19) 应该返回 2,因为数组排序后应该是 [3,5,20] , 19 小于 20 (索引2)且大于 5(索引1)。

function getIndexToIns(arr, num) {
 return num;
}

getIndexToIns([40, 60], 50);

本算法题原题

测试用例

  • getIndexToIns([10, 20, 30, 40, 50], 35) 应该返回一个数字 3。
  • getIndexToIns([10, 20, 30, 40, 50], 30) 应该返回一个数字 2.
  • getIndexToIns([40, 60], 50) 应该返回一个数字 1.
  • getIndexToIns([3, 10, 5], 3) 应该返回一个数字 0.
  • getIndexToIns([5, 3, 20, 3], 5) 应该返回一个数字 2.
  • getIndexToIns([2, 20, 10], 19) 应该返回一个数字 2.
  • getIndexToIns([2, 5, 10], 15) 应该返回一个数字 3.
  • getIndexToIns([], 1) 应该返回一个数字 0.

解决方案#1:.sort(),. indexOf()

PEDAC

理解问题:有两个输入:一个数组和一个数字。我们的目标是将输入的数字在输入数组后中排序后,再返回它的索引。
示例/测试用例:我们不知道输入的数组是以哪种方式排序的,但是提供的测试用例清楚地表明,输入的数组应该从小到大进行排序。

请注意,在最后一个测试用例中存在边界问题,其中输入数组是一个空数组。

数据结构:由于我们最终将会返回索引,因此应该坚持使用数组。

我们将会用一个名为 .indexOf() 的方法:

.indexOf() 返回元素在数组中出现的第一个索引,如果元素根本不存在则返回 -1。例如:

let food = ['pizza', 'ice cream', 'chips', 'hot dog', 'cake']
food.indexOf('chips')
// returns 2
food.indexOf('spaghetti')
// returns -1

我们将使用 .concat() 而不是 .push()。为什么呢?因为当使用 .push() 向数组添加元素时,它会返回新数组的长度。而使用 .concat() 向数组添加元素时,它会返回新数组本身。例如:

let array = [4, 10, 20, 37, 45]
array.push(98)
// returns 6
array.concat(98)
// returns [4, 10, 20, 37, 45, 98]

算法:

  1. 将num 插入 arr。
  2. 将 arr 进行升序排序。
  3. 返回 num 的索引。

代码:

function getIndexToIns(arr, num) {
 // Insert num into arr, creating a new array.
  let newArray = arr.concat(num)
 //    [40, 60].concat(50)
 //    [40, 60, 50]

 // Sort the new array from least to greatest.
  newArray.sort((a, b) => a - b)
 // [40, 60, 50].sort((a, b) => a - b)
 // [40, 50, 60]

 // Return the index of num which is now
 // in the correct place in the new array.
  return newArray.indexOf(num);
 // return [40, 50, 60].indexOf(50)
 // 1
}

getIndexToIns([40, 60], 50);

去掉局部变量和注释后的代码:

function getIndexToIns(arr, num) {
 return arr.concat(num).sort((a, b) => a - b).indexOf(num);
}

getIndexToIns([40, 60], 50);

解决方案#2:.sort(),.findIndex()

PEDAC

理解问题:有两个输入:一个数组和一个数字。我们的目标是将输入的数字在输入数组后中排序后,再返回它的索引。
示例/测试用例:我们不知道输入的数组是以哪种方式排序的,但是提供的测试用例清楚地表明,输入的数组应该从小到大进行排序。

这个解决方案需要考虑两个边界情况:

  • 如果输入数组为空,则我们需要返回 0,因为 num 将是该数组中的唯一元素,所以它在索引为 0 的位置。
  • 如果 num 的位置处于升序排序后的 arr 的末尾,那么我们需要返回 arr 的长度。

数据结构:由于我们最终将会返回索引,因此应该坚持使用数组。

让我们看看.findIndex() 并了解它将如何帮助解决这一挑战:

.findIndex() 返回数组中第一个满足条件的元素索引。否则它将返回 -1,这表示没有元素通过测试。例如:

let numbers = [3, 17, 94, 15, 20]
numbers.findIndex((currentNum) => currentNum % 2 == 0)
// returns 2
numbers.findIndex((currentNum) => currentNum > 100)
// returns -1

这对我们很有用,因为我们可以用 .findIndex() 将输入 num 与输入 arr 中的每个数字进行比较,并找出它从最小到最大的顺序。

算法:

  1. 如果 arr 是一个空数组,则返回 0。
  2. 如果 num 处于排序后数组的末尾,则返回 arr 的长度。
  3. 否则,返回索引 num。

代码:

function getIndexToIns(arr, num) {
 // Sort arr from least to greatest.
 let sortedArray = arr.sort((a, b) => a - b)
 //     [40, 60].sort((a, b) => a - b)
 //     [40, 60]

 // Compare num to each number in sortedArray
 // and find the index where num is less than or equal to 
 // a number in sortedArray.
 let index = sortedArray.findIndex((currentNum) => num <= currentNum)
 //   [40, 60].findIndex(40 => 50 <= 40) --> falsy
 //   [40, 60].findIndex(60 => 50 <= 60) --> truthy
 //   returns 1 because num would fit like so [40, 50, 60]

 // Return the correct index of num.
 // If num belongs at the end of sortedArray or if arr is empty 
 // return the length of arr.
 return index === -1 ? arr.length : index
}

getIndexToIns([40, 60], 50);

去掉局部变量和注释的代码:

function getIndexToIns(arr, num) {
 let index = arr.sort((a, b) => a - b).findIndex((currentNum) => num <= currentNum)
 return index === -1 ? arr.length : index
}

getIndexToIns([40, 60], 50);

如果你有其他解决方案或建议,请在评论中分享!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
JS实现div居中示例
Apr 17 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
React组件之间的通信的实例代码
Jun 27 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
JQuery属性操作与循环用法示例
May 15 #jQuery
前端js中的事件循环eventloop机制详解
May 15 #Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 #Javascript
微信小程序的tab选项卡的实现效果
May 15 #Javascript
少女风vue组件库的制作全过程
May 15 #Javascript
vue两组件间值传递 $router.push实现方法
May 15 #Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 #Javascript
You might like
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python脚本监控docker容器
2016/04/27 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
商铺租赁意向书
2014/04/01 职场文书
小学老师寄语大全
2014/04/04 职场文书
核心价值观演讲稿
2014/05/13 职场文书
给校长的一封检讨书
2014/09/20 职场文书
文化大革命观后感
2015/06/17 职场文书
企业愿景口号
2015/12/25 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
Django框架中视图的用法
2022/06/10 Python