js对象赋值

news2024/11/18 14:24:38

js对象赋值

  • 1. 含有相同的键进行赋值
  • 2. 复制对象(遍历赋值)
  • 3. 复制对象(直接`=`赋值)
  • 4. es6的Object.assign()方法拷贝对象 (深拷贝,但没完全深)
  • 5. JSON.parse(JSON.stringify(obj))
  • 7. 总结:对象赋值方法(深拷贝)

1. 含有相同的键进行赋值

let a = {name:"",age:""} // 需要被赋值的对象
let b = {name:"zlj",age:"18",sex:"男"} // 数据对象
// 将b与a相同的健进行赋值
Object.keys(a).forEach((key) => {
    a[key] = b[key]
})
b.name="jin"
console.log(a) // {name: 'zlj', age: '18'}
console.log(b) // {name: 'jin', age: '18', sex: '男'}

2. 复制对象(遍历赋值)

let a = {
    x : true,
    y : false
}
let b = {};
//遍历对象a,把它的所有成员赋值给对象b
for (var i in a) {
    b[i] = a[i];
}
b.x = false
console.log(a) // {x: true, y: false}
console.log(b) // {x: false, y: false}

3. 复制对象(直接=赋值)

JavaScript 中对象的赋值是默认引用赋值的(两个对象指向相同的内存地址),所以修改另一个对象时,即修改了内存地址里的对象,其他关联对象也会改变

let a = {'name': 'zlj'};
let b = a;
let c = [1, 2, 3];
let d = c;
d[1] = 888
b.name = 'jj';
console.log(a); // {name: 'jj'}
console.log(b); // {name: 'jj'}
console.log(c); // [1, 888, 3]
console.log(d); // [1, 888, 3]

4. es6的Object.assign()方法拷贝对象 (深拷贝,但没完全深)

let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign(obj1); // 浅拷贝
let obj3 = Object.assign({},obj1) // 只有一层深拷贝
obj1.a = 1
obj1.b.c = 1

console.log(JSON.stringify(obj2)); // {"a":1,"b":{"c":1}}
console.log(JSON.stringify(obj3)); // {"a":0,"b":{"c":1}}
obj2.a = 2;
console.log(JSON.stringify(obj1)); // {"a":2,"b":{"c":1}}
console.log(JSON.stringify(obj2)); // {"a":2,"b":{"c":1}}

obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // {"a":2,"b":{"c":3}}
console.log(JSON.stringify(obj2)); // {"a":2,"b":{"c":3}}
  • 当修改obj2.b.c的值时,原对象obj1.b.c也跟着发生了变化,Object.assign()只是让对象里第一层的数据没有了关联性,但是对象内的对象则跟被复制的对象有着关联性的。
  • Object.assign(obj) --浅拷贝
    Object.assign({},obj) --只有第一层深拷贝 (ES6中扩展运算符…也是如此

5. JSON.parse(JSON.stringify(obj))

使用场景限制:obj属性不能是function、RegExp等,JSON序列化时会造成属性丢失:

let obj1 = { a: 0, b: { c: 0 } }
let obj2 = JSON.parse(JSON.stringify(obj1))
obj1.a = 666
obj1.b.c = 888
console.log(obj1) // { a: 666, b: { c: 888 } }
console.log(obj2) // { a: 0, b: { c: 0 } }

7. 总结:对象赋值方法(深拷贝)

function deepClone(obj = {}, hashMap = new WeakMap()) {
  //变量先置空
  let objClone = null,
    hashKey = hashMap.get(obj);
  if (obj instanceof RegExp) return new RegExp(obj); //正则表达式的情况
  if (obj instanceof Date) return new Date(obj); //日期对象的情况
  if (hashKey) return hashKey;
  //判断是否需要继续进行递归
  if (typeof obj == "object" && obj !== null) {
    objClone = obj instanceof Array ? [] : {};
    hashMap.set(obj, objClone);
    //进行下一层递归克隆
    for (const i in obj) {
      if (obj.hasOwnProperty(i)) {
        objClone[i] = this.deepClone(obj[i], hashMap);
      }
    }
  } else {
    //如果不是对象直接赋值
    objClone = obj;
  }
  return objClone;
};
let obj = {
  name: "jj",
  birth: new Date(),
  desc: null,
  reg: /^123$/,
  ss: [1, 2, 3],
  rp: {
    f: 4
  },
  fn: function () {
    console.log("123");
  },
};
//使用方式
let obj2 = this.deepClone(obj);
obj.name = 'jin'
obj.birth = 323
obj.desc = undefined
obj.num = null
obj.reg = /^666$/,
obj.ss = [1, 888, 3],
obj.rp.f = 55555
obj.fn = function () {
    console.log("999");
  },
obj.fn(); // 999
obj2.fn(); // 123
console.log(obj, obj2, "深拷贝");

注意: vue中obj.hasOwnProperty(i)需要替换成Object.hasOwnProperty.call(obj, i)

否则会报错error : Do not access Object.prototype method ‘hasOwnProperty’ from target object no-prototype-builtins
在这里插入图片描述

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

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

相关文章

深度学习 - 39. EGES 与推荐系统用户冷启动

目录 一.引言 二.EGES 算法演进 1.淘宝推荐系统简介 2.BGE、GES、EGES 简介 2.1 用户行为序列构建 2.2 BGE / Base Graph Embedding 2.3 GES / Graph Embedding with Side Information 2.4 EGES / Enhanced Graph Embedding with Side Information 三.模型试验 1.离…

TryHackMe-Ra 2(Windows渗透测试)

Ra 2 WindCorp最近发生了安全漏洞。从那以后,他们加强了基础设施,从错误中吸取教训。但也许还不够?您已经设法进入了他们的本地网络… 端口扫描 循例 nmap 域名跟Ra前部基本一样, 多了个selfservice SMB枚举 smbmap enum4linux也没什么信…

CLIP:语言-图像表示之间的桥梁

最近GPT4的火爆覆盖了一个新闻:midjourney v5发布,DALLE2,midjourney都可以从文本中生成图像,这种模型要求人工智能同时理解语言和图像数据。 传统的基于人工智能的模型很难同时理解语言和图像。因为自然语言处理和计算机视觉一直…

每日一练——Day 13

前言: 小亭子正在努力的学习编程,接下来将开启编程题的练习~~ 分享的文章都是学习的笔记和感悟,如有不妥之处希望大佬们批评指正~~ 同时如果本文对你有帮助的话,烦请点赞关注支持一波, 感激不尽~~ 第一题 题目描述: 刷…

一篇文章搞懂Docker、DockerCompose

文章目录1、初识Docker1.1、项目部署的问题1.2、Docker如何解决依赖的兼容问题的?1.3.Docker解决操作系统环境差异1.4、Docker如何解决不同系统环境的问题?1.5、小总结2、Docker 和虚拟机的区别3、Docker架构3.1、镜像和容器3.2、DockerHub3.3、Docker架…

2023年最强手机远程控制横测:ToDesk、向日葵、Airdroid三款APP免Root版本

前言 随着远程办公和远程协作的日益普及,跨设备、系统互通的远程控制软件已经成为职场人士不可或缺的工具之一。在国内,向日葵和ToDesk是最著名的远程控制软件;而在国外,则有微软远程桌面、AirDroid、TeamViewer、AnyDesk、Parse…

【移动端】fiddler配置及使用

文章目录安装配置桌面端配置移动端配置Android 手机上的配置苹果手机上的配置使用视图功能区域栏图标说明相关问题来源Fiddler是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888。当Fiddler退出的时候它会自动注销,这样就不…

linux 消息队列 msgget/msgsnd/msgrecv

专栏内容:linux下并发编程个人主页:我的主页座右铭:天行健,君子以自强不息;地势坤,君子以厚德载物.目录 前言 概述 原理 消息队列的大小 查看资源 接口 代码演示 结尾 前言 本专栏主要…

Git记录

Git日常命令 版本管理 git tag 删除本地tag git tag --delete v4.2.1推送本地标签 git push origin v4.2.1创建本地标签 git tag v4.2.1 分支管理 远程仓库地址管理 远程地址添加 意外着我可以将一个项目添加多个远程的仓库地址,只不过需要注意的一点就是git …

mysql数据表操作

1、alter 修改表名 : alter table 旧表名 rename as 新表名添加字段 : alter table 表名 add字段名 列属性[属性]修改字段 : alter table 表名 modify 字段名 列类型[属性]alter table 表名 change 旧字段名 新字段名 列属性[属性]删除字段 : alter table 表名 drop 字段名2、…

多目标柔性生产作业车间——反世代距离(IGD)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录反世代距离IGD概念收敛性能以及分布性能举例计算反世代距离IGD概念 反世代距离是一个综合性能的评价指标,主要是应用至求解多目标问题中,评价…

Java企业级开发学习笔记(2.3)利用MyBatis实现关联查询

该文章主要为完成实训任务,详细实现过程及结果见【http://t.csdn.cn/ZVEZd】 文章目录一、创建数据库表1.1 创建教师表1.2 创建班级表1.3 创建学生表二、创建于数据库表对应的实体类2.1 创建教师实体类2.2 创建学生实体类2.3 创建班级实体类三、创建班级映射器配置文…

Leetcode394 字符串解码 递归和非递归

字符串解码 https://leetcode.cn/problems/decode-string/ 给定一个经过编码的字符串,返回它解码后的字符串。 编码规则为: k[encoded_string],表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k 保证为正整数。 你可以认为输入字符串总是有效…

你搞清楚了吗?| GET请求方式的长度限制到底是多少?

目录 📍 浏览器限制 📍 服务器限制 在大多数人的一贯认识中,一直认为get请求方式有2048B的长度限制,其实这种说法是有失偏颇的,甚至可以说是错误的。 这个问题一直以来似乎是被N多人误解,其实Http Get方…

2.3-3单链表的查找

按位查找: so easy (1)边界情况 i0 没有循环,直接返回头节点 (2)如果i8 当不合法,返回NULL. (3)普通情况i3;(平均时间复杂度为O(n)) 进行封装:避免重复,更加简洁更…

CRYSTALS-Dilithium

文章目录简介1和2版本区别2和3的区别1.介绍1.1基本方法概述密钥生成算法签名过程验证1.2Dilithium实现注意事项安全性。基础操作环操作模约简。元素的大小NTT域表示2.3 HashingsignatureGenζ ← {0,1}256\{{0, 1\}}^{256}{0,1}256(ρ, ρ, K) ∈ {0,1}256\{{0, 1\}}^{256}{0,1…

【springBoot篇2】springBoot日志篇

目录 一、日志有什么作用 作用1:快速定位问题的所在之处(最主要) 作用2:记录用户的登录日志 作用3:记录系统的操作日志 作用4:记录方法的执行时间 二、日志怎样使用 ①先得到日志对象(slf4j的Logger对象) ​​​编辑 ②根…

Python 无监督学习实用指南:1~5

原文:Hands-on unsupervised learning with Python 协议:CC BY-NC-SA 4.0 译者:飞龙 本文来自【ApacheCN 深度学习 译文集】,采用译后编辑(MTPE)流程来尽可能提升效率。 不要担心自己的形象,只关…

docker运行服务端性能监控系统Prometheus和数据分析系统Grafana

文章目录一、Prometheus的安装和运行1、使用docker拉取镜像2、创建prometheus.yml文件3、启动容器4、查看启动是否成功5、记录安装过程中出现的错误二、Grafana的安装和运行1、使用docker拉取镜像2、创建grafana3、运行grafana4、查看grafana运行日志5、登录grafana一、Prometh…

学会了selenium 模拟鼠标操作,你就可以偷懒点点点了

目录:导读 前言 01.ActionChains 类常用方法 02.ActionChains 类所有方法 03.ActionChains 使用步骤 04.实战 05.总结 前言 我们在做 Web 自动化的时候,有时候页面的元素不需要我们点击,值需要把鼠标移动上去就能展示各种信息。 这个…