首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript:复制对象键值而不更改引用的对象键

JavaScript中,复制对象键值而不更改引用的对象键可以通过浅拷贝和深拷贝来实现。

  1. 浅拷贝:浅拷贝是指创建一个新对象,新对象的属性值是原对象的引用。当修改新对象的属性值时,原对象的属性值也会被修改。可以使用Object.assign()方法或展开运算符(...)来进行浅拷贝。
  • Object.assign()方法:该方法将一个或多个源对象的属性复制到目标对象,并返回目标对象。示例代码如下:
代码语言:txt
复制
 ```javascript
代码语言:txt
复制
 const obj1 = { name: 'John', age: 30 };
代码语言:txt
复制
 const obj2 = Object.assign({}, obj1);
代码语言:txt
复制
 obj2.name = 'Jane';
代码语言:txt
复制
 console.log(obj1); // { name: 'John', age: 30 }
代码语言:txt
复制
 console.log(obj2); // { name: 'Jane', age: 30 }
代码语言:txt
复制
 ```
  • 展开运算符(...):展开运算符可以将一个对象的属性展开到另一个对象中。示例代码如下:
代码语言:txt
复制
 ```javascript
代码语言:txt
复制
 const obj1 = { name: 'John', age: 30 };
代码语言:txt
复制
 const obj2 = { ...obj1 };
代码语言:txt
复制
 obj2.name = 'Jane';
代码语言:txt
复制
 console.log(obj1); // { name: 'John', age: 30 }
代码语言:txt
复制
 console.log(obj2); // { name: 'Jane', age: 30 }
代码语言:txt
复制
 ```
  1. 深拷贝:深拷贝是指创建一个新对象,新对象的属性值是原对象属性值的副本,修改新对象的属性值不会影响原对象。可以使用JSON.parse()和JSON.stringify()方法来进行深拷贝。
  • JSON.parse()和JSON.stringify():将对象转换为JSON字符串,再将JSON字符串转换为新的对象。示例代码如下:
代码语言:txt
复制
 ```javascript
代码语言:txt
复制
 const obj1 = { name: 'John', age: 30 };
代码语言:txt
复制
 const obj2 = JSON.parse(JSON.stringify(obj1));
代码语言:txt
复制
 obj2.name = 'Jane';
代码语言:txt
复制
 console.log(obj1); // { name: 'John', age: 30 }
代码语言:txt
复制
 console.log(obj2); // { name: 'Jane', age: 30 }
代码语言:txt
复制
 ```

在实际开发中,根据需求选择浅拷贝或深拷贝来复制对象键值。如果对象的属性值是基本类型(如字符串、数字等),使用浅拷贝即可;如果对象的属性值是引用类型(如对象、数组等),则需要使用深拷贝来确保复制的对象键值不会更改原对象的引用。

以上是关于复制对象键值而不更改引用的对象键的解释和实现方法。如果需要了解更多JavaScript相关知识,可以参考腾讯云的JavaScript开发文档:JavaScript开发文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript对象引用

toobug圈圈图 创建对象{test:1},并将该对象在内存引用地址,传递给a变量,a变量值是对象{test:1}引用复制a值给变量b,也就是,b也获得了对象{test:1}引用。...对b.test重新赋值为2,由于b是{test:1}引用,实则是{test:1}这个对象test属性值变更为2。 嗯,这个坑,估计一个不小心就会踩到。...这个时候, FuncDemo = undefined;  FuncDemo被重新赋值,其值成了undefined,不再是刚才那个被实例化对象引用。...嗯,刚才被实例化对象,没有了外部引用之后,GC可以开始干活鸟。 再赋值一次,一个新对象又被实例化了。 结语: 感谢好导师TooBug,基础讲解生动活泼。...一个作用域内部函数,return并且被外部对象引用之后,函数本身居然给实例化了,其内部私有变量也给持久性保存了。除非引用断掉,否则GC都无法回收。

98100

JavaScriptMap与Set键值对象用法

JavaScript默认对象表示方式{}可以视为其他语言中Map或Dictionary数据结构,即一组键值对。 但是JavaScript对象有个小问题,就是必须是字符串。...但实际上Number或者其他数据类型作为也是非常合理。 为了解决这个问题,最新ES6规范引入了新数据类型Map。 Map Map是一组键值结构,具有极快查找速度。..., 75, 85]; 给定一个名字,要查找对应成绩,就先要在names中找到对应位置,再从scores取出对应成绩,Array越长,耗时越长。...用JavaScript写一个Map如下: var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); m.get('Michael')...注:内容摘自廖雪峰官方网站

