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 相关文章推荐
突发奇想的一个jquery插件
Nov 19 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
JS自定义滚动条效果
Mar 13 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP4 与 MySQL 交互使用
2006/10/09 PHP
php 错误处理经验分享
2011/10/11 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python制作CSDN免积分下载器
2015/03/10 Python
Python调用C++程序的方法详解
2017/01/24 Python
tensorflow 模型权重导出实例
2020/01/24 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
运动会广播稿500字
2014/01/28 职场文书
团队拓展活动总结
2014/08/27 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python