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 相关文章推荐
js常用函数 不错
Sep 08 Javascript
JavaScript null和undefined区别分析
Oct 14 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
js实现新年倒计时效果
Dec 10 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
PHPMailer安装方法及简单实例
2008/11/25 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
解决$store.getters调用不执行的问题
2019/11/08 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Python列表对象实现原理详解
2019/07/01 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
flask应用部署到服务器的方法
2019/07/12 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
大学生暑期实践感言
2014/02/26 职场文书
地理教师岗位职责
2014/03/16 职场文书
《画》教学反思
2014/04/14 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
Redis如何实现分布式锁
2021/08/23 Redis
图神经网络GNN算法
2022/05/11 Python