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

 更新时间:2017年12月01日 12:05:18   作者:涛锅  
这篇文章主要介绍了JavaScript定义及输出螺旋矩阵的方法,简单描述了螺旋矩阵的概念、原理并结合实例形式分析了javascript定义与输出螺旋矩阵的具体操作技巧,需要的朋友可以参考下

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

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

什么是螺旋矩阵

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

如图:

实现效果

实现代码

(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数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结

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

相关文章

  • JavaScript 几种循环方式以及模块化的总结

    JavaScript 几种循环方式以及模块化的总结

    这篇文章主要介绍了JavaScript 几种循环方式以及模块化的的相关资料,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • 原生JS实现目录滚动特效

    原生JS实现目录滚动特效

    这篇文章主要为大家详细介绍了原生JS实现目录滚动特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 详解uniapp无痛刷新token方法

    详解uniapp无痛刷新token方法

    为了给用户一个流畅的体验,token过期后需要重新请求新的token替换过期的token。本文将详细介绍uniapp无痛刷新token方法。
    2021-06-06
  • 10个JavaScript面试常考的前端手写题总结

    10个JavaScript面试常考的前端手写题总结

    这篇文章主要为大家详细介绍了10个JavaScript面试常考的前端手写题,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解下
    2024-02-02
  • 一篇文章让你轻松记住js的隐式转化

    一篇文章让你轻松记住js的隐式转化

    这篇文章主要给大家介绍了如何通过一篇文章让你轻松记住js的隐式转化的相关资料,通过在各种情况下发生的隐式类型的例子,来详细的了解隐式类型转换的过程,需要的朋友可以参考下
    2022-01-01
  • js多维数组降维的5种方法

    js多维数组降维的5种方法

    本文主要介绍了js多维数组降维的5种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 史上最全JavaScript数组去重的十种方法(推荐)

    史上最全JavaScript数组去重的十种方法(推荐)

    这篇文章主要介绍了JavaScript数组去重的十种方法,利用元素的属性和特性进行不同的去重方法,并实例演示如何测试去重超大数组,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • Javascript 读取操作Sql中的Xml字段

    Javascript 读取操作Sql中的Xml字段

    把Xml字段先读出来,然后用Js去操作,这样岂不是简单了许多,于是网上搜索了一些JS读Xml字段信息的方法
    2014-10-10
  • 使用原生JavaScript实现放大镜效果

    使用原生JavaScript实现放大镜效果

    这篇文章主要为大家详细介绍了如何使用原生JavaScript实现放大镜效果(可自由大小适配),文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-03-03
  • javascript下过滤数组重复值的代码

    javascript下过滤数组重复值的代码

    javascript下过滤数组重复值的代码...
    2007-09-09

最新评论