JavaScript 数组基础详解:创建、操作与二维数组应用

桃夭
桃夭
发布时间:2026-10-16| 5人浏览过
原创

本文介绍 JavaScript 数组的创建(构造函数与字面量)、元素存取、长度控制及二维数组处理技巧,帮助开发者高效管理数据集合。

数组基础与创建方式

在 JavaScript 中,Array 是一种特殊的对象类型。与普通对象使用字符串作为属性名不同,数组使用从 0 开始的整数作为索引来操作元素。由于具有更高效的内存存储性能,数组是日常开发中存储有序数据的首选结构。typeof 检查数组时会返回 "object"。

第1步:实例化一个空数组

可以通过构造函数创建一个空的数组对象:

var arr = new Array();

第2步:向数组中添加元素

数组支持动态扩展,通过赋值操作即可将新元素存入指定索引位置。如果写入不存在的索引,浏览器不会报错,而是返回 undefined。

第3步:获取与修改数组长度

可以使用 length 属性获取数组元素的个数。对于连续数组,它直接等于元素总数;对于非连续稀疏数组,它等于最大索引加一。建议尽量保持数组连续性以优化性能。

  • 修改 length 属性:如果设置一个新的 length 值小于当前长度,超出部分的元素将被截断删除;若新值大于当前长度,数组会被延长并产生空位。
  • 在末尾添加元素:最稳妥的方式是利用当前长度作为新索引进行赋值。
arr[arr.length] = 70;
arr[arr.length] = 80;
arr[arr.length] = 90;

数组字面量与数据类型灵活性

除了构造函数,更推荐使用方括号 [](字面量)来创建数组。字面量允许在定义时直接指定初始内容,写法更加简洁直观。

第4步:初始化包含数据的数组

使用字面量或传递参数给构造函数均可初始化数组。注意两者在传入单个数字时的行为差异:[10] 是包含一个数值 10 的数组;而 new Array(10) 则是创建一个长度为 10 的空数组。

// 字面量定义
var arr = [1, 2, 3, 4, 5];

// 构造函数定义
var arr2 = new Array(1, 2, 3, 4, 5);
console.log("字面量数组:", arr); // [1, 2, 3, 4, 5]
console.log("单参构造函数:", new Array(10)); // 长度为10的空数组
console.log("arr.length=", arr.length);

JavaScript 数组具有极高的灵活性,可以混合存储不同类型的数据,包括数字、布尔值、对象甚至函数。

// 混合数据类型
var arrData = ["孙悟空", 1, true, null, undefined];
console.log(arrData);

// 存储对象
var arrObj = [{name:"孙悟空"}, {name:"猪八戒"}];
console.log(arrObj[0].name); // 输出: 孙悟空

第5步:存储并调用函数

数组还可以存储匿名函数,并通过索引加括号的方式执行:

var arrFunc = [
    function () { alert(1) },
    function () { alert(2) }
];
arrFunc[0](); // 触发弹窗显示 1

二维数组的应用

二维数组本质上是由多个一维数组组成的数组,常用于表示表格或矩阵数据。访问元素需要依次指定“行下标”和“列下标”。

第6步:创建二维数组

可以通过嵌套的字面量语法或 new Array 构造函数构建二维结构:

// 方法一:字面量(推荐)
var matrix = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f'],
    ['g', 'h', 'i']
];

// 方法二:构造函数
var arrayObj = new Array(
    new Array(10, 20),
    new Array(30, 40)
);

第7步:二维数组实战操作

以下是两个常见应用场景的代码实现:将矩阵按原样打印输出,以及实现矩阵转置(行列互换)。

var str = '';
// 遍历并拼接原始矩阵
for(var i=0; i<matrix.length; i++) {
    for(var j=0; j<matrix[i].length; j++) {
        str += matrix[i][j] + '\t';
    }
    str += '\n';
}
console.log("转置前:\n", str);

// 矩阵转置逻辑
var res = [];
for(var i=0; i<matrix[0].length; i++) {
    res[i] = []; // 初始化新的一行
    for(var j=0; j<matrix.length; j++) {
        res[i][j] = matrix[j][i];
    }
}
console.log("转置后:", res);

另一个实用场景是求取每一行的最大值:

// 输出矩阵每行最大值
for(var i=0; i<matrix.length; i++) {
    var max = matrix[i][0]; // 假设第一个元素为最大
    for(var j=1; j<matrix[i].length; j++) {
        if(max < matrix[i][j]) {
            max = matrix[i][j];
        }
    }
    console.log("第"+(i+1)+"行的最大值是:"+max);
}

总结

熟练掌握 JavaScript 数组的灵活创建方式、长度控制机制以及基于循环的二维数据处理,是编写高质量前端代码的基础。以上就是JavaScript数组简介的详细内容,更多关于JavaScript数组操作的资料请关注本站其它相关文章!

相关标签:

免责声明:本文内容仅供参考,不代表本站观点。转载或引用请注明出处。

Python 相关产品和应用

全部下载
Selenium

Selenium

4.51.0 · Windows

用于浏览器自动化和 Web 测试的 Python 工具。

scikit-learn

scikit-learn

1.9.1 · Windows

常用 Python 机器学习算法与模型评估工具库。

Black

Black

26.10.1 · Windows

强调一致性的 Python 自动代码格式化工具。

Ruff

Ruff

0.17.1 · macOS

由 Rust 编写的高速 Python 代码检查和格式化工具。

pytest

pytest

9.1.1 · Windows

简洁而强大的 Python 自动化测试框架。

FastAPI

FastAPI

0.146.0 · Windows

高性能 Python API 框架,支持类型提示和自动接口文档。

Flask

Flask

3.1.3 · Windows

轻量灵活的 Python Web 应用框架。

Django

Django

6.1.2 · Windows

成熟的 Python Web 框架,适合构建内容站点和业务系统。

Spyder

Spyder

6.1.7 · Windows

面向科学计算与数据分析的 Python 集成开发环境。

SciPy

SciPy

1.18.1 · Windows

面向科学、工程和技术计算的 Python 算法库。