JavaScript进阶教程——原始类型与引用类型、对象拷贝(克隆)

news2024/11/24 3:08:53

文章目录

  • 原始类型与引用类型
    • 基本概念
    • 两种类型的区别
      • 赋值
      • 比较
      • 函数传参
  • 对象拷贝
    • 对象克隆的使用场景:
    • 对象拷贝的分类:
      • 浅拷贝
      • 深拷贝

解决JavaScript中比较烧脑的问题

  1. 原始类型与引用类型
  2. 闭包
  3. 原型对象
  4. this关键字
  5. bind、apply、call
  6. 异步编程
    等等

原始类型与引用类型

开发中是否遇到以下问题:

  1. 修改了一个变量,发现另一个变量也随之变化(浅拷贝、深拷贝?对象?引用类型?)
  2. 对比两个变量,明明是相同的,但比较的结果就是flase(=====?)

基本概念

原始类型(值类型、基本类型): 数值、字符串、布尔、null、undefined、(bigint、symbol)
引用类型:对象Object(Array Date Math)

两种类型的区别

原始类型与引用类型三种情况下的对比:

  1. 赋值
  2. 比较
  3. 函数传参

赋值

在这里插入图片描述

发生以上不一样的情况是因为:原始类型与引用类型的存储方式不同

在这里插入图片描述

总结:原始类型赋【值】;引用类型赋【引用】,(引用就是复制的是一个内存地址,原始的就是赋值一个内存空间)

比较

在这里插入图片描述
在这里插入图片描述
比较:原始类型比较的是值是否相等;引用类型比较的是【引用】是否指向同一对象

函数传参

在这里插入图片描述

原始类型作为参数,函数内的操作不影响实参的值;引用类型作为参数,函数内的操作会影响实参的值

对象拷贝

对象拷贝有什么意义:
在开发项目的时候,我们如何得到两个相同的对象:
例如:

stu1 = {name: "xiaoming"};
stu2 = stu1

通过赋值仅仅是赋值了一个引用,这两个变量仍然指向同一个对象,
使用对象克隆技术,才能得到真正的,两个相同的对象

对象克隆的使用场景:

  1. 将对象作为函数参数的时候,不希望操作原对象
  2. 面试常见问题

在这里插入图片描述

对象拷贝的分类:

  1. 浅拷贝
  2. 深拷贝

浅拷贝针对原始类型,深拷贝针对引用类型

浅拷贝

在这里插入图片描述

let stu = {
  name: "zhangsan",
  age: 16
}


function copyObject(obj) {
  let newObj = {}
  // 拷贝的算法
  for(let i in obj) {
    newObj[i] = obj[i]
  }
  
  return newObj
}

let newStu = copyObject(stu)
stu.age = 100
console.log(stu)
console.log(newStu)

在这里插入图片描述

深拷贝

在这里插入图片描述

let stu = {
  name: "zhangsan",
  age: 16,
  bestFriend: {
    name: "xiaoming",
    age: 16
  }
}


// 传进来一个对象 得到对象副本
// 深拷贝
function copyObject(obj) { 
  let newObj = {}
  // 拷贝的算法
  for(let i in obj) {
    // newObj[i] = obj[i]
    if(obj[i] instanceof Object) {
      // 递归
      newObj[i] = copyObject(obj[i])
    }else {
      newObj[i] = obj[i]
    }
  }
  
  return newObj
}

let newStu = copyObject(stu)
stu.age = 100
stu.bestFriend.name ="laowang"
console.log(stu)
console.log(newStu)

两种方式实现对象拷贝:

  1. 递归
  2. 转JSON

在这里插入图片描述

let stu = {
  name: "zhangsan",
  age: 16,
  bestFriend: {
    name: "xiaoming",
    age: 16
  }
}

// 深拷贝
function copyObject(obj) { 
   
  let newStr = JSON.stringify(obj)
  let newObj = JSON.parse(newStr)
  return newObj
}

let newStu = copyObject(stu)
stu.age = 100
stu.bestFriend.name ="laowang"
console.log(stu)
console.log(newStu)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/73912.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VMware Workstation 17.0 Pro SLIC Unlocker for Windows

VMware_Dell_2.6_BIOS-EFI64_Mod;macOS Unlocker,支持 macOS Ventura 请访问原文链接:VMware Workstation 17.0 Pro SLIC & Unlocker for Windows & Linux,查看最新版。原创作品,转载请保留出处。 作者主页&…

Win11安装Linux子系统提示错误代码0x800701bc怎么办?

Win11安装Linux子系统提示错误代码0x800701bc怎么办?最近有用户想要在自己的电脑上安装一个Linux子系统来使用,但是在安装的过程中却出现了一些问题,提示错误代码0x800701bc。那么这个情况要怎么去处理,一起来看看解决的操作步骤吧…

GitHub 被超火的 ChatGPT 霸榜!

本期推荐开源项目目录:1. ChatGPT2. 基于 Node.js 的 ChatGPT3. Mac 版的 ChatGPT4. Chrome 插件的 ChatGPT最近 ChatGPT 火爆全球,估计各位的朋友圈都被这东西刷屏了吧。Chat GPT 是 OpenAI 推出的基于 GPT-3 技术的聊天机器人。它能自动理解用户发的消…

小度机器人3D数字勋章盲盒发售!抽盲盒,赢奖金!参与合成得稀有!

人气王小度机器人3D数字勋章盲盒来了!玩法升级,福利更多!参与活动,抽超限量稀有款,赢京东卡福利,更能合成珍藏款勋章!【活动介绍】小度机器人是百度公司推出的智能交互机器人,依托百…

C++语法——详解智能指针的概念、实现原理、缺陷

