浅拷贝方法整理

最新推荐文章于 2024-06-20 16:13:54 发布
最新推荐文章于 2024-06-20 16:13:54 发布
阅读量714 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： 浅拷贝 JS中浅拷贝
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hohocj/article/details/103181241
版权 
​浅拷贝，就是基本类型进行传值操作，而引用类型则是传地址操作。基本类型进行浅拷贝之后互不影响，大路朝天，各走一边。引用类型进行浅拷贝之后则是牵一发而动全身，一改则全都改动

浅拷贝用的还算是比较多吧，所以整理一下浅拷贝的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
第一  =运算符  复制该对象的引用，而不是对于对象内部的复制（这个貌似不算是）
第二  利用for...in  遍历自身和继承的可枚举属性，除Symbol外===》特别注意会涉及到继承的属性
第三  利用for...of配合Object.entries  只复制可枚举的，不包含symbol和不可枚举以及继承的属性
第四  利用for...of配合Object.keys  只复制可枚举的，不包含symbol和不可枚举以及继承的属性
第五  利用for...of配合Object.getOwnPropertyNames  复制可枚举和不可枚举属性，但不包含symbol和继承的属性
第六  利用for...of配合Reflect.ownKeys  复制全部属性，包含不可枚举和symbol，但不包含继承的属性
第七  Object.assign()  复制可枚举属性和symbol，不包含继承的属性和不可枚举的属性
第八  解构赋值（...运算符） 复制可枚举属性和symbol，不包含继承的属性和不可枚举的属性
第九  Object.getOwnPropertyDescriptors方法配合Object.defineProperties
      复制可枚举和不可枚举属性以及symbol，但不包含继承的属性
第十  Object.create方法配合Object.getOwnPropertyDescriptors
      复制可枚举和不可枚举属性以及symbol，但不包含继承的属性
*/
​
​
//下面是测试
​
// //第一种  =运算符
// let peo={
//   qwer:"cc"
// }
// let obj={
//   __proto__:peo,
//   a:1,
//   stu:{
//     b:1
//   }
// }
// Object.defineProperty(obj,"three",{
//    enumerable:false,
//    value:"3",
//    writable:true,
//    configurable:true
// })
​
// //浅拷贝
// let no2=obj;
// console.log(no2);
// /*
// {a: 1, stu: {…}, three: "3"}
// a: 2
// stu: {b: 2}
// three: "3"
// __proto__: Object
// */
​
// //改动
// obj.a=2;
// obj.stu.b=2;
​
// //测试
// console.log(no2.a+"==="+obj.a);//2===2
// console.log(no2.stu.b+"==="+obj.stu.b);//2===2
​
//================================================================
​
//第二种  遍历方式
​
// let peo={
//    qwer:"cc"
// }
// let obj={
//    __proto__:peo,
//    first:"1",
//    stu:{
//      two:"2"
//    }
// }
// Object.defineProperty(obj,"three",{
//    enumerable:false,
//    value:"3",
//    writable:true,
//    configurable:true
// })
// let new_obj={};
​
//利用for...in
//(遍历自身和继承的可枚举属性，除Symbol外)===》特别注意会涉及到继承的属性
​
// for(let key in obj){
//   new_obj[key]=obj[key];
// }
// console.log(new_obj);
// /*
// {first: "1", stu: {…}, qwer: "cc"}
// first: "1"
// qwer: "cc"
// stu: {two: "2"}
// __proto__: Object
// */
​
// //改动
// obj.first="a";
// obj.stu.two="b";
// obj.qwer="c";
// new_obj.qwer="d";
​
// //测试
// console.log(new_obj.first+"==="+obj.first);//1===a
// console.log(new_obj.stu.two+"==="+obj.stu.two);//b===b
// console.log(new_obj.qwer+"==="+peo.qwer+"==="+obj.qwer);//d===cc===c
​
//============================================================================
​
//利用for...of配合Object.entries
//Object.entries() 方法会返回由自身可枚举属性(不包含继承的)的键值对数组
// for (let [key,value] of Object.entries(obj)) {
//   new_obj[key]=value;
// }
// console.log(new_obj);
/*
{first: "1", stu: {…}}
first: "1"
stu: {two: "2"}
__proto__: Object
*/
​
// //改动
// obj.first="a";
// obj.stu.two="b";
​
// //测试
// console.log(new_obj.first+"==="+obj.first);//1===a
// console.log(new_obj.stu.two+"==="+obj.stu.two);//b===b
​
//================================================================
​
//利用for...of配合Object.keys
//Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组
// for (let key of Object.keys(obj)) {
//   new_obj[key]=obj[key];
// }
// console.log(new_obj);
// /*
// {first: "1", stu: {…}}
// first: "1"
// stu: {two: "b"}
// __proto__: Object
// */
// //改动
// obj.first="a";
// obj.stu.two="b";
​
// //测试
// console.log(new_obj.first+"==="+obj.first);//1===a
// console.log(new_obj.stu.two+"==="+obj.stu.two);//b===b
​
//================================================================
​
//利用for...of配合Object.getOwnPropertyNames
//Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名
//（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组
// for (let key of Object.getOwnPropertyNames(obj)) {
//   new_obj[key]=obj[key];
// }
//  console.log(new_obj);
// /*
// {first: "1", stu: {…}, three: "3"}
// first: "1"
// stu: {two: "2"}
// three: "3"
// __proto__: Object
// */
// //改动
// obj.first="a";
// obj.stu.two="b";
// obj.three="c";
​
// //测试
// console.log(new_obj.three+"==="+obj.three);//3===c
// console.log(new_obj.first+"==="+obj.first);//1===a
// console.log(new_obj.stu.two+"==="+obj.stu.two);//b===b
​
//================================================================
​
//利用for...of配合Reflect.ownKeys
//静态方法 Reflect.ownKeys() 返回一个由目标对象自身的属性键组成的数组
//包含可枚举和不可枚举的属性，甚至包含Symbol属性，但是不包含继承的属性
// for (let key of Reflect.ownKeys(obj)) {
//   new_obj[key]=obj[key]
// }
// console.log(new_obj);
// /*
// {first: "1", stu: {…}, three: "3"}
// first: "1"
// stu: {two: "2"}
// three: "3"
// __proto__: Object
// */
 
