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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
JS画线(实例代码)
Nov 20 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
react-router实现按需加载
May 09 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
8个必备的PHP功能开发
2015/10/02 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
javascript this用法小结
2008/12/19 Javascript
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
事业单位个人应聘自荐信
2013/09/21 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
工作保证书范文
2014/04/29 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
综合测评自我评价
2015/03/06 职场文书
单位病假条范文
2015/08/17 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript