javascript中活灵活现的Array对象详解


Posted in Javascript onNovember 30, 2016

前言

JavaScript中的Array对象,就是我们常说的数组对象,主要用于封装多个任意类型的数据,并对它们进行管理。

所有主流浏览器均支持Array对象。

大家都知道Array实例有这四个方法:push、pop、shift、unshift。大家也都知道 push + pop实现栈, shift + push实现队列。在这里不讨论什么先进后出、先进先出。

但一面这个题将要用到这几个方法。

题目

螺旋矩阵这个名词,在后台语言中可能很熟悉,他是个二维数组,他有什么特点呢?请看下图:

javascript中活灵活现的Array对象详解

以上是一个从外到内的螺旋矩阵,他的排列规则是从外围开始走,一圈一圈绕道最里面,就像一条盘旋着的蛇。

分析与解答

进入正题,今年9月份腾讯校招在线笔试题就有一个螺旋矩阵的 题,传入给定数字n,打印出n*n的螺旋矩阵,当时本菜鸟并没有做出来,时间过后自己在电脑上想,然后恍然大悟明白的其中的奥妙。

虽然博主没有记录当时的代码,但是我是首先定义了个n*n的二维数组,得到需要绕几层,比如上面的是2层,然后就循环几次,在内部用四个for循环,分别是上下左右给定义的二维数组插内容,具体的代码就没法上了,反正方法很笨,而且并不是本文章的重点,下面进入本章主题:

前几天我在codewars上做题,遇到了个螺旋矩阵的题,它是要求写一个函数,给定一个矩阵二维数组参数,返回一个数组,该数组的元素顺序就是螺旋矩阵的路径。

例如:

function getLinear (spiral) {
 //...做一些操作 
}

var arr = [
 [1,2,3],
 [4,5,6],
 [7,8,9]
]

getLinear(arr) // 返回 [1,2,3,6,9,8,7,4,5]

上面例子清除的看到getLinear函数是将传入的‘螺旋矩阵'用一维数组按顺序输出了(我也不知道怎么说了,反正就是把这个二维数组像蛇一样盘旋着形成一维数组)

看到这个题的第一时间,我就想起了腾讯校招的那个题, 然后博主就用类似的四个for循环写完了,然后提交。这个网站有个功能是,你做完题目可以看别人做的代码,博主小心翼翼的点开答案列表,哇,第一条就深深吸引了我。虽然不记得别人写的源码,但大致是这样的:

function getLinear(spiral) {

  var item;

  var linear = []

  while (item = spiral.shift()) {
  // 上
  linear = linear.concat(item)

  // 右
  for (var i = 0; i < spiral.length; i++) {
   linear.push( spiral[i].pop() )
  }

  // 下
  linear = linear.concat( spiral.pop().reverse())

  // 左
  for (var i = spiral.length - 1; i >= 0; i --) {
   linear.push(spiral[i].shift())
  }

  }
  return linear
 }

对于菜鸟级别的我来说,刚开始还有点懵,因为跟我的思维不一样,看了一会才发现其中的奥妙。相比我写的真是好多了,这个代码不需要考虑传入的是否为n*n数组,他可以解析任意数组比如2*3数组等。

而且代码绝对简洁,对于有一定基础的来说也很容易懂。

如果你有些困惑,就往下看,我的图文解释

// 上
 linear = linear.concat(item)

item为二维数组的第一个元素,就是第一个数组,将它移除数组并返回,如下:

javascript中活灵活现的Array对象详解

此行代码后,原数组变成如下:

javascript中活灵活现的Array对象详解

接下来,我们需要将 5 6 7 加入要返回的数组中,也就是二维数组的每个数组元素的最后一个元素,我们可以用pop获取到:

// 右
  for (var i = 0; i < spiral.length; i++) {
   linear.push( spiral[i].pop() )
  }

这时原来的二维数组变成了如下:

javascript中活灵活现的Array对象详解

接下来我们要拿到最后一行 10 9 8 并倒置,将二维数组pop出最后一个数组然后将他reverse就可以了

// 下
 linear = linear.concat(spiral.pop().reverse())

此时原来二维数组是这样的:

javascript中活灵活现的Array对象详解

获取左边的就跟右边类似,只需要将pop变成shift:

// 左
for (var i = spiral.length - 1; i >= 0; i --) {
 linear.push(spiral[i].shift())
}

原来二维数组变为:

javascript中活灵活现的Array对象详解

此时,一圈就完了,然后while判断是否进入下一圈。

总结

好了,本文的内容就到这里了,一个看上去不简单的题目,在Array的灵活下变得如此简单,希望本文的内容对各位js新手们能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jQuery中live方法的重复绑定说明
Oct 21 Javascript
js 窗口抖动示例
Sep 04 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
如何处理JSON中的特殊字符
Nov 30 #Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 #Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 #Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 #Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 #Javascript
浅析script标签中的defer与async属性
Nov 30 #Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 #Javascript
You might like
PHP动态变静态原理
2006/11/25 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
php备份数据库类分享
2015/04/14 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
某公司面试题
2012/03/05 面试题
个人授权委托书范文
2014/09/21 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
2015年保送生自荐信
2015/03/24 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers