JavaScript学习笔记：数组

文章目录

一、一维数组
- 1、创建数组
- - （1）创建空数组，逐个赋值
  - （2）创建数组同时赋值
  - （3）创建字面量数组
- 2、添加数组元素
- 3、数组长度属性length
- 4、遍历数组
- - （1）传统for循环
  - （2）增强for循环
- 5、数组常用方法
- - （1）toString()方法
  - （2）join(分隔符)方法
  - （3）shift()方法
  - （4）unshift()方法
  - （5）pop()方法
  - （6）push()方法
  - （7）slice()方法
  - （8）sort()方法
  - （9）reverse()方法
  - （10）splice()方法
  - （11）concat()方法
二、二维数组
- 1、创建二维数组
- - （1）逐个赋值
  - （2）静态初始化整个二维数组
- 2、遍历二维数组

数组是一组数据构成的集合，通过下标或索引访问里面的元素。

一、一维数组

1、创建数组

（1）创建空数组，逐个赋值

<script type="text/javascript">// 创建数组var scores = new Array();// 逐个赋值scores[0] = 89;scores[1] = 90;scores[2] = 67;scores[3] = 75;scores[4] = 45;// 输出数组document.write(scores);
</script>

（2）创建数组同时赋值

<script type="text/javascript">         // 创建数组同时赋值var scores = new Array(89,90,67,75,45);// 输出数组document.write(scores);
</script>

（3）创建字面量数组

<script type="text/javascript">     // 创建字面量数组var scores = [89,90,67,75,45];// 输出数组document.write(scores);
</script>

注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）

<script type="text/javascript">         // 创建数组var student = new Array();// 逐个赋值student[0] = 1;student[1] = '张三丰';student[2] = true;student[3] = new Date(1997, 6, 5);// 输出数组document.write(student);
</script>

2、添加数组元素

只需使用下一个未使用的索引，任何时刻可以不断地向数组增加新元素。

<script>var cities = ['北京','上海','广州','深圳'];document.write(cities + '<br/>');cities[4] = '泸州';document.write(cities + '<br/>');cities[10] = '宜宾';document.write(cities + '<br/>');
</script>

3、数组长度属性length

数组的length属性表示数组的长度，即数组元素的个数。
数组arr的索引取值范围：[0, arr.length - 1]

<script>var arr = [45,56,67,23,90,100];document.write("数组内容：" + arr + "<br/>");document.write("数组长度：" + arr.length + "<br/>");document.write("第一个元素：" + arr[0] + "<br/>");document.write("最后一个元素：" + arr[arr.length - 1]+ "<br/>");
</script>

注意，数组的length属性是可变的，增加了数组元素或减少了数组元素，length属性值都会发生变化。

arr[8] = 88;
document.write("数组内容：" + arr + "<br/>");
document.write("数组长度：" + arr.length + "<br/>");document.write("移除第一个元素：" + arr.shift() + "<br/>");
document.write("数组内容：" + arr + "<br/>");
document.write("数组长度：" + arr.length + "<br/>");

可以直接修改length属性值，如果修改值大于数组原有长度，那么不影响原有数据，只是添加一些空值。但是修改值小于数组原有长度，那么就会导致部分数据丢失。

arr.length = 12;
document.write("数组内容：" + arr + "<br/>");
document.write("数组长度：" + arr.length + "<br/>");arr.length = 3;
document.write("数组内容：" + arr + "<br/>");
document.write("数组长度：" + arr.length + "<br/>");

4、遍历数组

（1）传统for循环

<script>var cities = ['北京','上海','广州','深圳','泸州'];// 采用传统for循环遍历数组for (var i = 0; i < cities.length; i++) {document.write('cities[' + i + '] = ' + cities[i] + '<br/>');}
</script>

（2）增强for循环

// 采用增强for循环遍历数组
for (var i in cities) {document.write('cities[' + i + '] = ' + cities[i] + '<br/>');
}

5、数组常用方法

（1）toString()方法