1.6K40
  • javascript 数组以及对象深拷贝(复制数组或复制对象方法

    javascript 数组以及对象深拷贝(复制数组或复制对象方法 前言 在js中,数组和对象复制如果使用=号来进行复制,那只是浅拷贝。...如下图演示: 如上,arr修改,会影响arr2值,这显然在绝大多数情况下,并不是我们所需要结果。 因此,数组以及对象深拷贝就是javascript一个基本功了。...对象深拷贝相比数组也没有困难许多,列举两个方法。...万能for循环实现对象深拷贝 在很多时候,for循环能够解决大问题。...2017年10月31日补充,使用es6提供扩展运算符方法实现深拷贝,简单,高效。并且,对象深拷贝不会像使用 JSON 方法深拷贝一样,丢失函数等信息,只能用来深拷贝 JSON 数据格式对象

    3.1K10

    JavaScript对象 ⑤ ( 遍历对象 | for…in 循环 遍历对象 | Object.keys() 遍历对象 属性名称 | Object.entries() 遍历对象属性键值对 )

    () 遍历对象 属性名称 + 属性值 键值对组合 ; 二、遍历对象 1、使用 for…in 循环 遍历对象 for…in 循环 既可以用于遍历数组 , 又可以用于遍历对象可枚举属性 ; 代码示例... 属性值 在 JavaScript 中 , 调用 Object.values() 方法返回一个数组 , 数组元素是在给定对象上找到可枚举属性值 , 然后使用数组遍历方法来遍历这些值 ; 代码示例... 属性名称 + 属性值 键值对组合 在 JavaScript 中 , 调用 Object.entries() 方法 可以返回 给定对象 自身可枚举属性 键值对数组 ; 代码示例 :... 属性名称 + 属性值 键值对组合 const entries = Object.entries(person); entries.forEach(([key, value...]) => { console.log(`Key: ${key}, Value: ${value}`); }); 上述遍历出来键值对组合中 , 类型是 string

    69210

    前端 JavaScript 复制粘贴奥义——Clipboard 对象概述

    你来看看我键盘上 Ctrl、C 和 V ,那油光发亮包浆程度,盘个三五年是绝对达不到! [cv] 编程界江湖上曾经流传着一句话:CV da fa 好,CV da fa 妙!...今天,让我们一起来揭开前端 JavaScript 开发界 CV 面纱,一睹真容(套路)!...旧法 世界上最好语言—— JavaScript,必然是有着访问系统剪切板功能,主要依靠 Document.execCommand() 接口实现复制、粘贴、剪切等功能。...在 Web 应用程序中,Clipboard API 可用于实现剪切、复制和粘贴功能。 它所有操作都是异步,返回 Promise 对象,不会造成页面卡顿。...这带来一个问题是,如果把相关代码粘贴到开发者工具中直接运行,可能会报错,因为这时的当前页面是开发者工具窗口,不是网页页面。

    1.8K30

    如何高效检查JavaScript对象是否存在

    在日常开发中,作为一个JavaScript开发者,我们经常需要检查对象中某个是否存在。这看似简单,但其实有多种方法可供选择,每种方法都有其独特之处。...本文将介绍几种检查JavaScript对象方法,并比较它们性能。...然而,这种方法有几个缺点: 需要额外操作(typeof)不是直接比较 比较冗长且需要否定检查(!...); } 这种方法只会返回对象自身拥有的不会检查继承属性: 只检查自身,不包括继承 方法名清晰,容易理解 缺点是hasOwnProperty需要方法调用,在性能关键代码中可能会有影响。...只有在需要排除继承时才使用hasOwnProperty。 理解这些不同方法细微差别是检查JavaScript关键。根据具体需求选择合适工具,除非性能至关重要,否则应优先考虑可读性。

    11310

    一文带你解读​JavaScript引用类型和函数对象

    前言 相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python是,它是一门浏览器脚本语言,Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript...1.引用类型 相当于Java中类创建实例过程,比如我要创建个对象,可以这样做: var ob = new Object(); 其实它就是把JavaScript数据类型转换为Java中类来进行操作...2.函数对象 1).Arguments对象 这是个神奇对象,无需指明参数就可以访问它,它无处不在,用好了将极大提高你工作效率。...,实例化后对象是没有Prototype属性,只有对象本身才有这个属性。...引用类型、函数对象和闭包,下一篇文章继续给大家分享JavaScript知识,敬请期待!

    43510

    深入理解javascript继承机制(3)属性复制对象之间继承深复制原型继承原型继承与属性复制混合使用

    同时我们还要切记一点,我们实现是浅复制,也就是直接复制值,这样的话: ** 只有对于那些由原始数据类型构成属性,才会被重复,那些对象引用,只会复制引用,指向还是同一个对象 ** 下面我们使用上面实现...Paste_Image.png 由于属性都是直接复制,所以twoD会有自己name属性,但由于toString不是原始类型,存储引用,所以它们指向是同一个对象。...Paste_Image.png 我们可以看到这种直接复制对象,不通过原型和构造器,继承模式比较简单,直接复制,子对象有需要添加属性,直接更改或添加就可以了。...深复制 前面介绍复制方法都是浅复制,也就是只对于原始数据类型属性会复制出副本,而对于引用类型对象则只是复制引用。这样造成问题就是,当操作新对象时,可能会无意识覆盖改变旧对象。...· 深复制实现其实并不复杂,也是逐一复制属性,唯一不同就是,当遇到引用类型属性时,再次调用复制函数复制,他就会将引用对像属性也复制过来。

    1.5K20

    JS对象那些事儿

    JavaScript中,将对象视为包含元素项列表,并且列表中每个项(属性或方法)都由内存中键值对存储。 让我们看一个对象例子。 ?...什么是按引用/共享复制和按值复制,它如何应用于对象? 不同之处在于,通过值,我们意思是每次创建内容时都会执行新内存分配,而在引用情况下,我们指向已经创建内存空间。...在javascript上下文中,所有原始数据类型都是通过值方法分配内存,对于一个对象,可以进行值或引用传递,根据具体操作情况。 ? 什么是浅层和深层复制/克隆对象?...newObj.b 和 obj.b共享对象相同引用,没有制作单独副本,而是复制对象引用。 在Deep copy中,新对象将拥有自己一组键值对(与原始对象具有相同值)不是共享。...我们无法复制自定义对象函数,以及对应值是undefined 或 Symbol情况,如下: ? 此外,此方法不适用于循环对象。 注意:循环对象是具有引用自身属性对象。 ?

    2.4K10

    JavaScript Types (类型)

    引用就像一种特殊指针,是来指向变量指针(别名 )。如果参数声明为引用的话,参数值总是 通过值复制方式传递,即便对复杂对象值也是如此。...复合值(compound value)——对象(包括数组和封装对象)和函数,则总是 通过引用复制方式来赋值 / 传递。 由于引用指向是值本身而非变量,所以一个引用无法更改另一个引用指向。...[4, 5, 6, 7] 不能通过引用 x 来更改引用 a 指向,只能更改 a 和 x共同指向值。...如果要将 a 值变为 [4,5,6,7] ,必须更改 x 指向数组,不是为 x 赋值一个新数组。 我们无法自行决定使用值复制还是引用复制,一切由值类型来决定。...foo(a.sclice()); 如果要将标量基本类型值传递到函数内并进行更改,就需要将该值封装到一个复合值(对象、数组等)中,然后通过引用复制方式传递。

    40620

    前端系列11集-ES6 知识总结

    () 将多个 Promise 实例,包装成一个新 Promise 实例, 新 Promise 实例状态会根据最先更改状态 Promise 更改状态 Promise.allSettled...首先遍历所有数值,按数值升序排列其次遍历所有字符串,按加入时间升序排列最后遍历所有 Symbol ,按加入时间升序排列 super 关键字 指向当前对象原型对象,只能用在对象方法之中使用 扩展运算符...undefined 和 null 时会报错 注意点 浅拷贝 同名属性会被替换 处理数组时会把数组视为对象 只能进行值复制如果复制值是一个取值函数,会求值后再复制 用途 为对象添加属性...WeakSet.prototype.delete(value) WeakSet.prototype.has(value) WeakRef (ES2021) 创建对象引用 Map 类似于对象键值集合值可以是各种类型值...弱引用只是键名,键值是正常引用 WeakMap 没有遍历操作 实例方法 WeakMap.prototype.set(key, value) 设置键名 key 对应键值为 value 并返回

    17220

    Vue开发中常用ES6新特性

    看起来是有点像Object,下面我们可以看看他们比较: Map Object 意外 Map 默认情况包含任何,只包含显式插入。...迭代一个Object需要以某种方式获取它然后才能迭代。 性能 在频繁增删键值场景下表现更好 在频繁添加和删除键值场景下未作出优化 Set对象就像一个数组,但是仅包含唯一项。...让谈谈来学习一点更复杂知识,WeakMap和WeakSet。它们分别是Map和Set引用版本。 WeakMap其必须是Object,值可以是任意。...它和 Set 对象区别有两点: 与Set相比,WeakSet 只能是对象集合,不能是任何类型任意值。 WeakSet持弱引用:集合中对象引用为弱引用。...一旦不再引用WeakMap,便会对其进行垃圾回收(由Javascript运行时从内存中删除)。

    1.4K10

    前端技术工具类文章

    JavaScript entries() 方法 entries() 方法返回一个数组迭代对象,该对象包含数组键值对 (key/value)。...concat() 方法不会更改现有数组,而是返回一个新数组,其中包含已连接数组值。 JavaScript splice() 方法 splice() 方法用于添加或删除数组中元素。...("CLICK ME");\ btn.appendChild(t); 复制代码 new Map() JavaScript对象(Object),本质上是键值集合(Hash结构),但是传统上只能用字符串当作...这给它使用带来了很大限制。 为了解决这个问题,ES6提供了Map数据结构。它类似于对象,也是键值集合,但是“范围不限于字符串,各种类型值(包括对象)都可以当作。...这个回调函数就是我们实际进行状态更改地方,并且它会接受 state 作为第一个参数 Action 类似于 mutation,不同在于: Action 提交是 mutation,不是直接变更状态。

    1.2K30

    Map与WeakMap

    Map与WeakMap Map对象用来保存键值对,并且能够记住原始插入顺序,任何对象或者原始值都可以作为或者是值。...WeakMap对象同样用来保存键值对,对于是弱引用而且必须为一个对象值可以是任意对象或者原始值。...Map 描述 Map对象类似于一个普通键值Object对象,也是键值集合,但是他们之间有一些重要区别: 描述 Map Object 意外 Map默认情况包含任何,只包含显式插入。...一个Object 必须是一个String或是Symbol。 顺序 Map中key是有序,当迭代时候,一个Map对象以插入顺序返回键值。...,它引用对象都是弱引用,垃圾回收机制不将该引用考虑在内,因此,只要所引用对象其他引用都被清除,垃圾回收机制就会释放该对象所占用内存,此时WeakMap里边所对应键值都会消失,不需要手动删除引用

    56220

    【ES6基础】Map与WeakMap

    映射类型在计算机科学中定义属于关联数组,关联数组定义是若干键值对(Key/Value Pair)组成集合,其中每个Key值都只能出现一次。...映射对象中带有entries()方法,用于返回包含所有键值可迭代二元数组对象for-of和foreach便是先利用entries()方法先将映射对象转换成一个类数组对象,然年再进行迭代。...使用任意对象作为 √ 可以很方便得知键值数量 √ 从中我们可以看出Map对象可以使用任何对象作为,这就解决了我们实际应用中一个很大痛点,比如现在有一个DOM对象作为时,Object就不是那么好用了...WeakMap和WeakSet很相似,只不过WeakMap会检查变量引用,只要其中任意一个引用被释放,该键值对就会被删除。...以下三点是Map和WeakMap主要区别: Map对象可以是任何类型,但WeakMap对象只能是对象引用 WeakMap不能包含无引用对象,否则会被自动清除出集合(垃圾回收机制)。

    1.2K40

    JavaScript浅拷贝和深拷贝

    作为 JavaScript 开发者,了解浅拷贝和深拷贝区别是非常重要概念。首先,让我们讨论一下 JavaScript对象是如何工作。...对象是一种动态数据类型,可以包含键值集合,其中每个对应一个属性,每个值表示属性关联数据。对象可以包含各种数据类型,包括数字、字符串、布尔值、数组、其他对象,甚至是函数。...浅拷贝:浅拷贝是指拷贝对象与源对象共享相同引用。简单来说,这两个对象指向内存中相同地址。因此,当你更改对象或拷贝时,可能会导致另一个对象也发生变化。...= sourceObjcopyObj.name = "Joe"console.log(sourceObj) // {name: "Joe", surname: "Doe"}深拷贝:相反,深拷贝是指拷贝对象与源对象共享相同引用...因此,源对象所有属性都将存在于拷贝对象中,但新对象将指向内存中不同地址。这样,在修改时,两个对象是相互独立

    18310

    关于js中map内存和时间复杂度内存占用

    JavaScript 中 Map 对象空间复杂度通常指的是它在内存中占据空间大小。Map 对象是一个键值集合,每个键值对占据一定存储空间。...Map 空间复杂度 Map 对象空间复杂度取决于其包含键值对数量。具体来说,存储空间随着键值增加线性增长,因此空间复杂度为 O(n),其中 n 是 Map 中键值数量。...它在处理多样化类型时也非常灵活,可以轻松应对复杂数据结构需求。 使用对象作为 在普通 JavaScript 对象中,只能是字符串或 Symbol 类型。...然而,Map 对象可以接受任意类型值作为,包括对象引用。这使得在某些情况下,可以更方便地以对象本身作为不必依赖于字符串唯一性或 Symbol 特殊性。...WeakMap 与 Map 区别在于: 弱引用:WeakMap 中是弱引用,这意味着在没有其他引用存在时,对象会被自动垃圾回收。

    18210
    领券