目录 一.智能指针的概念 (一).智能指针的历史 (二).智能指针的使用 插曲.auto_ptr ①unique_ptr ②shared_ptr ③weak_ptr 二.智能指针的实现 三.智能指针的缺陷 (一).循环引用 (二&…

ChatGPT被玩坏了

大家好,欢迎来到 Crossin的编程教室 ! 体验了一下最近火出圈的 ChatGPT,聊聊使用感受。 ChatGPT让我下岗?原理就不展开说了,因为我也不懂,写出来估计大家也都看不懂,就简单复制一段网上的介绍&…

Unity 如何实现卡片循环滚动效果

文章目录简介定义卡片的摆放规则调整卡片的层级关系调整卡片的尺寸大小动态调整位置、层级和大小移动动画按钮事件简介 功能需求如图所示,点击下一个按钮,所有卡片向右滚动,其中最后一张需要变更为最前面的一张,点击上一个按钮&a…

案例:用户信息列表展示

1. 需求:用户信息的增删改查操作2. 设计:1. 技术选型:ServletJSPMySQLJDBCTempleatDuirdBeanUtilStomcat2. 数据库设计:create database day17; -- 创建数据库use day17; -- 使用数据库create table user( -- 创建表id in…

Java5分钟制作海报

一、需求背景我们经常在多终端应用开发中会遇到这样的需求:用户在浏览商品时觉得不错,希望分享给朋友。此时终端(安卓、苹果、H5等)生成一张精美的商品海报,通过微信或者其他途径分享给他人。也可能会遇到需求&#xf…

排课算法小记

输出: 在配置文件(config.txt)中配置:老师,课程,专业班级,课时的信息,运行test.py自动生成对应班级课程表 eg: 专业1,四门课,每门课每周2课时,共8门课 专业2,四门课,每…

springcloud(服务消费及熔断)

目录 1. 服务消费方式 1.1 RestTemplate1.2 feign2. 服务熔断(降级) 2.1 在微服务架构中服务熔断的必要性2.2 hystrix2.3 hystrix的使用 1. 服务消费方式 1.1 RestTemplate 传统情况下在java代码里访问restful服务,一般使用Apache的HttpClie…

[附源码]JAVA毕业设计田径运动会管理系统(系统+LW)

[附源码]JAVA毕业设计田径运动会管理系统(系统LW) 项目运行 环境项配置: Jdk1.8 Tomcat8.5 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技…

Vue项目实战 可视化 创建(vue2+Element ui)

Vue项目实战创建项目通过脚手架 创建项目 配置 vue 路由配置 element—ui 组件库配置 axios 库创建远程仓库初始化 git 远程仓库 将本地项目托管到 码云前端项目初始化步骤① 安装vue脚手架② 通过脚手架 创建项目③ 配置 vue 路由④ 配置 element—ui 组件库⑤ 配置 axios 库⑥…

基于小波变换的去噪,带GUI界面,可以设置小波变换层数

目录 1.算法描述 2.仿真效果预览 3.MATLAB核心程序 4.完整MATLAB 1.算法描述 近年来,小波理论得到了非常迅速的发展,而且由于其具备良好的时频特性,因而实际应用也非常广泛。在去噪领域中,小波理论也同样受到了许多学者的重视…

关于我的Oracle Primavera P6/Unifier/Gateway离线帮助中心

目录 ​编辑 一、前序 二、路子 三、用途 四、最后 一、前序 经常到处飞,很多时候会又比较依赖于网页查看产品的帮助,而网页又比较依赖于网络 怎么办呢 有人提到通过官方提供的PDF,毕竟上面的内容和网页展现几乎完全一样,…

【ChatGPT】与ChatGPT聊天,了解世界杯的前世今生

文章目录🏆 前言💬 什么是ChatGPT⚽ 与ChatGPT的快问快答🧩 总结🏆 前言 最近火爆全网的chatGPT,吸引一大批技术爱好者的疯狂围观。大家使用过后,纷纷发出惊叹,深陷其中,无法自拔。 …

数字信号处理用脉冲响应不变法和双线性变换法设计巴特沃斯滤波器MATLAB实现——实例

文章目录符号含义例题脉冲响应不变法双线性变换法画图完整代码符号含义 例题 脉冲响应不变法 clear close all clcfs1000;%采样频率 fc200;%通带截止频率 fr300;%阻带截止频率 T0.001; %采样周期%%%%%%%脉冲响应不变法 wp12*pi*fc;%通带截止频率 wr12*pi*fr;%阻带截止频率[N1,…

数据分享|用加性多元线性回归、随机森林、弹性网络模型预测鲍鱼年龄和可视化...

原文链接:http://tecdat.cn/?p24127鲍鱼是一种贝类,在世界许多地方都被视为美味佳肴(点击文末“阅读原文”获取完整代码数据)。介绍相关视频养殖者通常会切开贝壳并通过显微镜计算环数来估计鲍鱼的年龄。因此,判断鲍鱼…

【QT开发笔记-基础篇】| 第五章 绘图QPainter | 5.3 初始化数据

本节对应的视频讲解:B_站_视_频 https://www.bilibili.com/video/BV1qd4y1s7xk 布局完成后,就可以修改控件的名称,以及添加初始化数据 1. 变量命名 先修改各控件显示的的名称,做到 “见名知义”,方便写代码 修改完…

C语言开发《推箱子游戏》,亲自手把手教会大家

【C语言经典算法100道实战题】适合具备C语言基础语法的同学学习,提高编写程序的逻辑思维能力和算法设计能力专门精心设计。100个经典的算法供大家练习及配套对应的录播视频。为我们今后学习其它的编程语言和软件开发打下坚实的基础,让你在编码道路上如鱼…