// //改动
// obj.first="a";
// obj.stu.two="b";
// obj.three="c";
​
// //测试
// console.log(new_obj.three+"==="+obj.three);//3===c
// console.log(new_obj.first+"==="+obj.first);//1===a
// console.log(new_obj.stu.two+"==="+obj.stu.two);//b===b
​
//================================================================
​
//第三种 Object.assign()
//Object.assign(target, ...sources) 
//用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
//如果目标源与源对象有同名属性，或多个源对象有同名属性，则后面的会覆盖前面的
//只复制源对象自身的可枚举属性和symbol，不包含继承的属性和不可枚举的属性
​
// let peo={
//    qwer:"cc"
//  }
// let sym=Symbol("sym");
// let obj={
//   __proto__:peo,
//   first:1,
//   stu:{
//     two:2
//   }
// }
// obj[sym]="sym";
​
// Object.defineProperty(obj,"three",{
//    enumerable:false,
//    value:"3",
//    writable:true,
//    configurable:true
//  })
​
// // 浅拷贝
// let new_obj=Object.assign({},obj);
// console.log(new_obj);
// /*
// {first: 1, stu: {…}, Symbol(sym): "sym"}
// first: 1
// stu: {two: "b"}
// Symbol(sym): "sym"
// __proto__: Object
// */
  
// //改动
// obj.first="a";
// obj.stu.two="b";
​
// //测试
// console.log(new_obj.first+"==="+obj.first);//1 === a
// console.log(new_obj.stu.two+"==="+obj.stu.two);//b === b
​
//《ES标准入门》中说这个assin有一个小缺陷==》无法复制属性的赋值方法和取值方法(setter和getter方法)
//但是，我试了下，可以复制
// let obj={
//   get first(){
//     return this._first_;
//   },
//   set first(value){
//     this._first_=value;
//   }
// }
// obj.first="1";
// let new_obj=Object.assign({},obj);
// console.log(new_obj);//{first: "1", _first_: "1"}
// console.log(Object.getOwnPropertyDescriptor(new_obj,"first"));
// //{value: "1", writable: true, enumerable: true, configurable: true}
​
//=======================================================================
​
// //第四种 解构赋值（...运算符）
// //只能复制自身的可枚举的属性和symbol，不包含自身继承的和不可枚举的属性
​
// let peo={
//    qwer:"cc"
//  }
// let sym=Symbol("sym");
// let obj={
//   __proto__:peo,
//   first:1,
//   stu:{
//     two:2
//   }
// }
// obj[sym]="sym";
​
// Object.defineProperty(obj,"three",{
//    enumerable:false,
//    value:"3",
//    writable:true,
//    configurable:true
//  })
// //浅拷贝
// let { ...new_obj } = obj;
// console.log(new_obj);
// /*
// {first: 1, stu: {…}, Symbol(sym): "sym"}
// first: 1
// stu: {two: "b"}
// Symbol(sym): "sym"
// __proto__: Object
// */
 
