733. 图像渲染(javascript)733. Flood Fill

有一幅以 m x n 的二维整数数组表示的图画 image ，其中 image[i][j] 表示该图画的像素值大小。

你也被给予三个整数 sr , sc 和 newColor 。你应该从像素 image[sr][sc] 开始对图像进行 上色填充 。

为了完成 上色工作 ，从初始像素开始，记录初始坐标的 上下左右四个方向上 像素值与初始坐标相同的相连像素点，接着再记录这四个方向上符合条件的像素点与他们对应 四个方向上 像素值与初始坐标相同的相连像素点，……，重复该过程。将所有有记录的像素点的颜色值改为 newColor 。

最后返回 经过上色渲染后的图像 。

An image is represented by an m x n integer grid image where image[i][j] represents the pixel value of the image.

You are also given three integers sr, sc, and newColor. You should perform a flood fill on the image starting from the pixel image[sr][sc].

To perform a flood fill, consider the starting pixel, plus any pixels connected 4-directionally to the starting pixel of the same color as the starting pixel, plus any pixels connected 4-directionally to those pixels (also with the same color), and so on. Replace the color of all of the aforementioned pixels with newColor.

Return the modified image after performing the flood fill.

示例 1:

输入: image = [[1,1,1],[1,1,0],[1,0,1]]，sr = 1, sc = 1, newColor = 2
输出: [[2,2,2],[2,2,0],[2,0,1]]
解析: 在图像的正中间，(坐标(sr,sc)=(1,1)),在路径上所有符合条件的像素点的颜色都被更改成2。
注意，右下角的像素没有更改为2，因为它不是在上下左右四个方向上与初始点相连的像素点。

Input: image = [[1,1,1],[1,1,0],[1,0,1]], sr = 1, sc = 1, newColor = 2
Output: [[2,2,2],[2,2,0],[2,0,1]]
Explanation: From the center of the image with position (sr, sc) = (1, 1) (i.e., the red pixel), all pixels connected by a path of the same color as the starting pixel (i.e., the blue pixels) are colored with the new color.
Note the bottom corner is not colored 2, because it is not 4-directionally connected to the starting pixel.

示例 2:

输入: image = [[0,0,0],[0,0,0]], sr = 0, sc = 0, newColor = 2
输出: [[2,2,2],[2,2,2]]

提示:

• m == image.length
• n == image[i].length
• 1 <= m, n <= 50
• 0 <= image[i][j], newColor < 216
• 0 <= sr < m
• 0 <= sc < n

js中的广度优先遍历（BFS）和深度优先遍历（DFS）

1、深度优先算法

遍历规则：不断地沿着顶点的深度方向遍历。顶点的深度方向是指它的邻接点方向。

深度优先搜索算法(Depth-First-Search):是一种用于遍历或搜索树或图的算法。 沿着树的深度遍历树的节点，尽可能深的搜索树的分支。当节点v的所在边都己被探寻过或者在搜寻时结点不满足条件，搜索将回溯到发现节点v的那条边的起始节点。整个进程反复进行直到所有节点都被访问为止。

深度优先遍历和广度优先遍历

深度优先就是自上而下的遍历搜索 广度优先则是逐层遍历

二者的区别
对于算法来讲 无非就是时间换空间 空间换时间ui

深度优先不须要记住全部的节点, 因此占用空间小, 而广度优先须要先记录全部的节点占用空间大
深度优先有回溯的操做(没有路走了须要回头)因此相对而言时间会长一点
深度优先采用的是堆栈的形式, 即先进后出
广度优先则采用的是队列的形式, 即先进先出

广度优先算法

var floodFill = function (image, sr, sc, newColor) {
    let m = image.length
    let n = image[0].length
    let oldColor = image[sr][sc]//指定[sr][sc]位置上的颜色为旧颜色
    if (oldColor == newColor) {//当发现指定位置的颜色和更换颜色一致的时候，没有必要更换，返回原数组
        return image
    }
    var queue = [[sr, sc]]//初始化新的数组，用来存放需要更改的位置
   //queue 数组里面没有值的时候跳出循环
    while (queue.length) {
        //queue.shift()，取列表里面的第一项，并在数组中删除此项，变色
        let [i, j] = queue.shift()
        image[i][j] = newColor
        //以i，j为中心--上下，左右，不超过界限同时又和image[sr][sc]（指定位置上的颜色）相同，将位置保存在queue数组里面
        if (i - 1 >= 0 && image[i - 1][j] == oldColor) queue.push([i - 1, j])
        if (j - 1 >= 0 && image[i][j - 1] == oldColor) queue.push([i, j - 1])
        if (i + 1 < m && image[i + 1][j] == oldColor) queue.push([i + 1, j])
        if (j + 1 < n && image[i][j + 1] == oldColor) queue.push([i, j + 1])
    }
    return image
};

深度优先算法

//主要步骤：
//1．构建一个递归函数，函数参数应该最起码包括题目需求使用的参数
//2．找到边界，递归函数里首先列出递归结束的条件，即满足要求或者超出范围
//3．接着列出所有可能移动或者变化的路径
var dfs= function (step,...) {
    if()  // 判断边界（不符合条件，跳过，不进行操作）
      {   
         return 
       }
    // 枚举每一种可能(满足条件)
    //进行的操作
   dfs(step+1,...);
   dfs(step-2,...);

var floodFill = function (image, sr, sc, newColor) {
    let m = image.length
    let n = image[0].length
    let oldColor = image[sr][sc]//指定[sr][sc]位置上的颜色为旧颜色
    if (oldColor == newColor) {//当发现指定位置的颜色和更换颜色一致的时候，没有必要更换，返回原数组
        return image
    }
    var fill = function (i, j) {
    //以i，j为中心，超过界限、与image[sr][sc]（指定位置上的颜色）不相同，不进行操作
        if (i < 0 || i >= m || j < 0 || j >= n || image[i][j] != oldColor) {
            return
        }
        //符合条件-更换颜色
        image[i][j] = newColor
        //对其上下左右的数都进行递归
        fill(i - 1, j)
        fill(i, j - 1)
        fill(i + 1, j)
        fill(i, j + 1)
    }
    fill(sr, sc)
    return image
};

leetcode：https://leetcode.cn/problems/flood-fill/