js对象赋值

article/2025/10/12 23:32:29

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 = 1console.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://chatgpt.dhexx.cn/article/PdoygOch.shtml

相关文章

js赋值运算的过程

13.js赋值运算的过程 示例 这道题的结果是什么? var a {n:1}; var b a; a.x a {n:2};console.log(a.x); console.log(b.x);正确答案是 undefined {n:2}这道题考察的是js赋值运算的过程 我们以a1这个赋值运算为例,当我们执行a1这段代码时,js引擎的处理过程是这样的 找…

js中的直接赋值和引用赋值

在JS中,数据分为两大类:基本数据类型 和 引用数据类型;基本数据类型包括: string、number、Boolean、null、undefined、symbol、biglnt七大类,引用数据类型包括: Array、Object、Function。这两种数据类型的数据传递也有两种方式:…

Js对象的赋值

let obj{a:1}let obj2objobj2.a100console.log(obj.a)//100//对象的结构赋值 ...let obj{a:1}let obj2{...obj} obj2.a100console.log(obj.a)//1数据存放 1.基本类型的变量是存放在栈区的(栈区指内存里的栈内存) 2.引用类型的值是同时保存在栈内存和堆内…

JS解构赋值

一、前言 解构赋值语法是一种 Javascript 表达式。通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。本文将讨论解构赋值的作用与其用法。 目录 一、前言 二、用途 三、数组的解构 1.变量声明并且赋值时的解构 2.默认值 3.剩余数组赋值…

阿里云账号未开启手机号验证码登录解决方法

阿里云账号登录支持手机号验证码登录方式,但是如果是2022.4.1前注册的账号,需要先在账号中心开启手机号登录,才可以使用手机号登录。阿里云百科来详细说下阿里云账号开启手机号登录的方法: 阿里云账号手机号登录 阿里云账号支持…

如何使用阿里云短信服务实现登录页面,手机验证码登录?

1:个人如何使用阿里云短信服务? 2022如何使用个人阿里云短信服务?_linxiMY的博客-CSDN博客添加完成之后,等待审核!一般2个小时就会出来审核结果了,这里我因为注册申请时填写规则有误,足足审核了…

手机验证码登录,账号登录结合

本项目基于腾讯外包框架&#xff08;wei框架&#xff09; 地址&#xff1a;https://github.com/twinh/wei/tree/master/docs/zh-CN#wei HTML页面&#xff1a; 【基于bootstrap前端框架】 头部&#xff1a;<ul id"js-reset-tabs" class"nav tab-underline…

【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面,路由式开发(附完整代码)

目录 效果图&#xff1a; 一、template部分 二、style样式 三、script部分 1.先对手机号的格式进行一个判断 2.接下来就是表单验证规则rules 3.最后就是methods了 &#xff08;1&#xff09;首先我们给获取验证码绑定一个方法 &#xff08;2&#xff09;然后封装一个a…

浅谈手机验证码登录

注册和登录&#xff0c;是互联网产品的最基本功能&#xff0c;这里涉及到很多安全问题和用户便捷问题。今天&#xff0c;我们来简要聊一下手机验证码登录。 在之前的文章中&#xff0c;我们聊了注册登录原理及密码安全问题&#xff0c;这种方式是基于账号密码登录的。 然而&…

2022.9.13 手机验证码登录功能

总结一下今天在项目中完成的功能 手机验证码登录功能 用到的前端技术&#xff1a;vue、vuex、axios&#xff0c;element-ui组件库 功能实现总体思路&#xff1a; 一. 用户在登录界面输入手机号&#xff0c;通过表单验证后&#xff0c;点击按钮获取验证码 二. 用户输入手机验证…

【从零开始分析项目实战】12-阿里云手机验证码登录功能的实现

注&#xff1a;本文章基于黑马程序员相关视频及资料进行编写&#xff0c;代码简单&#xff0c;较容易理解&#xff0c;若有问题或者源码资料获取可以在评论区留言或者联系作者&#xff01; 文章目录 开篇一、短信发送&#xff08;1&#xff09;短信服务介绍&#xff08;2&#…

手机验证码登录

手机验证码登录 符号说明&#xff1a; []&#xff1a;表示可选或某些条件下流程。 需求说明&#xff1a; 用户可在登录页面使用手机验证码登录&#xff0c;若该手机号未绑定则输入验证码后还需输入用户账号密码进行绑定&#xff0c;绑定后则成功使用验证码登录。 用户可在…

登录模块(手机验证码)

本人为实习生,第一次写博客,写的不好的大家多多谅解 应公司近期需求,需要单独开发一个后台管理系统。 自己按实际业务写了一个登录接口已经实现,时序图如下 源码牵扯业务量太大,这里只放出部分关键实现源码,整合思路可以配合时序图去理解。 Controller层 package com…

java十大排序算法

十大排序算法在面试java过程中想必或多或少都会有。尤其是在笔试题上&#xff0c;有些大厂就让你现场写个十大排序。是不是一下子整懵了。。。 目录 一、首先先介绍下十大排序算法&#xff1a; 1、算法分类 2 、算法复杂度 3、 相关概念 二、详细分析各个算法 1、冒泡排…

Go语言十大排序算法

文章目录 Go语言十大排序算法0x01 冒泡排序0x02 选择排序0x03 插入排序0x04 希尔排序0x05 归并排序0x06 快速排序0x07 堆排序0x08 计数排序0x09 桶排序0x10 基数排序总结按时间复杂度分类&#xff1a;按稳定性分类按排序方式 Go语言十大排序算法 稳定&#xff1a;如果a原本在b前…

排序算法——十大排序算法总结与对比

一、十大排序算法复杂度对比 二、关于排序算法的总结 1、基数排序仅仅适用于整型数的排序&#xff0c;一般不与另外的排序方法一起比较。 2、关于算法的稳定性&#xff1a;不稳定的算法有 “快希选堆”——快速排序&#xff0c;希尔排序&#xff0c;选择排序和堆排序。 3、关…

十大排序算法(面试必备)

目录 简单排序 1、冒泡排序 2、选择排序 3、插入排序 高级排序 4、希尔排序&#xff08;缩小增量排序&#xff09; 5、归并排序 6、快速排序 7、计数排序 8、堆排序 9、桶排序 10、基数排序 总结&#xff1a; 1、十大排序算法对比 2、基数排序、计数排序、桶排序…

十大排序算法学习

Sort 排序类算法是非常常见的算法&#xff0c;包括了比较类排序与非比较类排序 排序能够解决很多问题&#xff0c;有的编程语言也提供了一些排序算法函数&#xff08;比如C的sort&#xff09;但是掌握基本的排序算法原理以及写法仍然是很重要的&#xff0c;并且排序也是面试常…

十大排序算法(Java)

目录 1.冒泡排序 2.快速排序 3.插入排序 4.希尔排序 5.选择排序 6.堆排序 7.归并排序 8.计数排序&#xff1a;速度快&#xff0c;一般用于整数排序 9.桶排序 10.基数排序 1.冒泡排序 冒泡排序思路&#xff1a;&#xff08;两层for循环&#xff09; 比较相邻的元素。…

十大排序算法(C++)

十大排序算法Sorting algorithm(C) 百度百科&#xff1a; 所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。排序算法&#xff0c;就是如何使得记录按照要求排列的方法。排序算法在很多领域得到相当地…