// //改动
// obj.first="a";
// obj.stu.two="b";
   
// //测试
// console.log(new_obj.first+"==="+obj.first);//1 === a
// console.log(new_obj.stu.two+"==="+obj.stu.two);//b === b
 
//================================================================
 
 //第五种 
 //Object.getOwnPropertyDescriptors方法配合Object.defineProperties
 //Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符
 //Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象
 //只能复制自身的属性(包括不可枚举的属性以及symbol)，但不可复制继承的属性
//  let peo={
 //   qwer:"cc"
//  }
//  let sym=Symbol("sym");
//  let obj={
 //   __proto__:peo,
 //   first:"1",
 //   stu:{
  //    two:"2"
 //   }
//  }
//  obj[sym]="sym";
//  Object.defineProperty(obj,"three",{
 //   enumerable:false,
 //   value:"3",
 //   writable:true,
 //   configurable:true
//  })
//  // console.log(obj.qwer);//cc
 
//  //浅复制
//  let new_obj=Object.defineProperties({},Object.getOwnPropertyDescriptors(obj));
//  console.log(new_obj);
//  /*
//  {first: "1", stu: {…}, three: "3", Symbol(sym): "sym"}
//  first: "1"
//  stu: {two: "b"}
//  Symbol(sym): "sym"
//  three: "3"
//  __proto__: Object
//  */
​
// //改动
// obj.first="a";
// obj.stu.two="b";
// obj.three="c"
​
// //测试
// console.log(new_obj.three+"==="+obj.three);//3===c
// console.log(new_obj.first+"==="+obj.first);//1===a
// console.log(new_obj.stu.two+"==="+obj.stu.two);//b===b
​
//==========================================================================
​
//第六种 
//Object.create方法配合Object.getOwnPropertyDescriptors
//Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符
//Object.create(proto[, propertiesObject])
/*propertiesObject
可选。如果没有指定为 undefined，则是要添加到新创建对象的可枚举属性（即其自身定义的属性，
而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应
Object.defineProperties()的第二个参数*/
//只能复制自身的属性(包括不可枚举的属性以及symbol)，但不可复制继承的属性
// let peo={
//   qwer:"cc"
// }
// let sym=Symbol("sym");
// let obj={
//   __proto__:peo,
//   first:"1",
//   stu:{
//    two:"2"
//   }
// }
// obj[sym]="sym";
// Object.defineProperty(obj,"three",{
//   enumerable:false,
//   value:"3",
//   writable:true,
//   configurable:true
// })
​
// //浅复制
// let new_obj=Object.create({},Object.getOwnPropertyDescriptors(obj));
// console.log(new_obj);
//  /*
//  {first: "1", stu: {…}, three: "3", Symbol(sym): "sym"}
//  first: "1"
//  stu: {two: "b"}
//  Symbol(sym): "sym"
//  three: "3"
//  __proto__: Object
//  */
​
// //改动
// obj.first="a";
// obj.stu.two="b";
// obj.three="c"
​
// //测试
// console.log(new_obj.three+"==="+obj.three);//3===c
// console.log(new_obj.first+"==="+obj.first);//1===a
// console.log(new_obj.stu.two+"==="+obj.stu.two);//b===b
</script>
</body>
</html>
​

有问题欢迎交流，可以随时补充

觉得不错，可以点个赞，谢谢啦

 

