【JavaScript】数组 ④ ( JavaScript 数组新增元素 | 先修改数组长度再填充元素 | 通过索引值追加数组元素 | 使用 push 函数追加数组元素 )

韩曙亮

发布于 2024-03-30 09:20:42

830

发布于 2024-03-30 09:20:42

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、JavaScript 数组新增元素

1、先修改数组长度再填充元素

数组的 length 属性是可读写的 ,

读取 length 属性 : 通过 length 属性可以获取数组的长度 ,
修改 length 属性 : 通过修改 length 属性可以改变数组的长度 ;

如果想要增加数组元素 ,

首先 , 修改 length 属性 , 将 length 属性值增大 , 实现数组扩容操作 ;
- 该步骤实现后 , 数组扩容的部分 , 没有赋值前 , 默认值为 ?developer/article/2403408/undefined ;
然后 , 向数组中扩容的部分 , 填充元素 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组遍历

        // 创建数组 初始化 3 个元素
        var colors = ['blue', 'red', 'green'];
        // 打印数组
        console.log(colors);

        // 将数组大小设置为 5 个
        colors.length = 5;
        // 打印数组
        console.log(colors);

        // 为新增加的 3 , 4 索引设置元素
        colors[3] = 'purple';
        colors[4] = 'orange';
        // 打印数组
        console.log(colors);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

2、通过索引值追加数组元素

原来的 JavaScript 数组中有 n 个元素 , 其索引值范围是 0 ~ n - 1 ;

如果再增加一个元素 , 就变成 n + 1 个元素 , 最后一个元素索引是 n ;

直接使用索引值 n 为数组元素赋值 , 可以达到向数组元素中追加元素的效果 ;

追加元素时的索引值 n 就是数组的 length 值 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组遍历

        // 创建数组 初始化 3 个元素
        var colors = ['blue', 'red', 'green'];
        // 打印数组
        console.log(colors);

        // 直接使用第 4 个元素的索引为第 4 个元素赋值
        colors[colors.length] = 'purple';
        // 打印数组
        console.log(colors);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

3、使用 push() 函数追加数组元素

调用 JavaScript 的 push() 方法可向数组的末尾添加一个或多个元素 , 并返回新的长度 ;

如果追加多个元素 , 则向 push 函数中传入多个参数 , 使用逗号隔开 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 数组遍历

        // 创建数组 初始化 3 个元素
        var colors = ['blue', 'red', 'green'];
        // 打印数组
        console.log(colors);

        // 向数组中追加 1 个元素
        colors.push('purple');
        // 打印数组
        console.log(colors);

        // 向数组中追加 2 个元素
        colors.push('orange', 'magenta');
        // 打印数组
        console.log(colors);
    </script>
</head>

<body>
</body>

</html>

执行结果 :