JavaScript系列——数组元素左右移动N位算法实现
引言
在自己刚刚毕业不久的时候,去了一家公司面试,面试官现场考了我这道题,我记忆深刻,当时没有想到思路,毫无疑问被面试官当成菜鸟了。
最近刚好在研究数组的各种算法实现,就想到这道题,可以拿来实现一下,纪念自己逝去的青春。
需求
假设有这样一个数组
[1,2,3,4,5]
现在想要左移或者右移N位,比如移动1位
//左移1位
[2,3,4,5,1]
//右移1位
[5,1,2,3,4]
算法实现
这样一道题目,你先不要看我下面的代码,自己思考一下如何实现它,不管是复杂的还是简单的方法。
可以先告诉你我用了2行代码实现左、右移动元素。
拆分法
当我们没有具体思路的时候,就先假设数组移动1位的情况。
[1,2,3,4,5]
=>
[null,1,2,3,4] and [5,null,null,null,null]
=>
[5,1,2,3,4]
这里可以看成2个数组,一个是没有到达边界的元素移动[null,1,2,3,4],一个是到达了边界的元素移动[5,null,null,null,null],当元素到达边界,就会往数组的初始位置移动,形成了一个循环的过程。
很明显,如果我们将这2个移动后的数组合并起来,就是需求的结果。
移动2位
同样符合2个移动后的数组合并起来为结果的情况
[1,2,3,4,5]
=>
[null,null,1,2,3] and [4,5,null,null,null]
=>
[4,5,1,2,3]
刚好移动数组长度
[1,2,3,4,5]
=>
[1,2,3,4,5] and [] //如果没有,就假设为空数组
合并数组
假设移动1位的情况
上面的步骤,我们找到了规律,接下来要做的是找到2个数组,需要用到slice截取数组元素。
截取第一个数组
arr.slice(0,-1)
// [1,2,3,4]
截取第二个数组
arr.slice(-1)
// [5]
合并数组
arr.slice(-1).concat(arr.slice(0,-1))
// [5,1,2,3,4]
这样你就实现了移动1位的情况,接着,你继续拿+5和-5范围内的数字进行测试,发现都可以正常移动,当数字大于5或者小于-5的时候,代码就无效了,始终输出[1,2,3,4,5]
arr.slice(-6).concat(arr.slice(0,-6))
// [1,2,3,4,5]
我们再加上一个小技巧,求余数,假设是移动6,那么,实际上和移动1是相同的,我们就可以根据公式求余数
n = n%arr.length
// n = 6%5 余1
同理,当移动-6时
n = n%arr.length
// n = -6%5 余-1
接着带入公式,发现输出全部都正确了!!
思路分析完了,应该很清晰了吧,源码在下面、
算法源码
arr表示原始数组,n表示移动的距离,可以是正数、可以是0、也可以是负数、正数表示右移,负数表示左移,0表示不移动。
function moveElement(arr, n) {
if(Math.abs(n)>arr.length) n = n%arr.length
return arr.slice(-n).concat(arr.slice(0,-n))
}
// moveElement(arr, 9)
// moveElement(arr, 0)
// moveElement(arr, -9)
总结
下次面试要是继续碰到这道题,可能我又当场忘记思路了?
补充
看到有评论讨论不同方案的实现,这些都很厉害,没有唯一的答案,而思考解决方案的时候,要考虑的是时间复杂度,移动数组的元素都会造成数组的重新排列。
第一步方案我觉得应该是找到最小移动位置的代价,即移动2和移动2n是一样的,我们就只需要移动2,不需要再移动n,求余数的作用在于此,根据移动的位置切分出2个数组,不需要移动元素,最后我用的是concat合并2个数组,返回一个新的数组副本,这样就避免了移动元素。
还有一种方案是将2个数组使用new Set(array1)和new Set(array2)设置为集合,集合是key、value的散列表,可以用最少的代价移动位置,不导致重排,用集合移动完之后,再Array.from()转换回数组。
切忌,不要尝试去直接修改原数组的元素位置,这样做代价非常大,尤其是数组长度很长的时候!!
原文地址:https://segmentfault.com/a/1190000012882330
JavaScript系列——数组元素左右移动N位算法实现的更多相关文章
- javascript删除数组元素的7个方法
在JavaScript中,除了Object之外,Array类型(数组)恐怕就是最常用的类型了.与其他语言的数组相比,JavaScript中的Array非常灵活.这种灵活性有利有弊,好处是其富有创造性, ...
- JavaScript中数组元素删除的七大方法汇总
原文链接:https://blog.csdn.net/u010323023/article/details/52700770 在JavaScript中,除了Object之外,Array类型恐怕就是最常 ...
- JavaScript 交换数组元素位置的几种方式
前言 交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式. 第三方变量 最基础的方式,创建一个变量作为中转. let temp = array[index1]; array[index1 ...
- javascript中数组元素删除方法splice,用在for循环中巨坑
一.demo splice: 该方法会改变自动原始数组长度 实例: var array = ["aa","dd","cc","aa ...
- 使用JavaScript进行数组去重——一种高效的算法
最近比较忙,没时间更新博客,等忙完这阵子会整理一篇使用AngularJS构建一个中型的单页面应用(SPA)的文章,尽情期待!先占个坑. 数组去重的算法有很多种,以下是一种. 思路如下: 定义一个空的对 ...
- Javascript系列——对象元素的数组去重实现
概要 这是一篇记录文,记录数组操作对象去重的实现. 需求 有这样一个数组 [{ _id: 123, name: '张三' },{ _id: 124, name: '李四' },{ _id: 123, ...
- JavaScript的数组系列
数组 今天逆战班的学习主题关于Javascript的数组,主要有数组的概念.创建.分类.方法.遍历.经典算法...... 一.数组是什么呢?怎么写数组呢?数组有多少种呢? 数组的概念 对象是属性的无序 ...
- JavaScript从数组中删除指定值元素的方法
本文实例讲述了JavaScript从数组中删除指定值元素的方法.分享给大家供大家参考.具体分析如下: 下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函数,第二种为Array对象定义了一个 ...
- JavaScript 数组 length 属性获取数组长度或设置数组元素的数目
JavaScript 数组 length 属性 JavaScript 数组 length 属性可返回或设置或组中元素的数目,语法如下: array_object.length 利用 length 属性 ...
随机推荐
- mount --bind
[root@iZwz9i55e7v33yn8ksnh8nZ ~]# mkdir /tmp/dir1 [root@iZwz9i55e7v33yn8ksnh8nZ ~]# mkdir /tmp/dir2 ...
- CSS骚操作
获取当前HTML页面根元素的字体大小 getComputedStyle(document.getElementsByTagName("html")[0],undefined).fo ...
- Flask-RESTful(转载)
Flask-RESTful 是一个 Flask 扩展,它添加了快速构建 REST APIs 的支持.它当然也是一个能够跟你现有的ORM/库协同工作的轻量级的扩展.Flask-RESTful 鼓励以最小 ...
- Visual Studio 2015 改变窗体图标 & 任意位置打开窗体 & 禁止鼠标改动窗体大小
1.改变窗体图标 先把图标放到项目文件夹中,然后点击窗体属性的ICON添加即可. 参考:https://www.cnblogs.com/yangxuli/p/8075484.html?tdsource ...
- ant打包和jar包混淆
Ant是一种基于Java的build工具.相似于c语言中的makefile,这里做一记录.方便后面查看. <?xml version="1.0" encoding=" ...
- 110_leetcode_Best Time to Buy and sell Stock II
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- 基于对话框的应用程序,点击button打开一个网页
核心:使用Webbrowser控件 加入一个新的对话框,右键 Insert ActiveX control,选中 双击对话框生成响应的类(Web).并为webbrowser绑定成员变量(m_Web) ...
- vue 结合 echarts
http://blog.csdn.net/mr_wuch/article/details/70225364
- poj_1185状压dp
用二维数组写了好久,失败啊.. #include<iostream> #include<string.h> #include<cstdio> #include< ...
- thinkphp项目上传到github,为什么缺少很多文件
thinkphp项目上传到github,为什么缺少很多文件 问题: 把tp5项目push到码云(类似github)上,为什么没有thinkphp这个核心库? 然后我看了下码云和github上,官方的t ...