前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

JavaScript深浅拷贝

首页
2018-12-21 18:08:43
Front-End
JavaScript深浅拷贝

# 一、前言

在js中,变量的类型可以大致分成两种:基本数据类型和引用数据类型,其中基本数据类型指的是简单的数据段,包括:

  • undefined
  • Null
  • Boolean
  • Number
  • String(字符串在一些其他语言中是被当做对象使用的,属于引用类型,但在js里是基本类型)

而引用类型的值指的是可能包含多个值的对象。本质上,是因为基本数据类型保存在栈内存,而引用类型保存在堆内存中。为什么要分两种保存方式呢? 根本原因在于保存在栈内存的必须是大小固定的数据,引用类型的大小不固定,只能保存在堆内存中,但是我们可以把它的地址写在占内存中以供我们访问

var a = 1;//定义了一个number类型
var obj1 = {//定义了一个objr类型
    name:'obj'
};
@前端进阶之旅: 代码已经复制到剪贴板

在执行这段代码后,内存空间里是这样的

因为这种保存方式的存在,所以我们在操作变量的时候,如果是基本数据类型,则按值访问,操作的就是变量保存的值;如果是引用类型的值,我们只是通过保存在变量中的引用类型的地址类操作实际对象。从而也引出了所谓的深浅复制问题

# 二、浅拷贝

方法一

// 假设有两个对象

var objA = {
  a: 'aa',
  b: 'bb'
};
var objB = {};
@前端进阶之旅: 代码已经复制到剪贴板
// 现在想把对象A的值复制给B,由于对象A的两个值都是原始类型,用浅复制即可

function copy(sub, sup) {
  for (var key in sup) {
    sub[key] = sup[key];
  }
}
copy(objB, objA);
@前端进阶之旅: 代码已经复制到剪贴板

方法二

Object.assign() (兼容性不好)
@前端进阶之旅: 代码已经复制到剪贴板

方法三

_.clone()
fe
  • 一、前言
  • 二、浅拷贝
  • 三、深拷贝

← JavaScript防抖节流原理ES6系列之Async/await →