07 JavaScript-数组-优快云博客

本文链接：https://blog.youkuaiyun.com/MengSao1001/article/details/127297390

1. 数组概述

数组对象是使用单独的变量名来存储一系列的值。

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。数组里的每一个元素都有自己的ID，以便它可以很容易地被访问到。

2. 数组定义的三种方法

2.1 常规方法

var myArray = new Array();
myArray[0] = 元素1;
myArray[1] = 元素2;
myArray[2] = 元素3;
...

2.2 简洁方法

var myArray = new Array(元素1,元素2,元素3,...);

2.3 字面量方法

var myArray = [元素1,元素2,元素3,...];

3. 数组调用

数组调用只需数组名后紧跟一对方括号，方括号里面写下标即可。

数组下标从0开始。

数组名[0];
数组名[1];

var fruit2 = ["苹果","香蕉","梨子"];
    console.log(fruit2)     //结果：苹果，香蕉，梨子        
    console.log(fruit2[0]); //结果：苹果

4. 数组遍历

4.1 for循环遍历数组

<script>
    var myArray = [1,2,3,4,5];
    for(var i = 0; i < myArray.length; i++){
        document.write(myArray[i]+"<hr>"); //<hr>:水平线
    }
</script>

4.2 for...of遍历数组

语法：
for(variable of iterable){
    statement;
}
variable:每个迭代的属性值被分配给该变量。
iterable:一个具有可枚举属性并且可以迭代的对象。

<script>
    var myArray = [1,2,3,4,5];
    for(var value of myArray){
        document.write(value+"<hr>"); //<hr>:水平线
    }
</script>

5. 数组方法

方法	描述
indexOf()	在数组中搜索指定元素的位置
concat()	链接两个或更多的数组，并返回结果
join()	把数组的所有元素放在一个字符串。元素通过指定的分隔符进行分割。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或多个元素，并返回新的长度
slice()	从某个已有的数组返回选定的元素
splice()	删除元素，并向数组添加新元素
sort()	对数组的元素进行培训
reverse()	颠倒数组中元素的排序
shift()	删除并返回数组的第一个元素
unshift()	向数组的开头添加一个或多个元素，并返回新的长度

5.1 indexOf()

indexOf()方法能找到指定元素在数组里第一次出现的位置，返回指定元素的索引值；如果没有找到，就返回-1。

<!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>concat()</title>
</head>
<body>
    <script>
        var arr = [1,2,3,4,5];
        console.log(arr.indexOf(3));//2
        console.log(arr.indexOf(6));//-1
    </script>
</body>
</html>

5.2 concat()

concat()方法用来链接两个或多个数组，并返回一个新的数组。该方法不会改变原来的数组。

<!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>Document</title>
</head>
<body>
    <script>
        var arr1 = [1,2,3,4,5];
        var arr2 = [6,7,8];
        console.log(arr1.concat(arr2));//[1,2,3,4,5,6,7,8]
        console.log(arr1); //[1,2,3,4,5]
        console.log(arr2); //[6,7,8]
    </script>
</body>
</html>

5.3 join()

join()方法可以把数组的全部元素链接到一起形成一个字符串。使用这个方法时还可以传入一个字符串参数，作为分隔符插入到最终的字符串里。如果省略该参数，则使用逗号作分隔符。

<!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>Document</title>
</head>
<body>
    <script>
        var arr = [1,2,3,4,5]; 
        console.log(arr.join()); //1,2,3,4,5
        console.log(typeof(arr.join())); //string
        console.log(arr.join("*")); // 1*2*3*4*5
    </script>
</body>
</html>

5.4 pop()

pop()方法用于删除数组的最后一个元素并返回删除的元素。该方法会改变数组的长度。

<!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>Document</title>
</head>
<body>
    <script>
        var arr = [1,2,3,4,5]; 
        console.log(arr.pop()); //5
        console.log(arr)        //1,2,3,4
        console.log(arr.length) //4
    </script>
</body>
</html>