【3.6JavaScript】JavaScript数组对象

文章目录

- 1.数组创建
- 2.获取数组长度
- 3.截取数组某部分
- 4.为数组添加元素
- - 4.1 在数组开头添加元素：unshift（）
  - 4.2 在数组结尾添加元素： push()
- 5.删除元素
- - 5.1 删除数组中的第一个元素： shift()
  - 5.2 删除数组中最后一个元素：pop()
- 6.数组大小比较：sort()
- 7.数组颠倒顺序：reverse()
- 8.将数组元素连接成字符串：join()
- 9.数组与字符串的转换操作

1.数组创建

javascript">var 数组名 = new Array(元素1, 元素2, ……,元素n);
var 数组名 = [元素1, 元素2, ……, 元素n];

举例：

javascript">var arr = [];
var arr = ["HTML","CSS","JavaScript"];

数组的下标是从 0 开始的，而不是从 1 开始的

2.获取数组长度

javascript">数组名.length;

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>javascript">
        // 创建数组
        var arr = [];
        arr[0] = "HTML";
        arr[1] = "CSS";
        arr[2] = "JavaScript";

        // 输出数组长度
        document.write(arr.length + "<br>");

    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>javascript">
        // 创建数组
        var arr = [123, "javascript", true, 3.14, null, undefined, {name: "tom", age: 20}, [1, 2, 3]];
        // 输出数组
        for(var i = 0; i < arr.length; i++){
            document.write(arr[i] + "<br>");
        }

    </script>
</head>
<body>
</body>
</html>

不是说数组时存储一组“相同数据类型”的数据结构吗？

在 JavaScript 中，其实一个数组是可以储存 “不同数据类型” 的数据的，只不过我们极少这样做。一般情况下都是用数组来存储 “相同数据类型” 的数据。

3.截取数组某部分

javascript">数组名.slice(start, end);

截取范围： [ start , end )。其中 end 可以省略。当 end 省略时，获取范围为： start 到结尾

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>javascript">
        // 创建数组
        var arr = new Array(1, 2, 3, 4, 5);
        document.write(arr.slice(1, 3)); // 2,3

    </script>
</head>
<body>
</body>
</html>

4.为数组添加元素

4.1 在数组开头添加元素：unshift（）

javascript">数组名.unshift(新元素1, 新元素2, ……, 新元素n);

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>javascript">
        // 创建数组
        var arr = new Array(1, 2, 3, 4, 5);
        arr.unshift(6, 7, 8);
        document.write(arr + "<br>");

    </script>
</head>
<body>
</body>
</html>

4.2 在数组结尾添加元素： push()

javascript">数组名.push(新元素1, 新元素2, ……, 新元素n);

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>javascript">
        // 创建数组
        var arr = new Array(1, 2, 3, 4, 5);
        arr.push(6, 7, 8);
        document.write(arr + "<br>");

    </script>
</head>
<body>
</body>
</html>

5.删除元素

5.1 删除数组中的第一个元素： shift()

javascript">数组名.shift();

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>javascript">
        // 创建数组
        var arr = new Array(1, 2, 3, 4, 5);
        arr.shift(); // 删除数组第一个元素
        document.write(arr + "<br>");

    </script>
</head>
<body>
</body>
</html>

5.2 删除数组中最后一个元素：pop()

javascript">数组名.pop();

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>javascript">
        // 创建数组
        var arr = new Array(1, 2, 3, 4, 5);
        arr.pop(); // 删除数组第一个元素
        document.write(arr + "<br>");

    </script>
</head>
<body>
</body>
</html>

总结： unshift()、push()、shift()、pop() 这四个元素都会改变数组的结构，相当于生成了一个新的数组，因此数组的长度（length 属性）也会改变，我们需要记住这一点

6.数组大小比较：sort()

在 JavaScript 中，我们可以使用 sort() 方法来对数组中所有元素进行大小比较，然后按照从大到小或者从小到大的顺序进行排序

javascript">数组名.sort(函数名);

“函数名” 是定义数组元素排序的函数的名字

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>javascript">
        // 定义一个升序函数
        function up(a, b) {
            return a - b;
        }
        // 定义一个降序函数
        function down(a, b) {
            return b - a;
        }

        var arr = new Array(3, 9, 5, 7, 1, 8, 2, 6, 4);
        arr.sort(up);
        document.write(arr + "<br>");
        arr.sort(down);
        document.write(arr + "<br>");

    </script>
</head>
<body>
</body>
</html>

此处不用深究，之后在 JavaScript 进阶会学到

7.数组颠倒顺序：reverse()

javascript">数组名.reverse();

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>javascript">
        var arr = new Array(3, 9, 5, 7, 1, 8, 2, 6, 4);
        arr.reverse();
        document.write(arr + "<br>");

    </script>
</head>
<body>
</body>
</html>

8.将数组元素连接成字符串：join()

javascript">数组名.join("连接符");

连接符是可选参数，用于指定连接元素之间的符号。默认情况下，则采用英文逗号（ , ）作为连接符来连接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>javascript">
        var arr = new Array(3, 9, 5, 7, 1, 8, 2, 6, 4);
        document.write(arr.join()+"<br>");
        document.write(arr.join("-")+"<br>");
        document.write(arr.join(" ")+"<br>");
        document.write(arr.join("")+"<br>");

    </script>
</head>
<body>
</body>
</html>

注意：join(" “) 和 join(”") 是不一样的！前者两个引号之间是有空格的，所以表示用空格作为连接符来连接，而后者两个引号之间是没有空格的。

9.数组与字符串的转换操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>javascript">
        var str = "我爱你中国";
        var str2 = str.split("").join("><");
        var arr = str2.split("");
        arr.unshift("<");
        arr.push(">");
        document.write(arr.join(""));

    </script>
</head>
<body>
</body>
</html>