javaScript-数组_let array = [1, 2, 3];array[6] = 9;console.log(arr-CSDN博客

本文链接：https://blog.csdn.net/hxy1625309592/article/details/110426457

3.1 数组定义

数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。
数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。
数组是一种将一组数据存储在单个变量名下的优雅方式。

3.2 创建数组

JS中创建数组有两种方式：

利用 new 创建数组

注意 Array ()，A 要大写    
var 数组名 = new Array() ；
// 创建一个新的空数组
var arr = new Array();

利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['kebe','jmaes',10,'11'];

注意

数组的字面量是方括号 [ ] 
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式

数组元素的类型

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。
```
var arrStus = ['Rondo',12,true,28.9];
```

3.3 数组解析赋值

解构赋值是ES6中新增的一种赋值方式。

解析赋值特点

在数组的解构赋值中, 左边的个数可以和右边的个数不一样。
如果右边的个数和左边的个数不一样, 那么我们可以给左边指定默认值。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>07-数组解构赋值</title>
  <script type="text/javascript">
	// 定义数组
	let array = [1,2,3,5];
	// 赋值操作
	let [a, b, c] = array;
	// 输出数组元素
	console.log("a=" + a);
	console.log("b=" + b);
	console.log("c=" + c);
	console.log("++++++++++++++");

	// 2.等号左边的格式必须和等号右边的格式一模一样, 才能完全解构
	// 定义数组
	let [a1, b1, [c1, d1]] = [1, 3, [2, 4]];
    // 输出数组元素
    console.log("a1=" + a1);
    console.log("b1=" + b1);
    console.log("c1=" + c1);
    console.log("++++++++++++++");
	
    // 3.ES6中新增的扩展运算符: ...
    let [a2, ...b2] = [1, 3, 5];
    console.log("a2 = " + a2);
    console.log(b2);
  </script>
</head>
<body>

</body>
</html>

执行结果

3.4 获取数组中的元素

**索引 (下标) ：**用来访问数组元素的序号（数组下标从0 开始)，如果访问时数组没有和索引值对应的元素，则得到的值是undefined。

var arr = ['kobe', '22',33,'GuardCode']
	索引号：   0      1    2    3

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的使用</title>
</head>
<body>
    <script type="text/javascript">
        // 利用new 创建数组
        var arr = new Array(); // 创建了一个空的数组
        
        // 利用数组字面量创建数组 []
        var arr = []; // 创建了一个空的数组
        var arr1 = [1, 2, 'pink', true];
        // 获取数组元素  格式 数组名[索引号]  索引号从 0开始
        console.log(arr1);
        console.log(arr1[2]); // pink
        console.log(arr1[3]); // true

        // 定义一个新数组
        var arr2 = ['11', '吉安特', 'string'];
        console.log(arr2[0]);
        console.log(arr2[1]);
        console.log(arr2[2]);
        console.log(arr2[3]); // 因为没有这个数组元素 所以输出的结果是 undefined
    </script>
</body>
</html>

3.4 遍历数组

2.4.1 数组遍历

把数组中的每个元素从头到尾都访问一次，可以通过 for 循环索引遍历数组中的每一项。

2.4.2 数组长度

默认情况下表示数组中元素的个数,使用“数组名.length”可以访问数组元素的数量（数组长度）。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组遍历</title>
</head>
<body>
    <script type="text/javascript">
        // 遍历数组：就是把数组的元素从头到尾访问一次
        var arr = ['red', 'green', 'blue'];
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
        // 输出数组的长度
        console.log(arr.length);
    </script>
</body>
</html>

3.5 数组的平均值

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算平均值</title>
</head>
<body>
    <script>
        // 定义数组
        var arr = [2, 6, 1, 7, 4];
        // 声明一个求和变量 sum。
        var sum = 0;
        // 声明一个平均值变量averge
        var average = 0;
        for (var i = 0; i < arr.length; i++) {
            // 遍历这个数组，把里面每个数组元素加到 sum 里面。
            sum += arr[i];
        }
        // 用求和变量 sum 除以数组的长度就可以得到数组的平均值。
        average = sum / arr.length;
        console.log(sum, average);
    </script>
</body>
</html>

3.6 数组新增元素

数组中可以通过以下方式在数组的末尾插入新元素：

数组[数组.length ] = 新数据;

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增数组元素</title>
</head>
<body>
    <script type="text/javascript">
        // 1. 新增数组元素 修改length长度
        var arr = ['red', 'green', 'blue'];
        console.log(arr.length);
        arr.length = 5; // 把我们数组的长度修改为了5里面应该有5个元素
        console.log(arr);
        console.log(arr[3]); // undefined
        console.log(arr[4]); // undefined

        // 2. 新增数组元素 修改索引号 追加数组元素
        var arr1 = ['red', 'green', 'blue'];
        arr1[3] = 'pink';
        console.log(arr1);
        arr1[4] = 'hotpink';
        console.log(arr1);
        arr1[0] = 'yellow'; // 这里是替换原来的数组元素
        console.log(arr1);
        arr1 = '有点意思';
        console.log(arr1); // 不要直接给 数组名赋值 否则里面的数组元素都没有了
    </script>
</body>
</html>

3.7 筛选数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选数组</title>
</head>
<body>
    <script type="text/javascript">
        /*
        将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。
        声明一个新的数组用于存放新数据newArr。遍历原来的旧数组， 找出大于等于 10 的元素。依次追加给新数组 newArr。
        */

        // 方法1
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        var j = 0;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                // 新数组索引号应该从0开始 依次递增
                newArr[j] = arr[i];
                j++;
            }
        }
        console.log(newArr);

        // 方法2
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        // 刚开始 newArr.length 就是 0
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                // 新数组索引号应该从0开始 依次递增
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
    </script>
