JavaScript 引用类型详解:Object、Array 与内存存储机制
JavaScript 中的数据类型分为基本类型和引用类型。本文深入解析 Object、Array 等引用类型的特性,对比值传递与引用传递的差异,并详细讲解数组的常用方法及内存存储机制,帮助开发者避免常见的引用赋值陷阱。
引用与值的传递机制
在 JavaScript 中,变量之间的数据传递主要分为两种模式:
- 值传递:针对基本数据类型(如 Number、String)。传递时会将数据的副本复制一份给新变量,修改原变量不会影响副本。
- 引用传递:针对引用数据类型(如 Object、Array)。传递时复制的是内存地址(指针),而非数据本身。这意味着多个变量可能指向堆内存中的同一份数据。
1. Object 对象详解
第 1 步:创建对象实例
推荐优先使用字面量方式声明对象,语法更简洁且性能更优。
// 字面量创建对象
let obj = {
uname : '阿飞',
age : 22,
sex : '男'
}
// 构造函数创建(不推荐)
let obj2 = new Object({ uname : '阿飞', age : 22, sex : '男' });第 2 步:获取对象的键与值
利用 Object 静态方法可以快速提取对象属性信息:
// 获取所有键名 let keys = Object.keys(obj); // 获取所有键值 let values = Object.values(obj);
第 3 步:理解对象在内存中的存储
引用类型的数据存储在堆内存中,而栈内存中保存的是该对象在堆中的地址(类似于房间号)。当进行对象赋值时,实际上只是复制了这个地址。
由于两个变量指向同一个堆内存地址,修改其中一个变量会直接影响另一个变量的数据值。这是引用类型最显著的特征,也是引发 Bug 的常见原因。
小结与建议
- 推荐使用
{}字面量方式声明对象。 - 如需合并对象,可使用
Object.assign()创建新对象而不修改原对象。 - 理解堆栈区别:基本类型存于栈,引用类型存于堆,栈中存址。
2. Array 数组核心操作
数组同样是引用类型,其内存存储方式与普通对象一致:栈中存址,堆中存值。因此,数组赋值同样会导致引用共享问题。
第 4 步:创建数组
// 字面量 let arr = [1, 2, 3]; // 构造函数 let ary = new Array(1, 2, 3);
第 5 步:掌握高频数组方法
以下是日常开发中最常用的数组操作方法,按功能分类说明:
(1) 拼接与字符串化
// concat:返回新数组,不修改原数组
let newArr = arr.concat(['a', 'b']);
// join:将数组元素连接为字符串
let str = ['a', 'b'].join('-'); // "a-b"(2) 查找与定位
// indexOf:返回首次出现的索引,无则 -1
let index = ['a', 'b'].indexOf('a');
// lastIndexOf:返回最后一次出现的索引
let lastIndex = ['a', 'b', 'a'].lastIndexOf('a');
// find:返回满足条件的第一个元素
let found = [10, 20].find(item => item > 15); // 20
// findIndex:返回满足条件的第一个元素的索引
let fIndex = [10, 20].findIndex(item => item > 15); // 1
// some/every:测试条件,返回布尔值
let hasLarge = [1, 2, 6].some(item => item > 5); // true
let allSmall = [1, 2, 3].every(item => item < 5); // true
// filter:过滤出满足条件的元素组成新数组
let filtered = [1, 5, 8].filter(item => item > 4); // [5, 8](3) 遍历与映射
// forEach:仅遍历,无返回值 arr.forEach((item, index) => console.log(item)); // map:遍历并返回一个新数组(每个元素经过回调处理) let mapped = [1, 2].map(item => item * 2); // [2, 4]
(4) 排序与类型判断
// reverse:翻转数组顺序
[1, 2].reverse();
// sort:默认排序基于字符串 Unicode 编码,数字需传比较函数
let nums = [3, 16, 2];
nums.sort(function(a, b) {
return a - b; // 正序
});
// isArray:严格判断是否为数组
Array.isArray([]); // true
// Array.from:将类数组对象转换为真数组
let pseudo = { 0: 'a', length: 1 };
let realArr = Array.from(pseudo); // ['a']3. RegExp 正则表达式
正则对象也属于引用类型,通常有两种创建方式:
// 字面量方式(推荐)
let reg = /abc/;
// 构造函数方式
let reg1 = new RegExp('abc');以上就是 JavaScript 引用数据类型的详细内容,更多关于 JavaScript 内存管理与数组操作的资料请关注本站其它相关文章!
免责声明:本文内容仅供参考,不代表本站观点。转载或引用请注明出处。









