【JavaScript】面试手撕浅拷贝

简介: 引入浅拷贝和深拷贝应该是面试时非常常见的问题了,为了能将这两者说清楚,于是打算用两篇文章分别解释下深浅拷贝。PS: 我第一次听到拷贝这个词,有种莫名的熟悉感,感觉跟某个英文很相似,后来发现确实Copy的音译,感觉这翻译还是蛮有意思的

引入

浅拷贝和深拷贝应该是面试时非常常见的问题了,为了能将这两者说清楚,于是打算用两篇文章分别解释下深浅拷贝。

PS: 我第一次听到拷贝这个词,有种莫名的熟悉感,感觉跟某个英文很相似,后来发现确实Copy的音译,感觉这翻译还是蛮有意思的。🐶

什么是浅拷贝

行文至此,肯定会有朋友问,什么事浅拷贝呢?顾名思义,就是浅浅的copy一下。🐶

JavaScript中,对于浅拷贝分为两种情况。

  • 对于浅拷贝,如果待拷贝的数据是基础类型的属性(如NumberStringBoolean等基本类型),那么只需要将这个值直接复制过来即可
  • 对于浅拷贝,如果待拷贝的数据是引用类型的属性(如对象,数组),那么复制的则是对象的引用以及第一层的基础属性值

基础类型与引用类型的区别

谈到这,顺带谈一下基础类型与引用类型的区别。

基础类型

  • 直接存储在栈内存中。
  • 存储的是实际的数据值。
  • 内存空间固定且较小。

引用类型

  • 对象(如数组,函数,对象等)的属性值存在堆内存中。
  • 栈内存中存储的是指向堆内存中对象的引用或指针,而非对象本身的内容。
  • 内存空间大小不固定,取决于对象结构的复杂性。

手动实现浅拷贝

因为值的拷贝可以直接赋值即可。我们这里实现下对象的浅拷贝。

对象的浅拷贝:复制对象的引用以及第一层属性值。

思路: 我们先构造一个新对象,然后将它的属性值等于原对象的属性值。这里新对象和原对象的属性依然会共享引用,但对于第一层的基础属性却不会共享了。所以我们实现的浅拷贝是拷贝一层。

function shallowClone(obj) {
  const newObj = {};
  for (let prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      newObj[prop] = obj[prop];
    }
  }
  return newObj;
}
const test = { a: 1, b: 2 };
const newTest = shallowClone(test);
newTest.a = 2;
console.log('test: ',test,' newTest: ', newTest);
/**
 * 输入如下,第一层基础属性的值不会共享了
 * test:  { a: 1, b: 2 }  newTest:  { a: 2, b: 2 }
 */

Js自带浅拷贝的方法

对于Js的浅拷贝,可以分为对象浅拷贝数组浅拷贝

对象浅拷贝

对于对象的浅拷贝有object.assgin拓展运算符实现,这里的浅拷贝都是拷贝一层。

Object.assign

Object.assign()ES6 中引入的一个方法,用于将一个或多个源对象的所有可枚举属性分配到目标对象上。

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);

拓展运算符

注意:这种方式同样会创建一个新的对象,但对嵌套对象或数组只会进行浅拷贝。

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

数组浅拷贝

slice

slice()方法是用来从数组中提取一部分元素生成新数组的方法,它确实实现了数组的浅拷贝。

let originalArray = [1, 2, { a: 3 }, [4, 5]];
let copiedArray = originalArray.slice();
// 浅拷贝后,原始数组和拷贝数组中基本类型元素是独立的
copiedArray[0] = 100; // 修改基本类型元素,不影响原数组
console.log(originalArray); // 输出:[1, 2, { a: 3 }, [4, 5]]
console.log(copiedArray); // 输出:[100, 2, { a: 3 }, [4, 5]]
// 但是对于引用类型元素,修改其属性或内容会同时影响原数组和拷贝数组
copiedArray[2].a = 456;
copiedArray[3][0] = 7;
console.log(originalArray); // 输出:[1, 2, { a: 456 }, [7, 5]]
console.log(copiedArray); // 输出:[100, 2, { a: 456 }, [7, 5]]


目录
相关文章
|
3天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
3天前
|
前端开发 JavaScript
JavaScript:this-关键字,2024中级前端开发面试解答
JavaScript:this-关键字,2024中级前端开发面试解答
|
3天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
3天前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
3天前
|
JSON 前端开发 JavaScript
【JavaScript】面试手撕深拷贝(2),2024年最新nacos面试题及答案
【JavaScript】面试手撕深拷贝(2),2024年最新nacos面试题及答案
【JavaScript】面试手撕深拷贝(2),2024年最新nacos面试题及答案
|
3天前
|
JSON JavaScript 前端开发
【JavaScript】面试手撕深拷贝(1),面试前必看的一本书书籍是什么
【JavaScript】面试手撕深拷贝(1),面试前必看的一本书书籍是什么
|
3天前
|
缓存 前端开发 JavaScript
Javascript模块化开发基础,最新美团点评前端团队面试题
Javascript模块化开发基础,最新美团点评前端团队面试题
|
4天前
|
JavaScript 前端开发 程序员
javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍
javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍
|
5天前
|
自然语言处理 JavaScript 前端开发
三个JavaScript面试题
【5月更文挑战第7天】- 闭包是JavaScript函数能记住词法作用域,即使在外部执行。示例:计数器函数`createCounter()`返回访问`count`的匿名函数,每次调用计数递增。 - 事件循环处理异步操作,通过检查任务队列执行回调。示例:`setTimeout`异步任务在3秒后添加到队列,待执行,输出顺序为同步任务1、2,然后异步任务1。 - 箭头函数是ES6简洁的函数定义方式,如`greet = name => `Hello, ${name}!`。它没有自己的`this`,不适用作构造函数。
31 6
|
5天前
|
存储 JavaScript 前端开发
每日一道javascript面试题(九)函数的参数可以和函数体中的变量重名吗
每日一道javascript面试题(九)函数的参数可以和函数体中的变量重名吗