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 相关文章推荐
JavaScript实用技巧(一)
Aug 16 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
vue实现弹幕功能
Oct 25 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
vuex刷新后数据丢失的解决方法
Oct 18 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 生成短网址原理及代码
2014/01/23 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
php绘制一条直线的方法
2015/01/24 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python科学计算之Pandas详解
2017/01/15 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
python与idea的集成的实现
2020/11/20 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
JSF界面控制层技术
2013/06/17 面试题
房产买卖委托公证书
2014/04/04 职场文书
图书室标语
2014/06/21 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
幼儿园开学通知
2015/04/24 职场文书
篮球比赛通讯稿
2015/07/18 职场文书