《JavaScript启示录》——1.13 如何存储或复制复杂值

简介: 复杂值是通过引用进行存储和操作的,理解这一点相当重要。创建一个包含复杂对象的变量时,其值是内存中的一个引用地址。引用一个复杂对象时,使用它的名称(即变量或对象属性)通过内存中的引用地址获取该对象值。当考虑试图复制一个复杂值时会发生什么事的时候,这就非常重要了。

本节书摘来自异步社区《JavaScript启示录》一书中的第1章,第1.13节,作者:【美】Cody Lindley著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.13 如何存储或复制复杂值

复杂值是通过引用进行存储和操作的,理解这一点相当重要。创建一个包含复杂对象的变量时,其值是内存中的一个引用地址。引用一个复杂对象时,使用它的名称(即变量或对象属性)通过内存中的引用地址获取该对象值。当考虑试图复制一个复杂值时会发生什么事的时候,这就非常重要了。下面创建一个对象,并将它保存在变量myObject中,然后将myObject中的这个值复制到变量copyOfMyObject中。实际上,这并不是复制对象,更像是复制对象的地址。

<!DOCTYPE html><html lang="en"><body><script>

var myObject = {};
var copyOfMyObject = myObject; //没有复制值,而是复制了引用

myObject.foo = 'bar'; // 操作myObject中的值

/* 现在如果输出myObject和copyOfMyObject,则均会输出foo属性,因为它们引用的是同一个对象*/
console.log(myObject, copyOfMyObject); /* 输出 'Object { foo="bar"}   
                                       Object { foo="bar"}' */

</script></body></html>

我们必须认识到的是,与复制值的原始值不同,对象(也称为复杂值)是通过引用进行存储的。因此,复制的是引用(也称为地址),而不是实际的值。这意味着根本就没有复制对象。就像我说过的,复制的是内存堆栈中对象的地址或引用。在代码示例中,myObject和copyOfMyObject都指向存储于内存中的同一个对象。

这里的重点是,当更改复杂值时,所有引用相同地址的变量的值都会被修改,因为复杂值是通过引用进行存储的。在上述代码示例中,更新myObject和copyOfMyObject中任何一个变量中的值,两者都会被更改。

注意

  • 使用new关键字创建String()、Number()和Boolean()值时,或者这些值在幕后被转换成复杂对象时,值依然是按照值进行存储/复制的。因此,即使原始值可以被看做是复杂值,它们也不具备通过引用进行复制的特性。
  • 若要真正地复制一个对象,必须要从旧的对象中提取值,并将提取的值注入新对象。
相关文章
|
5月前
|
关系型数据库 MySQL 存储
|
4月前
|
存储 中间件 API
Nest.js 实战 (六):使用 Session 在不同请求间存储信息
这篇文章介绍了在Nest.js中如何使用Session来记录客户状态。文章首先解释了Session的概念,然后详细说明了如何在Nest.js中安装和使用express-session,包括全局配置、参数说明、使用方式和常用方法。
|
5月前
|
存储 前端开发 安全
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第2天】探索Web存储:localStorage持久化,sessionStorage会话限定,cookies则伴随HTTP请求。了解它们的特性和限制,如localStorage的5MB容量限制、跨域问题,sessionStorage的生命周期,及cookies的安全与带宽消耗。使用时需权衡安全、效率与应用场景。示例代码展示存储与检索方法。
339 2
|
6月前
|
存储 JavaScript 前端开发
JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)
【6月更文挑战第25天】JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)。
42 2
|
6月前
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
133 2
|
5月前
|
存储 JavaScript 前端开发
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第8天】Web开发中的客户端存储技术,如`localStorage`, `sessionStorage`和`cookies`,用于保存用户设置和跟踪活动。`localStorage`持久化存储,`sessionStorage`随页面会话消失。两者提供基本的增删查改操作,但有大小限制和安全风险。`cookies`适合会话管理,可设置过期时间并能跨域。使用时注意存储量、安全性和跨域策略,选择适合场景的存储方式。
227 0
|
7月前
|
存储 SQL JavaScript
js常见的存储API以及应用场景?使用方式,各个优缺点?
【4月更文挑战第4天】JavaScript存储API包括`localStorage`、`sessionStorage`、`cookies`、`IndexedDB`和弃用的`Web SQL`。`localStorage`和`sessionStorage`用于页面数据存储,前者持久化,后者限当前会话。`cookies`适用于会话管理,但存储空间有限。`IndexedDB`适合大量结构化数据存储和查询。废弃的`Web SQL`曾提供关系型数据库功能。选择时需考虑数据性质、存储需求、安全性和兼容性。
118 2
|
存储 JavaScript
JS数据类型有哪些?存储上有什么区别?
JS数据类型有哪些?存储上有什么区别?
|
7月前
|
存储 JavaScript 前端开发
在浏览器中存储数组和对象(js的问题)
在浏览器中存储数组和对象(js的问题)
71 0
|
7月前
|
存储 JavaScript 前端开发
数组:数组是JS中的一种特殊对象,用于存储一组有序的数据。需要掌握数组的创建、访问、修改以及各种内置方法。
数组:数组是JS中的一种特殊对象,用于存储一组有序的数据。需要掌握数组的创建、访问、修改以及各种内置方法。
76 2