<script>var arr = ['12','34','67','89','47','21','89','100','50'];var arr_str = arr.toString();document.write(typeof arr_str + ': ' + arr_str);
</script>

（2）join(分隔符)方法

如果不设置分隔符，默认是逗号作为分隔符。

document.write(arr.join());
document.write(arr.join('-'));
document.write(arr.join(' '));

（3）shift()方法

移除数组头部元素，返回的也是数组头部元素。

document.write('移除头部元素：' + arr.shift() + '<br/>');
document.write('数组内容：' + arr + '<br/>');

（4）unshift()方法

在数组头部添加新元素。

document.write('在头部添加新元素：99' + '<br/>');
arr.unshift(99);
document.write('数组内容：' + arr + '<br/>');

（5）pop()方法

移除数组尾部元素，返回的也是数组尾部元素。

document.write('移除尾部元素：' + arr.pop() + '<br/>');
document.write('数组内容：' + arr + '<br/>');

（6）push()方法

在数组尾部添加新元素，一个或多个。

document.write('在尾部添加新元素：12,55' + '<br/>');
arr.push(12,55);
document.write('数组内容：' + arr + '<br/>');

（7）slice()方法

slice()方法是对数组进行切片操作，返回数组的一部分内容。

document.write('数组内容：' + arr + '<br/>');
document.write('slice(0,3)：' + arr.slice(0,3) + '<br/>');
document.write('slice(2,6)：' + arr.slice(2,6) + '<br/>');

（8）sort()方法

sort()默认是按字母排序。

document.write('数组内容：' + arr + '<br/>');
document.write('排序数组内容：' + arr.sort() + '<br/>');

大家可以看到，arr是按字母排序的，不是按数字排序的。
如果要按数字排序，那么就要传入一个函数作为参数。

function num_asc(a, b) {return a - b; // 升序
}
document.write('按数字升序：' + arr.sort(num_asc) + '<br/>');function num_des(a, b) {return b - a; // 降序
}
document.write('按数字降序：' + arr.sort(num_des) + '<br/>');

（9）reverse()方法

该方法将数组进行反序操作。

document.write('原序数组：' + arr + '<br/>');
arr.reverse();
document.write('反序数组：' + arr + '<br/>');

（10）splice()方法

该方法用于插入或删除数组元素。

// 从索引为2的元素开始，删除4个元素
arr.splice(2, 4);
document.write('数组内容：' + arr + '<br/>');
// 从索引为2的位置开始，插入4个元素
arr.splice(2, 0, '34', '47', '55', '67');
document.write('数组内容：' + arr + '<br/>');

（11）concat()方法

该方法用于连接两个数组。

var arr1 = [1, 2, 3];
var arr2 = ['北京', '上海', '广州'];
var arr3 = arr1.concat(arr2);
document.write('arr1：' + arr1 + '<br/>');
document.write('arr2：' + arr2 + '<br/>');
document.write('arr3：' + arr3 + '<br/>');

二、二维数组

1、创建二维数组

（1）逐个赋值

<script>// 创建二维数组var arr = new Array();for (var i = 0; i < 3; i++) {arr[i] = new Array();for (var j = 0; j < 4; j++) {arr[i][j] = (i + 1) * (j + 1);}}// 输出二维数组document.write('全部元素：' + arr + '<br/>');        document.write('行数：' + arr.length + '<br/>');document.write('列数：' + arr[0].length + '<br/>');
</script>

（2）静态初始化整个二维数组

<script>// 创建二维数组var arr = [[3, 4, 6, 7],[6, 3, 9, 1],[5, 8, 2, 3]];// 输出二维数组document.write('全部元素：' + arr + '<br/>');      document.write('行数：' + arr.length + '<br/>');document.write('列数：' + arr[0].length + '<br/>');
</script>

2、遍历二维数组

// 遍历二维数组
for (var i = 0; i < arr.length; i++) {for (var j = 0; j < arr[i].length; j++) {document.write(arr[i][j] + ' ');}document.write('<br/>');
}