JavaScript引用类型详解:Object与Array核心操作指南

Leo
Leo
发布时间:2026-10-14 | 5人浏览过
原创

JavaScript中的引用类型是面向对象编程的基础,主要用于将数据和功能组织在一起。本文重点解析Object和Array两种核心引用类型的创建方式及Array对象的各类操作方法,包括增删改查、排序、迭代与归并,提供实用的代码示例以辅助理解指针指向与实例操作逻辑。

引用类型与Object对象

引用类型在ECMAScript中常被称为类,但更准确的称呼是对象定义,因为它们描述了一类对象所具有的属性和方法。尽管JavaScript是一门面向对象语言,但它不具备传统语言中严格的类和接口结构。引用类型的值即为对象,而对象则是某个特定引用类型的实例。

创建Object实例通常有两种方式:

  • 构造函数法:使用 new Object()。例如:
    var a = new Object();
    变量 a 存储的不是实例本身,而是指向该实例的指针。
  • 对象字面量法:推荐使用的简洁写法,具有封装感。例如:
    var a = { name: "Nick", age: 20 };

访问对象属性时,可使用点表示法或方括号表示法:

a.name // 等价于 a["name"]
注意方括号内的键名必须为字符串。

Array对象基础与转换

Array类型支持数组字面量表示法。在处理数组时,length 属性不仅反映数组项数,还可用于从末尾添加或移除项。

类型检测:

  • 推荐使用 Array.isArray(value) 判断变量是否为数组,比 instanceof 更可靠,尤其在跨窗口环境下。

转换方法:

  • toString():将数组每一项转换为逗号分隔的字符串。
  • valueOf():返回数组对象本身。
  • toLocaleString():可自定义每项的本地化字符串表示。若数组项对象重写了 toLocalStrting 方法,调用时将执行该自定义逻辑。例如:
    var p1 = { toString: function(){ return "guo"; }, toLocaleString: function(){ return "yuzhe"; } };
    var p2 = { toString: function(){ return "song"; }, toLocaleString: function(){ return "hap"; } };
    var p = [p1, p2];
    alert(p);           // guo,song
    alert(p.toLocaleString()); // yuzhe,hap
  • join():以指定分隔符连接数组项,默认为逗号 ,。

Array核心操作方法详解

第1步:栈与队列操作(增删项)

目的:模拟栈(后进先出)和队列(先进先出)的数据行为。

  • 栈方法:
    - push(...items):向数组末尾添加一项或多项,返回新长度。
    - pop():移除数组最后一项,返回该项的值。
  • 队列方法:
    - unshift(...items):向数组开头添加项,返回新长度。
    - shift():移除数组第一项,返回该项的值。

第2步:重排序操作

目的:改变数组元素的顺序。

  • reverse():反转数组项的顺序。
  • sort():默认按字符串Unicode码点升序排列。对于数字,直接排序可能不符合预期(如 [10, 5] 会排成 [10, 5]),需传入比较函数。
    function compare(no1, no2) {
     if (no1 < no2) return -1;
     else if (no1 > no2) return 1;
     else return 0;
    }
    var a = [1, 2, 3, 4, 6, 5];
    a.sort(compare);
    // 结果: [1, 2, 3, 4, 5, 6]
    若要降序,只需调整 if 语句中的返回值符号即可。

第3步:操作方法(切片与拼接)

目的:在不影响原数组或精确修改原数组区间内容。

  • concat():基于当前数组创建一个新数组,并将参数添加到尾部。**不修改原数组**。
  • slice(start, end):返回从 start 到 end(不包含 end)的子数组副本。**不修改原数组**。若只有一个参数,则截取到末尾。支持负数索引(length + 负数)。若结束位置小于起始位置,返回空数组。
  • splice():**主要用途是操作原数组**,支持三种模式:
    - 删除:指定两个参数(起始位置、删除项数)。
    - 插入:指定三个参数(起始位置、0删除数、要插入的项)。
    - 替换:指定三个参数(起始位置、删除项数、要插入的项)。
    插入和替换的操作位置均为起始索引处。

第4步:位置查找方法

目的:定位元素在数组中的索引。

  • indexOf(item, fromIndex?):从前向后搜索,返回第一个匹配项的索引,未找到返回 -1。
  • lastIndexOf(item, fromIndex?):从后向前搜索,返回最后一个匹配项的索引。

第5步:迭代方法

目的:对数组每一项执行回调函数,回调函数接收三个参数:item(值)、index(索引)、array(数组对象)。

  • every():所有项均返回 true 才返回 true。
  • some():只要有一项返回 true 即返回 true。
  • filter():返回所有使回调返回 true 的项组成的新数组。
  • map():返回每次回调执行结果组成的新数组。
  • forEach():遍历每一项,无返回值,用于单纯执行操作。

示例:

var a = [1, 2, 3, 4];
var b = a.every(function(item, index, array) {
 return item > 2;
});
alert(b); // false (因为并非所有项都大于2)

第6步:归并方法

目的:将数组缩减为单个值。

  • reduce():从左向右遍历,初始值为数组第一项。回调接收 previousValue(累积值)、currentValue(当前项)、index、array。
  • reduceRight():从右向左遍历,用法同 reduce。

示例:求数组所有项之和

var a = [1, 2, 3, 4];
var sum = a.reduce(function(prev, cur) {
 return prev + cur;
});
alert(sum); // 10
第一次执行时,prev 为 1,cur 为 2;随后 prev 累加,直至完成遍历。

以上就是JavaScript引用类型中Object与Array相关操作的详细内容,更多关于JavaScript基础教程的资料请关注本站其它相关文章!

相关标签:

本站声明

本文内容仅供参考,不代表本站观点。转载或引用请注明出处。如发现内容问题,请通过联系我们页面反馈。

Python 相关产品和应用

全部下载

专题列表