JavaScript定义及输出螺旋矩阵的方法详解


Posted in Javascript onDecember 01, 2017

本文实例讲述了JavaScript定义及输出螺旋矩阵的方法。分享给大家供大家参考,具体如下:

昨晚无意看到这样一个算法题目,然后就想着用js来实现。
昨晚草草写完后感觉代码很丑,很臭,于是今晚又花点时间重构了一下,感觉变得优雅了。

什么是螺旋矩阵

螺旋矩阵是指一个呈螺旋状的矩阵,它的数字由第一行开始到右边不断变大,向下变大,向左变大,向上变大,如此循环。

如图:

JavaScript定义及输出螺旋矩阵的方法详解

实现效果

JavaScript定义及输出螺旋矩阵的方法详解

实现代码

(function() {
  var map = (function() {
    function map(n) {
      this.map = [], this.row = 0, this.col = -1, this.dir = 0, this.n = n;
      // 建立个二维数组
      for (var i = 0; i < this.n; i++) { this.map.push([]); }
      // 定义移动的顺序为 右,下,左,上
      var order = [this.right, this.bottom, this.left, this.up];
      i = 0;
      do {
        // 能移动则更新数字,否则更改方向
        order[this.dir % 4].call(this) ? i++ : this.dir++;
        // 赋值
        this.map[this.row][this.col] = i;
      } while (i < n * n);
    }
    map.prototype = {
      print: function() { for (var i = 0; i < this.n; i++) { console.log(this.map[i].join(' ')) } },
      // 向该方向移动
      left: function() { return this.move(this.row, this.col - 1); },
      right: function() { return this.move(this.row, this.col + 1); },
      up: function() { return this.move(this.row - 1, this.col); },
      bottom: function() { return this.move(this.row + 1, this.col); },
      // 如果坐标在范围内,并且目标没有值,条件满足则更新坐标
      move: function(row, col) {
        return (0 <= row && row < this.n) && (0 <= col && col < this.n) && !this.map[row][col] && (this.row = row, this.col = col, true);
      },
    };
    return map;
  })();
  new map(6).print();
})();

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 #Javascript
利用babel将es6语法转es5的简单示例
Dec 01 #Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 #Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 #Javascript
浅谈angular4实际项目搭建总结
Dec 01 #Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 #Javascript
微信小程序表单验证功能完整实例
Dec 01 #Javascript
You might like
php中namespace use用法实例分析
2016/01/22 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
Javascript倒计时代码
2010/08/12 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
Python MD5加密实例详解
2017/08/02 Python
python实现超级马里奥
2020/03/18 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
python excel和yaml文件的读取封装
2021/01/12 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
优秀中专生推荐信
2013/11/17 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
写得不错的求职信范文
2014/07/11 职场文书
起诉状范本
2015/05/20 职场文书
领导视察通讯稿
2015/07/18 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android
python百行代码实现汉服圈图片爬取
2021/11/23 Python
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技