JavaScript 数组，二维数组与对象

679 字

3 分钟

JavaScript 数组，二维数组与对象

2026-05-27

Web前端笔记

无标签

相比其他的知识点，这个还是有点忘记了，甚至C语言上的写法也忘的差不多了。

数组#

这个绝对忘不了，这个也是C上面最基本的存储单位，写法也和JavaScript上差不多

1
var arr = [1, 2, 3]

根据这个做了这样的一个小球跑动的项目

1
<!doctype html>
2
<html>
3
    <head>
4
        <title></title>
5
    </head>
6
    <body>
7
        <script src="./p5.min.js"></script>
8
        <script>
9
            let num = 5;
10
            let xPos = [];
11
            let yPos = [];
12
            let radius = [];
13
            let speedx = [];
14
            let speedy = [];
15

16
            function setup() {
17
                createCanvas(800, 600);
18
                background("blue");
19

20
                for (let i = 0; i < num; i++) {
21
                    xPos[i] = random(800);
22
                    yPos[i] = random(600);
23
                    radius[i] = random(20, 50);
24
                    speedx[i] = random(-8, 8);
25
                    speedy[i] = random(-8, 8);
26
                }
27
            }
28

29
            function draw() {
30
                background("blue");
31
                fill("pink");
32
                noStroke();
33
                for (let i = 0; i < num; i++) {
34
                    circle(xPos[i], yPos[i], radius[i] * 2);
35
                    xPos[i] += speedx[i];
36
                    yPos[i] += speedy[i];
37

38
                    if (xPos[i] < radius[i] || xPos[i] > 800 - radius[i]) {
39
                        speedx[i] = -speedx[i];
40
                    }
41
                    if (yPos[i] < radius[i] || yPos[i] > 600 - radius[i]) {
42
                        speedy[i] = -speedy[i];
43
                    }
44
                }
45
            }
46
        </script>
47
    </body>
48
</html>

二维数组#

这个在C语言里面写法是这样的

1
int arr[3][4] = {
2
    {1, 2, 3, 4},
3
    {5, 6, 7, 8},
4
    {9, 10, 11, 12}
5
};
6

7
printf("%d", arr[1][1]);

JavaScript不知道能不能说理解上会更简单

1
var arr = {
2
  [1, 2, 3],
3
  [4, 5, 6],
4
  [7, 8, 9]
5
};
6

7
console.log(arr[1][1]);

将刚刚的这个项目写成二维数组的形式

1
<!doctype html>
2
<html>
3
    <head>
4
        <title></title>
5
    </head>
6
    <body>
7
        <script src="./p5.min.js"></script>
8
        <script>
9
            let num = 5;
10
            // 二维数组：[x, y, radius, speedX, speedY]
11
            let balls = [];
12

13
            function setup() {
14
                createCanvas(800, 600);
15
                background("blue");
16

17
                balls = Array.from({ length: num }, () => [
18
                    random(800), // [i][0] - x
19
                    random(600), // [i][1] - y
20
                    random(20, 50), // [i][2] - radius
21
                    random(-8, 8), // [i][3] - speedX
22
                    random(-8, 8), // [i][4] - speedY
23
                ]);
24
            }
25

26
            function draw() {
27
                background("blue");
28
                fill("pink");
29
                noStroke();
30
                for (let i = 0; i < num; i++) {
31
                    circle(balls[i][0], balls[i][1], balls[i][2] * 2);
32
                    balls[i][0] += balls[i][3];
33
                    balls[i][1] += balls[i][4];
34

35
                    if (
36
                        balls[i][0] < balls[i][2] ||
37
                        balls[i][0] > 800 - balls[i][2]
38
                    ) {
39
                        balls[i][3] = -balls[i][3];
40
                    }
41
                    if (
42
                        balls[i][1] < balls[i][2] ||
43
                        balls[i][1] > 600 - balls[i][2]
44
                    ) {
45
                        balls[i][4] = -balls[i][4];
46
                    }
47
                }
48
            }
49
        </script>
50
    </body>
51
</html>

对象#

这个词似乎在C语言里面有一个很熟悉的东西 —— 结构体。

可以简单理解就是给数组里面的东西取一个相对便于记忆的名字，方便直接进行读取

1
var arr = {
2
  x: "apple",
3
  y: 17,
4
  z: "orange"
5
}
6

7
console.log(arr.x);

项目就可以改成这样：

1
<!doctype html>
2
<html>
3
    <head>
4
        <title></title>
5
    </head>
6
    <body>
7
        <script src="./p5.min.js"></script>
8
        <script>
9
            let num = 5;
10
            let balls = [];
11

12
            function setup() {
13
                createCanvas(800, 600);
14
                background("blue");
15

16
                for (let i = 0; i < num; i++) {
17
                    balls[i] = {
18
                        x: random(800),
19
                        y: random(600),
20
                        radius: random(20, 50),
21
                        speedX: random(-8, 8),
22
                        speedY: random(-8, 8),
23
                    };
24
                }
25
            }
26

27
            function draw() {
28
                background("blue");
29
                fill("pink");
30
                noStroke();
31
                for (let i = 0; i < num; i++) {
32
                    circle(balls[i].x, balls[i].y, balls[i].radius * 2);
33
                    balls[i].x += balls[i].speedX;
34
                    balls[i].y += balls[i].speedY;
35

36
                    if (
37
                        balls[i].x < balls[i].radius ||
38
                        balls[i].x > 800 - balls[i].radius
39
                    ) {
40
                        balls[i].speedX = -balls[i].speedX;
41
                    }
42
                    if (
43
                        balls[i].y < balls[i].radius ||
44
                        balls[i].y > 600 - balls[i].radius
45
                    ) {
46
                        balls[i].speedY = -balls[i].speedY;
47
                    }
48
                }
49
            }
50
        </script>
51
    </body>
52
</html>