> 上帝说，要把HTML，JS，CSS分开，让他们各司其职，共同完成前端工作。
> 
> 然后，Gradio把它们都改了回去。

Gradio能够允许你使用Python一键启动一个APP的前端，方便与后端进行数据交互，被广泛地用于人工智能模型的面板。

注意：本文假设你已经具备基础的Gradio知识。如果没有，请阅读：[Gradio手册 - 快速上手](https://www.gradio.app/guides/quickstart)



# 列与列之间的布局

Gradio和Umi等库类似，提供了非常好用的布局机制，你只需要使用Row和Column即可快速构建一个行列元素的网页：

```Python
import gradio as gr

with gr.Blocks() as demo:
    with gr.Row():
        text1 = gr.Textbox(label="t1")
        slider2 = gr.Textbox(label="s2")
        drop3 = gr.Dropdown(["a", "b", "c"], label="d3")
    with gr.Row():
        with gr.Column(scale=1, min_width=300):
            text1 = gr.Textbox(label="prompt 1")
            text2 = gr.Textbox(label="prompt 2")
            inbtw = gr.Button("Between")
            text4 = gr.Textbox(label="prompt 1")
            text5 = gr.Textbox(label="prompt 2")
        with gr.Column(scale=2, min_width=300):
            img1 = gr.Image("images/cheetah.jpg")
            btn = gr.Button("Go")

demo.launch()
```

![image.png](/static/img/ce77dbe90db1dfec90ecbd5ef3c66926.image.png)

这很好，但是实际使用时，会发现这个行列机制非常令人恼火。最重要的原因是，它具有一个`min_width`机制：

- 当页面缩放时，它会对`min_width`与`100%`进行判定，并取最大值

换句话说，只要你规定了`min_width`，这个元素的最小宽度不会小于它，而其他的列如果一行占不下，就会自动换行到下一行。这本是一个非常利于布局的设计，但是对于`gr.Column`来说简直是灾难，因为它把`min_width`设置到了300。也就是说，无论你这一列里的东西有多简单、有多窄，它都会给你留出300的空间。

假如我有如下代码：

```Python
with gr.Row(equal_height=True):
    with gr.Column(scale=10):
        prompt = gr.Textbox(label="prompt")
        negative_prompt = gr.Textbox(label="negative_prompt")
    with gr.Column(scale=1, elem_classes="prompt-opt-group"):
        color_btn = gr.Button("🎨")
        undo_btn = gr.Button("◀️")
        save_btn = gr.Button("💾")
        note_btn = gr.Button("🗒️")
    with gr.Column(scale=1):
        generate_btn = gr.Button("Generate", scale=1)
        with gr.Row():
            style_drop_1 = gr.Dropdown(style_1, label="style 1", value=f"{style_1[0]}", interactive=True)
            style_drop_2 = gr.Dropdown(style_2, label="style 2", value=f"{style_2[0]}", interactive=True)
```

```css
.prompt-opt-group button {
    width: 40px;
    height: 40px;
}
```
按照官方给的文档，`scale`负责规定缩放程度，这样的缩放最终的结果应当是`10:1:1`的布局。然而，实际上展示给你的样子是这样的：

![image.png](/static/img/56ba56914ee6660659059dd258901d90.image.png)

因为系统规定了Column的最小宽度是300，因此你会得到一大片留白。所以在进行缩放时，要手动指定最小宽度，以得到想要的效果：

```Python
with gr.Row(equal_height=True):
    with gr.Column(scale=20):
        prompt = gr.Textbox(label="prompt")
        negative_prompt = gr.Textbox(label="negative_prompt")
    with gr.Column(scale=1, min_width=0, elem_classes="prompt-opt-group"):
        color_btn = gr.Button("🎨")
        undo_btn = gr.Button("◀️")
        save_btn = gr.Button("💾")
        note_btn = gr.Button("🗒️")
    with gr.Column(scale=8, min_width=250):
        generate_btn = gr.Button("Generate", scale=1)
        with gr.Row():
            style_drop_1 = gr.Dropdown(style_1, label="style 1", value=f"{style_1[0]}", interactive=True)
            style_drop_2 = gr.Dropdown(style_2, label="style 2", value=f"{style_2[0]}", interactive=True)
```

![image.png](/static/img/777b21346382b3db67596a29ddd4dce6.image.png)

我认为这不是一个好设计，大部分情况下，开发者需要对不同的元素分配不同的宽度，而300这个最小值明显偏大了，导致很容易出现布局出问题的情况。

注意：

- 你可能注意到了style从列布局变成了行布局，原因是它们本该是行，但是在修改前，操作按钮占据了太多的宽度，导致了它被Gradio自动处理了换行。

# 导入CSS文件

Gradio为了降低使用门槛，封装了太多的东西，这也导致了很多基本的东西无法使用。

例如，我如果想修改一个按钮的样式，该怎么做？

Gradio提供了内联样式的使用方法，但是这未免有点过于抽象了，将CSS写进js文件就很容易造成人的困惑和后期维护困难，更不要提Gradio相当于把HTML，CSS，JS混在了一起写。

我的建议是直接创建一个CSS文件。例如，我在`main.py`的目录下创建一个`style.css`。它的内容是：

```css
.ckpt_row {
    max-width: 40%;
}
```

之后，直接使用open把这个文件打开并存入变量中：

```Python
with open('style.css', 'r', encoding='utf-8') as file:
    cssfile = file.read()
```
这个时候我们就得到了一个变量`cssfile`，它代表了`style.css`的所有内容。接下来我们只需要将其导入：

```Python
import gradio as gr

with open('style.css', 'r', encoding='utf-8') as file:
    css = file.read()

checkpoints = [
    "sd-v1-5-pruned-ema.ckpt",
    "fg-v2-4-venv-create.ckpt",
]


with gr.Blocks(css=cssfile) as demo:
    with gr.Row(elem_classes="ckpt_row"):
        ckpt_choice = gr.Dropdown(checkpoints, label="Checkpoints")


if __name__ == "__main__":
    demo.launch()
```
我们使用参数`css`，即可将css文件导入进Gradio，之后有两种方式应用：

1. 使用`elem_classes`参数，这相当于规定了这个元素的`class`
2. 使用`elem_id`参数，这相当于规定了这个元素的`id`

这样，我们就可以像写前端一样，将css与其它代码分离出去，专注于其他内容的编写，而不用将注意力在布局和功能上来回切换。

# 模块化代码应用：Tab页面切换

Gradio构建的一般是单页应用，但是我们有时需要多个Tab来进行页面切换，例如下面的Stable Diffusion的Web UI，就包含了很多Tab。

![image.png](/static/img/bd87ef0deb090d350091c0b8b27347ec.image.png)

将这么多Tab写进一个`main.py`肯定是非常费劲的，那么我们就可以将这部分代码分离出来单独写，最后再`import`回`main.py`。

```Python
import gradio as gr
from src.txt2img import txt2img
from src.img2img import img2img

with open('style.css', 'r', encoding='utf-8') as file:
    css = file.read()

checkpoints = [
    "sd-v1-5-pruned-ema.ckpt",
    "fg-v2-4-venv-create.ckpt",
    "hj-v3-3-csv-public.ckpt",
    "io-v4-2-main-set.ckpt",
    "ta-v5-1-flag-share.ckpt",
]


with gr.Blocks(css=css) as demo:
    with gr.Row(elem_classes="ckpt_row"):
        ckpt_choice = gr.Dropdown(checkpoints, label="Checkpoints")
    with gr.Row():
        with gr.Tabs():
            txt2img()
            img2img()


if __name__ == "__main__":
    demo.launch()
```

我们就这样创建了一个页面，它包含了两个Tab，代码则是分别书写在不同的文件里的。

来看看`src/img2img.py`：

```Python
import gradio as gr

style_1 = [
    "None",
    "style-1-1",
    "style-1-2",
    "style-1-3",
    "style-1-4",
]

style_2 = [
    "None",
    "style-2-1",
    "style-2-2",
    "style-2-3",
    "style-2-4",
]


def img2img():
    with gr.Tab("img2img"):
        with gr.Row(equal_height=True):
            with gr.Column(scale=20):
                prompt = gr.Textbox(label="prompt")
                negative_prompt = gr.Textbox(label="negative_prompt")
            with gr.Column(scale=1, min_width=0, elem_classes="prompt-opt-group"):
                color_btn = gr.Button("🎨")
                undo_btn = gr.Button("◀️")
                save_btn = gr.Button("💾")
                note_btn = gr.Button("🗒️")
            with gr.Column(scale=8, min_width=250):
                generate_btn = gr.Button("Generate", scale=1)
                with gr.Row():
                    style_drop_1 = gr.Dropdown(style_1, label="style 1", value=f"{style_1[0]}", interactive=True)
                    style_drop_2 = gr.Dropdown(style_2, label="style 2", value=f"{style_2[0]}", interactive=True)
```

实际上就是把内容直接写进去就好，非常的简便，同时也利于页面后期的维护。

Gradio 布局 入门

问题传送门：https://leetcode.cn/problems/trapping-rain-water/description/



虽然是一道Hard题，但是思路却很简单。

首先思考，一个地方为什么会积蓄雨水？那一定是因为它身处一个低洼地带，水没有可以流出去的地方。换句话说，有雨水的地方，一定是因为左侧和右侧有比自己高的地方，自己能积蓄的雨水的数量就是两侧较低的高峰的高度，与自己高度的差值。

有了思路，实际上要做就很简单。我们可以直接创建两个vector：一个从左往右遍历一遍，用于记录位置`i`的左侧的最高峰的高度；另一个从右往左遍历一遍，用于记录位置`i`的右侧的最高峰的高度。这样，我们最后从左向右遍历一遍，判定它是不是一个低洼地带，并且将能够积蓄的雨水累加。当第三遍遍历完成后，我们就得到了总蓄水量。

代码如下：

```CPP
class Solution {
public:
    int trap(vector<int>& height) {
        int result = 0;
        const auto length = static_cast<int>(height.size());
        auto leftMaxArr = vector<int>(length, 0);
        auto rightMaxArr = vector<int>(length, 0);
        auto leftMax = 0;
        auto rightMax = 0;
        for (int i = 0; i < length; ++i) {
            leftMaxArr[i] = leftMax;
            if (height[i] > leftMax) {
                leftMax = height[i];
            }
        }

        for (int i = length - 1; i >= 0; --i) {
            rightMaxArr[i] = rightMax;
            if (height[i] > rightMax) {
                rightMax = height[i];
            }
        }

        for (int i = 0; i < length; i++) {
            if (min(leftMaxArr[i], rightMaxArr[i]) > height[i]) {
                result += (min(leftMaxArr[i], rightMaxArr[i]) - height[i]);
            }
        }
        return result;
    }
};
```

Leetcode 42. 接雨水

以初学者的角度记录虚幻引擎的学习过程。本文为增强输入系统（Enhanced Input）的入门介绍与使用方法。增强输入系统从UE5.1开始取代了之前版本的轴映射和操作映射。虽然在 项目设置-输入 中仍然能够使用，但是该项特性在可预见的未来应当会被废除，因此学习它的升级替代，增强输入系统，是很有必要的。

参考链接：
- [虚幻引擎 输入概述](https://dev.epicgames.com/documentation/zh-cn/unreal-engine/input-overview-in-unreal-engine?application_version=5.1)
- [CSDN - 用人话讲！虚幻引擎 UE5 增强输入系统（蓝图篇）](https://blog.csdn.net/u011254268/article/details/131434703)


:::tip{title="提示"}
如果你想知道一个增强输入的实际应用案例，可以参考：[从零开始构建游戏：运动系统](https://rin977.com/post/63)
:::



增强输入系统与传统的映射方法最大的区别在于，它是一种数据资产，同时是面向对象的，与对象息息相关，而非针对整个项目。因此，我们可以更加方便地管理每一个Actor的输入，而不需要考虑不同键位与输入之间的冲突、状态管理。

# 输入动作

输入动作指的是具体的一个行为或者动作，并且可以使用触发器和修改器进行精确描述，例如长按奔跑，单击下蹲等。双击输入动作资产，进入输入动作管理面板。

![image.png](/static/img/10616dfea1842b38f7fa325b01945a87.image.png)

## 操作

重点内容有两个，就是触发器和修改器。触发器就是对该动作触发条件的判定，修改器就是对原始输入的处理。

### 触发器

触发器的内容如下：

![image.png](/static/img/490bb4ab680b29b26405833cf3a62c7e.image.png)

中译中的结果如下：

- 下移：按下，并且按下后会持续触发。
- 已按下：按下，并且按下后只触发一次。
- 已松开：松开按键时触发一次。
- 弦操作：当另一个输入动作触发时才能通过按键触发当前动作，并且是持续触发。（例如，只有你移动时，你才能进入奔跑状态）
- 点按：必须在指定时间内松开按键才能触发一次。
- 组合：可以指定另外多个操作的不同阶段，在触发或者没触发的情况下，才能通过按键触发当前操作。（例如，只有在没有移动的情况下，你才能进行下蹲操作）
- 脉冲：长按按键时，会以一定时间间隔触发，单击则只触发一次。（例如，长按开火键，每隔0.01秒射出一发子弹，最多射出30发）
- 长按：长按按键时，持续触发。
- 长按和松开：长按按键，并且在松开时触发一次。

### 修改器

修改器的内容如下：

![image.png](/static/img/7cb46fc87511cde256017b532731eeb6.image.png)

中译中的结果如下：

- 到世界空间：将输入的2D向量转换为3D向量。（例如，手柄摇杆只会输入XY轴的二维向量，它可以将这个输入的向量转换成XYZ轴三维向量，并且Z一直为0）
- 否定：取反。（例如，键盘触发时通常值为1，但是取反之后值变为-1）
- 响应曲线 - 指数：主要用于手柄或者其他线性输入，将输入响应对应为曲线。
- 响应曲线 - 用户定义：同上，只不过用自定义曲线代替了指数曲线。
- 平滑：对每一帧进行平滑处理。（针对键盘只有0和1的输入时很有用）
- 拌合输入轴值：应当理解为“交换输入轴值”。将输入的2D向量的XY值交换。
- 按差量时间缩放：将输入的值乘以每帧的时间间隔，可以实现在不同帧率下使输入的值的总大小不变。
- 标量：将原本范围在0~1的轴值映射到任意范围中。
- 盲区：也就是死区，针对手柄输入设备，设置触发或响应的区间。
- 视野缩放：根据FOV的值调整输入大小。

修改器可以同时应用多个，并且会从上到下依次调用。

# 蓝图应用

添加完毕输入动作后，我们需要将它添加进入蓝图。一个标准的输入动作通常有如下属性：

![image.png](/static/img/b979eef86e1f84dddccd1cf51e2602e0.image.png)


| 名称 | 释义 |
| --- | --- |
| Triggered | 当触发时调用（即满足上文中提到的触发器的条件） |
| Started | 	当绑定的按键按下时调用（不论是否达到触发条件都会调用） |
| Ongoing | 当绑定的按键按下时 并且未触发持续调用 |
| Canceled | 当绑定的按键按下但是没能达到触发条件时调用 |
| Completed | 当触发事件结束后调用 |
| Action Value | 输入对应的输入值 |
| Elapsed Seconds | 经过的时间：从按下按键经过的时间 |
| Triggered Seconds | 触发的时间：从触发开始经过的时间 |
| Input Action | 触发的输入动作名称 |

虚幻引擎入门 - 增强输入系统

ThreeJS是一个基于WebGL的图形渲染框架，封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能，让你不必要再从底层WebGL开始写起。



# 结构介绍

![image.png](/static/img/90877c2280e7f5497c6621b470cf2337.image.png)

一个ThreeJS的工作流程相当是这样的：

- 创建场景`Scene`，相机`Camera`，以及里面的各种元素
- 渲染器`Render`负责进行渲染，并对接下来的帧的内容进行监控处理

# 元素讲解

在使用ThreeJS之前，我们需要进行导入。对于React项目来说，通常我们将3D内容写进组件中进行封装，并交给上层父组件调用。

组件的书写结构如下：

```JS
// 导入threejs
import * as THREE from "three";
// 在react中我们使用useEffect调用threejs
import {useEffect} from "react";

function SampleComponent() {
    useEffect(() => {
        // 这里书写threejs主体内容

        return () => {
           // 这里一般用于在结束时删除组件防止内存泄露
        }
    }, []);

    return null
}

export default SampleComponent;
```

在使用 React 编写 Three.js 应用时，将代码写在 `useEffect` 里，并返回 `null`，是一种常见的模式。采用这种形式的原因如下：

1. **副作用管理**：`useEffect` 是 React 用来管理副作用的钩子函数。Three.js 场景的创建和渲染属于副作用，因为它们直接操作 DOM 或者 Canvas，不属于 React 的渲染流程。因此，将这些逻辑放在 `useEffect` 里可以确保它们在组件挂载或更新时正确执行。

2. **只在组件挂载时执行**：通过指定依赖数组（如 `[]`），可以让 `useEffect` 只在组件挂载时执行一次。这样可以防止 Three.js 场景的重复创建，提升性能。

3. **返回 `null` 只是不渲染 DOM 元素**：在 React 组件中返回 `null` 意味着这个组件不渲染任何 DOM 元素。但在 `useEffect` 里执行的 Three.js 逻辑仍然会创建并渲染到指定的 Canvas 上。这种方式实际上将 Three.js 的渲染与 React 的 DOM 渲染分离开来，避免 React 重新渲染时不必要的 DOM 操作干扰 Three.js 的渲染。

4. **清理资源**：`useEffect` 可以返回一个清理函数，当组件卸载或依赖项改变时执行。这样可以确保 Three.js 场景的资源（比如几何体、材质等）能够在组件销毁时正确释放，避免内存泄漏。

将 Three.js 的代码放在 `useEffect` 里，并返回 `null`，可以让你更好地控制 Three.js 的生命周期管理，同时与 React 的组件渲染逻辑保持分离。这样不仅能确保性能优化，还能避免不必要的资源浪费。

## Scene

与Unity类似， 场景Scene代表了一个视图，它是所有需要显示的元素的集合。它往往在最开始声明，声明之后只需要通过`add`向其中增加希望显示的东西即可。

```JS
// 声明
const scene = new THREE.Scene();

// 添加元素
scene.add(sampleElement);
```

## Camera

同样与Unity类似，相机Camera代表了显示元素的视角，它能够按需变换，以达到不同的目的。声明后，通常只需要通过改变它的位置、角度等，也可以通过轨道进行自由变换。

```JS
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000,
)
```

### 相机类型

相机的常用类型有以下几种：

- 透视相机 (PerspectiveCamera)：使用透视投影的相机，类似于人眼的视觉效果。远处的物体看起来较小，而近处的物体看起来较大。常用于需要现实感的三维场景中。
- 正交相机 (OrthographicCamera)：使用正交投影的相机，物体不会因距离而缩小。常用于二维场景或需要精确控制物体位置的三维场景中。
- 立方相机 (CubeCamera)：用于创建环境贴图或反射效果。它会从场景的六个方向拍摄图像，并将它们存储为立方体贴图。常用于反射和折射的效果，如镜面和水面。
- 立体相机 (StereoCamera)：用于创建立体效果（3D视觉），适合VR或AR应用。立体相机会渲染左右两个视图，提供深度感。

### 参数解析

我们在这里只创建最简单的透视相机。透视相机接受四个参数，分别是：

1. `fov`: 相机视角，视角越大范围越广
2. `aspect`: 图像宽高比，实例声明为窗口宽高比
3. `near`: 近裁剪面，与相机的距离小于这个范围的元素将不会被渲染
4. `far`: 远裁剪面，与相机的距离大于这个范围的元素将不会被渲染

## Geometry, Material, Mesh

物体三巨头。这三个元素构成了渲染一个显示物体的关键。

### 几何 Geometry

以面向对象的思想来说，几何相当于一个抽象出来的类。它代表了一种形状，而不代表一个具体物体。它的声明如下所示：

```JS
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
```

在这里，我们取了一个 `BoxGeometry`，大小为 `(1, 1, 1)`，并将这个大小的盒子形状命名为 `cubeGeometry`。在这里，我们并没有完成一个具体的物体的创建，而是 创建了一个特定大小、特定形状的模板。它需要经过处理后才能表示一个具体的物体。

### 材质 Material

材质可以理解为具体物体的表面的样式，它决定了这个物体的外观。它的声明如下所示：

```JS
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00});
```

在这里，我们使用了基本的材质，并把颜色定为 `0xffff00`。

### 网格 Mesh

虽然它被称为网格，但它才指代一个具体的物体。具体来说，它会使用`Mesh`方法结合几何与材质，并将其统一为一个`Mesh`对象，这个对象表示一个在视图中具体的物体。最后，它需要被添加进`scene`，从而显示出来。

```JS
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);
```

至此，一个颜色为`0xffff00`，形状为`BoxGeometry`，大小为`(1, 1, 1)`的物体`cube`就被创建完毕了。

## Light

光照能够让几何体显现明暗关系，进而出现能够让人脑接受的3D效果。Light有很多类型，这里先使用一束平行光。

```JS
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);
```

## Renderer

那么，我们场景已经做好了，物体已经添加了，摄像机已经就位了，接下来就要把三维空间里的所有可视元素渲染到二维平面的网页中，这就是渲染器Renderer的作用。它的声明如下：

```JS
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
```

第一行声明了一个基于WebGL渲染器的渲染器实例，第二行则是规定了这个渲染器的尺寸，也就是画布的范围。

第三行将这个渲染器的domElement直接放在了HTML文件的body下充当子元素。这样，浏览器就会显示这个渲染好的结果。

同时，我们需要声明一个 `render()` 函数：

```JS
function render() {
    renderer.render(scene, camera)
    requestAnimationFrame(render)
}
render()
```
这个函数用于执行渲染操作。

其中，`renderer.render(scene, camera)` 是核心，它将指定的场景通过指定的相机渲染出来。

`requestAnimationFrame` 是一个浏览器提供的API，用于高效地循环动画。

调用 `requestAnimationFrame(render)` 会在下一次重绘时调用 `render` 函数，实现每帧都进行渲染。这种方式比使用 `setTimeout` 或 `setInterval` 更加节能且平滑，因为它能够使浏览器根据显示器的刷新率来优化渲染。

最后一行 `render()`，是第一次调用，它启动了渲染循环，使得 `requestAnimationFrame` 开始调用 `render`，进而实现持续的动画效果。

# 总结

那么，回过头来看这个结构图：

![image.png](/static/img/356a64118a31d9577d8a3cd74bd2003d.image.png)

这个结构图代表了：使用WebGL渲染器渲染一个透视相机，内容是一个场景，内含一个平行光源，以及三个立方体网格对象。这三个对象使用了同一个BoxGeometry形状，但是使用了三种不同的材质。

ThreeJS 结构与入门

问题传送门：https://leetcode.cn/problems/compare-version-numbers/description/



本题核心：划分，比较，长度差别考虑。

本题实际上难度不高，只是JS生疏了，记录一下一些简单的要点。

# 要点记录

### 快速的字符串数组与整型数组转换

当下有如下数组与代码：

```JS
let sampleArray = ['123','456','789','000']
console.log(sampleArray)
```
其输出的结果为：

```
['123', '456', '789', '000']
```
如果使用`map(type)`，可以进行自动的类型转换，如下所示：

```JS
let sampleArray = ['123','456','789','000']
sampleArray = sampleArray.map(Number)
console.log(sampleArray)
```
其输出的结果为：

```
[123, 456, 789, 0]
```
同理，将`type`设置成`String`，可以实现整型数组到字符串数组的转换。

### 长度不确定的数组问题

有时我们会面对长度不确定的数组问题，例如，你需要比较每一个数组，但你不知道哪个会比较长，直接使用`length`进行遍历可能会导致较短的数组的索引越界问题。

这个时候，我们可以尝试使用删除元素的方法。即：我们访问数组的第一个/最后一个元素，使用完成之后如果这个元素不会再被访问到，可以使用`shift()`或`pop()`方法删除。

使用这种方法只需要一个`while`循环，在两个数组长度均不为0时持续判断并删除数组，直到有一个数组长度被遍历完，跳出循环，此时再对剩余长度进行判定，将剩余元素操作完成即可。

需要注意的是，`Array.shift()`删除数组的首个元素，`Array.pop()`删除数组的最后一个元素。这两种方法均在原数组上进行操作，会改变原数组的长度。返回值为删除掉的元素。

```JS
let sampleArray = ['123','456','789','000']
console.log(sampleArray)

sampleArray.shift()
console.log(sampleArray)

sampleArray.pop()
console.log(sampleArray)
```

输出结果为：

```
['123', '456', '789', '000']
['456', '789', '000']
['456', '789']
```

# 题解代码

```JS
/**
 * @param {string} version1
 * @param {string} version2
 * @return {number}
 */
var compareVersion = function(version1, version2) {
    let array_v1 = version1.split('.').map(Number)
    let array_v2 = version2.split('.').map(Number)
    while (array_v1.length !== 0 && array_v2.length !== 0) {
        if (array_v1[0] === array_v2[0]) {
            array_v1.shift()
            array_v2.shift()
            continue
        }
        if (array_v1[0] > array_v2[0]) {
            return 1
        }
        else {
            return -1
        }
    }
    if (array_v1.length !== 0) {
        for (let i = 0; i < array_v1.length; i++) {
            if (array_v1[i] !== 0) {
                return 1
            }
        }
        return 0
    }
    if (array_v2.length !== 0) {
        for (let i = 0; i < array_v2.length; i++) {
            if (array_v2[i] !== 0) {
                return -1
            }
        }
        return 0
    }
    return 0
};
```