hohocj
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS浅拷贝和深拷贝的小整理
野草园
03-01 892
这个话题应该是说大也大，说不大也不大。我就简单给自己总结整理一下。记得16届春招网易校招的最后一个笔试题，实现一个深拷贝。 说这个话题之前，先扯一下JS的基本数据类型。 大家都知道JS中的数据类型分为 基本类型：string, number, boolean, null, undefined 引用类型：Object，特殊的有Array, Function, Date
IOS 中runtime使用方法整理
08-30
需要注意的是，`object_copy()`函数用于浅复制，如果对象包含引用其他对象，这些引用不会被复制，而是共享同一内存地址。 2. **给类添加方法**： `class_addMethod()`函数可以动态地给类添加新的方法。在例子中，...
深拷贝和浅拷贝工具整理
qq_22795957的博客
06-30 823
前几天写代码的时候，需要拷贝对象，就使用了的拷贝对象，后面又修改了新对象的属性，就导致原对象也被修改了，仔细一研究才发现这个工具只是进行了浅拷贝。索性整理一下现在比较常用的一些深拷贝和浅拷贝工具。......
什么是浅拷贝和深拷贝，如何用 js 代码实现？
dsgdauigfs的博客
06-18 713
简介只复制原始对象的第一层属性值。如果属性值是值类型，将直接复制值，本值和副本变更互不影响；如果是引用数据类型，则复制内存地址，因此原始对象和新对象的属性指向相同的内存地址，改变任一值，另一变量值也会同步变更。递归地复制原始对象的所有层级。每一个属性值都会在新的对象中重新创建，无论变量是值类型还是引用类型，修改新对象不会影响原对象。实现方法。
深拷贝、浅拷贝
lydms的博客
05-12 5401
深拷贝、浅拷贝
深拷贝与浅拷贝的区别，及实现方法
weixin_43822182的博客
10-14 663
转载：https://www.cnblogs.com/echolun/p/7889848.html , https://www.zhihu.com/question/23031215 如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。 此篇文章中也会简单阐述到栈堆，基本数据类型与引...
javascript中的深拷贝和浅拷贝<整理>
yanhappiness
02-01 416
在javascript中对数据的clone分为赋值、深拷贝和浅拷贝。 在经过克隆之后，我们希望clone的对象操作之后与数据源互不干扰。 在分析深拷贝和浅拷贝之前还有一个概念要清楚，就是不同数据类型的clone方式和效果是不同的。 javascript中数据类型 类型 内容 基本数据类型 string、number、boolean、null、undefine
浅拷贝与深拷贝
最新发布
2401_84419493的博客
06-20 875
基本数据类型。
javaScript实现浅拷贝和深拷贝的方法有哪些？看这一篇就够了(详细）
weixin_42801026的博客
01-04 3040
` `@TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示
浅拷贝和深拷贝的整理
keyboard专栏
07-20 460
import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.ObjectInputStream; import java.io.ObjectOutputStream; /** * 浅拷贝： * 创建一个新对象，然后将当前对象的非静态字段复制到该新对象，如果字段是值类型的，那么对该字段执行复制。 * 如果该字段是引用类型的话，则复制引用但不复制引用的对象，因此，原始对象及其副本引用.
Java深拷贝和浅拷贝
2401_85191043的博客
05-22 873
作为一名即将求职的程序员，面对一个可能跟近些年非常不同的 2019 年，你的就业机会和风口会出现在哪里？在这种新环境下，工作应该选择大厂还是小公司？已有几年工作经验的老兵，又应该如何保持和提升自身竞争力，转被动为主动？就目前大环境来看，跳槽成功的难度比往年高很多。一个明显的感受：今年的面试，无论一面还是二面，都很考验Java程序员的技术功底。最近我整理了一份复习用的面试题及面试高频的考点题及技术点梳理成一份“Java经典面试问题（含答案解析）.pdf和一份网上搜集的“Java程序员面试笔试真题库.pdf。
Python_列表深浅拷贝_详解配图_面试经常出现
01-20
 三、浅拷贝  四、深拷贝 编写整理不容易，看官点个赞，收藏，关注必回QAQ 一、准备知识 返回文章顶部 在 Python 中的数据类型包括 ：int、float、str、dict、lsit、set、tuple、bool等等，将其简单分类 ...
js代码-js方法整理
07-14
- `slice()`：返回数组的一部分浅拷贝。 - `splice()`：添加或删除数组中的元素。 - `concat()`：合并两个或多个数组。 - `indexOf()`和`lastIndexOf()`：查找指定元素的位置。 2. **字符串方法**： - `length...
前端面试题整理
08-21
- **浅拷贝**：仅复制指向对象的指针而非对象本身，这意味着新旧对象共享同一块内存区域。因此，对于引用类型的属性（如数组或对象），浅拷贝无法完全复制出一个新的实例，而是共享原有的实例。例如，在JavaScript中...
Java中的clone方法详解_动力节点Java学院整理
08-30
浅拷贝只是复制对象的引用，而不是真正的克隆对象的内容，而深拷贝则是真正的克隆对象的内容。 浅拷贝的示例代码如下： ```java Person p = new Person(23, "zhang"); Person p1 = p; System.out.println(p); ...
强制类型转换
hohocj的博客
10-29 4120
详细各种类型转换，看完这篇，能解决大多数需求
JS实现百度搜索下拉框
hohocj的博客
10-28 2067
效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度搜索</title> <style type=...
JS中canvas实现一个简单画板
hohocj的博客
10-27 1744
效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ...
iOS面试精华：浅拷贝与深拷贝、类别与继承、扩展详解
iOS面试题锦集是一份整理的面试指南，主要关注于iOS开发中的核心概念和技巧，适合求职者或开发者准备面试时参考。以下是其中的部分知识点： 1. **浅复制与深复制的区别**： 在Objective-C中，浅复制（shallow copy...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值