</body>
</html>

3.8 数组的增删改查

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08-数组的增删改查</title>
  <script type="text/javascript">
	// 1.1定义数组
	let array = ["23", "kobe", "curry", "abc"];
	// 1.2 将索引为1的数据修改为guardwhy
	array[1] = "guardwhy";
	console.log("array数组(修改):" + "[" + array + "]");
	console.log("++++++++++++++++++++");

	// 2.1 替换数组元素
	array.splice(1, 2, "33", "James");
    console.log("array数组(替换):" + "[" + array + "]");
    console.log("++++++++++++++++++++");

    // 3.在数组最后添加一条数据
	let number = array.push("str");
	console.log("number长度:" + "[" + number + "]");
    console.log("array数组(添加):" + "[" + array + "]");
    console.log("++++++++++++++++++++");

    // 4.在数组最前面添加两条数据
	// unshift方法和push方法一样, 会将新增内容之后当前数组的长度返回.
	let length1 = array.unshift("guardwhy","13");
	console.log("length1长度:"+ "[" + length1 + "]");
    console.log("array数组(添加):" + "[" + array + "]");
    console.log("++++++++++++++++++++");

    // 5.删除数组最后一条数据。
	let length2 = array.pop();
    console.log("length2长度:"+ "[" + length2 + "]");
    console.log("array数组(添加):" + "[" + array + "]");
    console.log("++++++++++++++++++++");

    // 6.删除数组最前面一条数据
    let length3 = array.shift();
    console.log("length3长度:"+ "[" + length3 + "]");
    console.log("array数组(添加):" + "[" + array + "]");
  </script>
</head>
<body>

</body>
</html>

执行结果

3.9 数组常用方法

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数组常用方法</title>
  <script type="text/javascript">
	// 定义数组
	let array1 = [1,2,3,4,5];
	// 1.清空数组
	array1.splice(0, array1.length);
    console.log("array1数组:" + "[" + array1 + "]");
    console.log("++++++++++++++");

    // 2.数组转换为字符串
    let array2 = [1,2,3,4,5];
	let str = array2.toString();
	console.log("str字符串:" + str);
	console.log("str数据类型:" + typeof str);
    console.log("++++++++++++++");

    // 3.将两个数组拼接为一个数组
	// 3.1 方式一
	let num1 = [1,3,4,5];
	let num2 = [1,3,6,9];
	// 用加号进行拼接会先转换成字符串再拼接.
	let res1 = num1.concat(num2);
	console.log("res1数组:" + res1);
	console.log("res1数组数据类型:" + typeof res1);
    console.log("==================");

	// 3.2 方式二
    let array3 = [1,10,4,6];
    let array4 = [1,5,6,11];
    /*
    扩展运算符在解构赋值中表示将剩余的数据打包成一个新的数组.
    扩展运算符在等号右边, 表示将数组中所有的数据解开, 放到所在的位置.
    */
	let res2 = [...array3, ...array4];
    console.log("res2数组:" + res1);
    console.log("res2数组数据类型:" + typeof res1);
    console.log("==================");

    // 4.对数组中的内容进行反转
	let num3 = [1,2,3,4,5];
	let res3 = num3.reverse();
    console.log("res3数组:" + res3);
    console.log("res3数组数据类型:" + typeof res3);
    console.log("==================");

    // 5.截取数组中指定范围内容
    let num4 = [1,2,3,4,5];
    // slice方法是包头不包尾(包含起始位置, 不包含结束的位置)
	let res4 = num4.slice(1,3);
    console.log("res4数组:" + res4);	// res4数组:2,3
    console.log("num4数组:" + num4);
    console.log("==================");

    // 6.查找元素在数组中的位置
	let num5 = [1, 2, 3, 4, 5, 3];
	/*
	 indexOf方法如果找到了指定的元素, 就会返回元素对应的位置,如果没有找到指定的元素, 就会返回-1.
     注意点: indexOf方法默认是从左至右的查找, 一旦找到就会立即停止查找。
	*/
	let res5 = num5.indexOf(3);
	console.log("元素索引:" + res5);
	// 6.1 从什么位置开始查找
    let res6 = num5.indexOf(3, 4);
    console.log("元素索引:" + res6);	// 元素索引:5
	// 6.2 lastIndexOf方法默认是从右至左的查找, 一旦找到就会立即停止查找
	let res7 = num5.lastIndexOf(3, 4);
    console.log("元素索引:" + res7);
  </script>
</head>
<body>

</body>
</html>

执行结果

3.10 二维数组

二维数组就是数组的每一个元素又是一个数组, 称之为二维数组。

3.10.1 操作二维数组

从二维数组中获取数据

数组名称[二维数组索引]; 得到一个一维数组
数组名称[二维数组索引][一维数组索引]; 得到一维数组中的元素

往二维数组中存储数据

数组名称[二维数组索引] = 一维数组;
数组名称[二维数组索引][一维数组索引] = 值;

3.10.2 遍历二维数组

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>二维数组</title>
  <script type="text/javascript">
	// 1.定义数组
	let array = [[1,3], [2,6]];
	// 2.遍历二维数组
	for(let i=0; i<array.length; i++){
	  let element = array[i];
	  for (let j=0; j<element.length; j++){
	    console.log(element[j]);
	  }
	}
  </script>
</head>
<body>

</body>
</html>

执行结果