JavaScript基础：Array对象的属性（length）和方法（concat、join、push、reverse、sort、splice）的应用

BestKagome

已于 2023-05-31 15:25:42 修改

阅读量922

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-07-06 12:07:47 首次发布

本文链接：https://blog.youkuaiyun.com/Alley_Olive/article/details/125636746

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了JavaScript中Array对象的几个重要属性和方法，包括length属性，以及concat、join、push、reverse、sort和splice等方法的使用。通过实例演示，详细解释了它们的工作原理和应用场景，旨在帮助开发者更好地理解和掌握JavaScript数组操作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript基础：Array对象的属性（length）和方法（concat、join、push、reverse、sort、splice）的应用</title>
    <!--
        Array对象属性：
            1、length： 设置或返回数组中元素的数目

        Array对象的方法：
            1、concat()     连接两个或更多的数组，并返回结果
            2、join()       把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔
            3、push()       向数组末尾添加一个或更多元素，并返回新的长度
            4、reverse()    颠倒数组中元素的顺序
            5、sort()       对数组的元素进行排序
            6、splice()     删除元素，并向数组添加新元素
                语法：
                splice(number startIndex, number deleteCount);
                splice(number startIndex, number deleteCount, number item);
                splice(number startIndex, number deleteCount, number[] items);
                splice(要删除的元素的起始索引， 要删除的元素数量， 新添加的元素（数字或数字类型数组）);
    -->
    <script>
        // 测试Array数组的concat方法
        // 原先数组调用concat方法并不会被改变值，还是和原来的一样
        // 新生成数组的元素顺序会因为原先2个数组的拼接顺序而不同
        var array1 = [2, 4, 1, 3];
        var array2 = [6, 8, 7, 5];
        var array3 = array1.concat(array2);
        var array4 = array2.concat(array1);
        console.log("目前array1的数据是：");
        console.log(array1);
        console.log("目前array2的数据是：");
        console.log(array2);
        console.log("连接数组后，目前array3的数据是：");
        console.log(array3);
        console.log("连接数组后，目前array4的数据是：");
        console.log(array4);


        // 测试Array数组的join方法
        // 以逗号或竖线为分隔符，将原先数组的所有元素拼接成一个字符串
        var arrayToStr1 = array3.join(",");
        var arrayToStr2 = array4.join("|");
        console.log("以逗号为分隔符，拼接后的字符串1是： " + arrayToStr1);
        console.log("以竖线为分隔符，拼接后的字符串2是： " + arrayToStr2);


        // 测试Array数组的push方法
        // 向Array数组中添加元素，并返回新的长度
        var arrayLength1 = array3.push(9);
        console.log("添加新元素后，目前array3的长度是：" + arrayLength1);
        console.log("添加新元素后，目前array3的数据是：");
        console.log(array3);


        // 测试Array数组的reverse方法
        // 将原先Array数组中所有元素颠倒顺序
        array3.reverse();
        console.log("颠倒顺序后，目前array3的数据是：");
        console.log(array3);


        // 测试Array数组的sort方法
        // 将原先Array数组中所有元素进行升序排序
        array3.sort();
        console.log("升序排序后，目前array3的数据是：");
        console.log(array3);


        // 测试Array数组的splice方法
        // 1. 只删除元素，不添加元素
        //    第2个参数设置为大于等于1的数字就达到删除元素的目的，第3个参数不设置就不添加元素
        // 1.1、删除单个元素：只删除下标为2的1个元素
        array3.splice(2, 1);
        console.log("删除下标为2的元素后，目前array3的数据是：");
        console.log(array3);


        // 1.2、删除多个元素：从下标为3的元素开始删除，并删除它之后（包括它本身）的共4个元素
        array3.splice(3, 4);
        console.log("删除下标为3之后（包括它本身）的共4个元素后，目前array3的数据是：");
        console.log(array3);


        // 1.3、删除指定元素后的所有元素：从下标为2的元素开始删除，并删除它之后（包括它本身）的所有元素
        array3.splice(2);
        console.log("删除下标为2之后（包括它本身）的所有元素后，目前array3的数据是：");
        console.log(array3);


        // 1.4、删除所有元素：从下标为0的元素开始删除，并删除它之后（包括它本身）的所有元素
        array3.splice(0);
        console.log("删除所有元素后，目前array3的数据是：");
        console.log(array3);


        // 2. 不删除元素只添加元素
        //    第2个参数设置为0就达到不删除元素的目的，第3个参数既可以传入1个数字，也可以传入数字类型的数组
        // 2.1、添加1个数字：在数组下标为0的元素之前添加1个数字10
        array4.splice(0, 0, 10);
        console.log("添加1个数字10之后，目前array4的数据是：");
        console.log(array4);


        // 2.2、添加1个数字类型数组：在数组下标为3的元素之前添加1个数字类型数组
        array4.splice(3, 0, [13, 11, 12]);
        console.log("添加1个数字类型数组之后，目前array4的数据是：");
        console.log(array4);


        // 3. 既删除元素又添加元素（替换元素）
        //    第2个参数设置为大于等于1的数字就达到删除元素的目的，第3个参数既可以传入1个数字，也可以传入数字类型的数组
        // 3.1、替换1个数字：
        //      先删掉下标为3的元素，然后添加数字9作为替换元素
        array4.splice(3, 1, 9);
        console.log("替换下标为3的元素之后，目前array4的数据是：");
        console.log(array4);


        // 3.2、替换1个数字类型数组：
        //      从下标为4的元素开始删除，并删除它之后（包括它本身）的共3个元素，并替换成1个新的数字类型数组
        array4.splice(4, 3, [14, 15, 16]);
        console.log("替换数字类型数组之后，目前array4的数据是：");
        console.log(array4);
    </script>
</head>
<body>
    <h3>JavaScript基础：Array对象的属性（length）和方法（concat、join、push、reverse、sort、splice）的应用</h3>
</body>
</html>

控制台输出以下信息：