JavaScript打印杨辉三角

前言

这里是一个基础极差的菜鸡前端小白
嗯…因为基础真的太差 最近春招经常在一些手写代码题型上阵亡
直接导致…没有机会和面试官交流前端知识
o(╥﹏╥)o

之前决定等熬过这阵子就开始写博客
现在offer的事情有了些眉目 可以动手写啦

Emmm…
第一次写博客…开始记录一些学习内容
今天来解决一下 某次笔试遇到的拦路虎 打印杨辉三角

杨辉三角

这似乎是个很高大上的东西 百度一下的话 有一堆内容
但是使用代码打印的话只需知道三个要点即可

指定一个n行的杨辉三角：

1、每行的数字个数与行号相同
2、每行的第一个数字和最后一个数字都是1（下文统称为首1 尾1）
3、除首尾之外的数字值等于上一行其正上方数字和左上方数字之和

实现思路

首先选择一个合适的结构作为杨辉三角的载体
对于一个有很多行 且每行都有内容的三角 我们选择二维数组
打印三角实质上是按正确的格式输出作为三角载体的二维数组
在这之前需要按杨辉三角的特点创建二维数组 并在每个位置放置正确的值

总结一下就是简单的三步：
1、创建二维数组
2、给二维数组的每个位置赋值
首尾赋值 1
中间值赋值
3、打印二维数组

1、创建二维数组

整个方法指定一个参数row 表示要打印的杨辉三角行数
先创建一个一维数组表示行数

var arr = new Array(row)

再以每一行已经创建好的数组位置为基准
根据杨辉三角的特点——每行数字的个数与行号相同 创建新数组
完成整个二维载体数组的创建

for(var i = 0; i < arr.length; i++) {
  arr[i] = new Array(i + 1)
}

这里有一个注意点就是 以每行数组为基准时创建新数组的下标应该为 i + 1
因为行数数组的下标从0开始 因此for循环遍历中 i 也应该从0开始
但是第 “0” 行需要开辟一个空间 后面每行应分配的位置数也应比行号多1
所以二维数组长度应为i + 1

完成数组创建后，接着给数组赋值

2、数组赋值

根据杨辉三角的特点，赋值分为两部分
首尾值 和 中间值

首先使用嵌套for循环遍历二维数组

for (var i = 0; i < arr.length; i++) {
  for(var j = 0; j < arr[i].length; j++) {
    ...
  }
}

接着思考判断条件：
如果是每行第一个值 其下标 j 应该为0，因此判断首值的条件为j == 0
如果是每行最后一个值 其下标 j 应与当前行数相同，因此判断尾值的条件为 i == j
成功判断了首尾值的位置，直接将他们赋值为1即可

if (j == 0 || i == j) {
  arr[i][j] = 1
}

接下来是给中间值的赋值
根据要点3，除首尾之外的数字值等于上一行其正上方数字和左上方数字之和
直接得到赋值语句

  arr[i][j] = arr[i - 1][j] + arr[i - 1][j - 1]

其中 i - 1是上一行，j - 1是前一个元素

完整的赋值代码为：

for (var i = 0; i < arr.length; i++) {
  for (var j = 0; j < arr[i].length; j++) {
   	if(j === 0 || i === j) {
      arr[i][j] = 1
    }
    else {
      arr[i][j] = arr[i - 1][j] + arr[i - 1][j - 1]
    }
  }
}

赋值结束后 就可以打印了

3、打印三角

打印同样是使用for循环

for (var i = 0; i < arr.length; i++) {
  for (var j = 0; j < arr[i].length; j++) {
    document.write(array[i][j] + " ")
  }
  document.write("<br/>")
}

注意点就是不要忘记换行

完整代码

<script type="text/javascript"> 

/**
 * @name: yanghui
 * @msg: 打印杨辉三角
 * @param {行数} row
 */    
function yanghui (row) {
  // 创建一维数组
  var arr = new Array(row)
  // 创建二维数组
  for (var i = 0;i < arr.length; i++) {
    arr[i] = new Array(i + 1)
  }
  // 循环赋值
  for (var i = 0;i < arr.length; i++) {
    for(var j = 0; j < arr[i].length; j++) {
      if (j === 0 || i === j) {
        arr[i][j] = 1 
      }
      else {
        arr[i][j] = arr[i - 1][j] + arr[i - 1][j - 1]
      }
    }
  }
  // 打印三角
  for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < arr[i].length; j++) {
      document.write(arr[i][j] + " ")
    }
    document.write("<br/>")
  }
}

yanghui(5)

</script>

输出结果