JavaScript 数组长度

JavaScript 获取数组长度

在 JavaScript 中，我们可以使用 length 属性来获取一个数组的长度。所谓的 “数组长度”，指的是数组中元素的个数。

语法：

arr.length

说明：

数组有 length 属性，而字符串也有 length 属性。另请参阅：JavaScript 字符串 length 属性。

示例 1：使用 length 获取数组长度

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr1 = [];
        const arr2 = [1, 2, 3, 4, 5, 6];

        console.log(arr1.length);
        console.log(arr2.length);
    </script>
</body>
</html>

运行结果如下。

0
6

分析：

const arr1 = []; 表示创建一个名为 arr1 的数组，由于数组内没有任何元素，所以数组长度为 0，也就是 arr1.length 为 0。

示例 2：数组新增元素后会改变长度

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const fruits = ["Apple", "Banana", "Cherry"];
        console.log(fruits.length);

        fruits.push("Orange");
        console.log(fruits.length);
    </script>
</body>
</html>

运行结果如下。

3
4

分析：

在这个例子中，执行了 fruits.push("Orange"); 之后，数组 fruits 变为：["Apple", "Banana", "Cherry", "Orange"]，因此它的长度也从 3 变为了 4。

示例 3：length 属性的动态性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const fruits = ["Apple", "Banana", "Cherry"];
        console.log(fruits.length);

        // 修改 length 属性值
        fruits.length = 2;

        console.log(fruits);
        console.log(fruits.length);
    </script>
</body>
</html>

运行结果如下。

3
["Apple", "Banana"]
2

分析：

我们不仅可以读取数组的 length 属性，还可以直接修改它。不过需要注意以下 2 点。

如果将 length 设置为一个小于当前长度的值，数组末尾的元素会被删除。
如果将 length 设置为一个大于当前长度的值，数组会增加新的空位（这些位置的值为 undefined）。

length 属性的应用场景

在实际开发中，使用 length 属性来获取数组长度，这种方式在下面场景种非常有用。

遍历数组。
清空数组。

示例 4：遍历数组

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const fruits = ["Apple", "Banana", "Cherry"];

        for (let i = 0; i < fruits.length; i++) {
            console.log(fruits[i]);
        }
    </script>
</body>
</html>

运行结果如下。

Apple
Banana
Cherry

分析：

length 属性最常见的用途，就是在 for 循环中控制遍历的次数。其中，循环条件 i < fruits.length 确保了我们可以遍历数组中的每一个元素，而不会超出数组的边界。

示例 5：清空数组

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr = [10, 20, 30, 40, 50];
        console.log(arr.length);

        arr.length = 0;    // 清空数组

        console.log(arr);
        console.log(arr.length);
    </script>
</body>
</html>

运行结果如下。

5
[]
0

分析：

虽然清空数组有多种方式，但将 length 设置为 0 是最简单有效的。