JavaScript复制变量三种方法实例详解
这篇文章主要介绍了JavaScript复制变量三种方法实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
直接将一个变量赋给另一个变量时，系统并不会创造一个新的变量，而是将原变量的地址赋给了新变量名。举个栗子：
复制代码
复制代码
let obj = {
a: 1,
b: 2,
};
let copy = obj;
obj.a = 5;
console.log(copy.a);
// Result
// a = 5; // 更改obj的值，copy变量的值也会改变
复制代码
复制代码
文章中提到了很多种办法，本文只选择了三种普遍的用法并分析了各自的优缺点，以及什么情况下使用哪种是最好的。
1. 原生方法解决
最简单的办法就是一个一个循环复制给新的变量。举栗：
复制代码
复制代码
function copy(mainObj) {
let objCopy = {}; // objCopy will store a copy of the mainObj
let key;
for (key in mainObj) {
objCopy[key] = mainObj[key]; // copies each property to the objCopy object
}
return objCopy;
}
const mainObj = {
a: 2,
b: 5,
c: {
x: 7,
y: 4,
},
}
console.log(copy(mainObj));
复制代码
复制代码
缺点：
1. objCopy 的Object.prototype 方法与mainObj 会不一样，通常情况下我们需要完全一样的副本时，这个办法并不适用。
2. 麻烦而且费时费事，代码无法重用。
3. 如果原来的变量中包含Object类型，复制时还是会把这个子变量的索引交给新的变量，并不是创建了新的副本。
2. 深度复制
利用JSON转换来复制变量。先将原先的变量转换为String然后再重新组装成JSON，这样会产生一个不一样的副本。
复制代码
复制代码
let obj = {
a: 1,
b: {
c: 2,
},
}
let newObj = JSON.parse(JSON.stringify(obj));
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } } (New Object Intact!)
复制代码
复制代码
缺点：
1. 变量很多的时候非常耗时耗内存。
3. 使用Object.assign()
使用举例：
复制代码
复制代码
// circular object
let obj = {
a: 'a',
b: {
c: 'c',
d: 'd',
},
}
obj.c = obj.b;
obj.e = obj.a;
obj.b.c = obj.c;
obj.b.d = obj.b;
obj.b.e = obj.b.c;
let newObj2 = Object.assign({}, obj);
console.log(newObj2);
复制代码
复制代码
可以把它封装成一个方法：
复制代码
// 封装成方法
// 返回一个新的变量副本
// get a copy of an object
function getNewObjectOf(src) {
return Object.assign({}, src);
}
复制代码
缺点：
1. 这个也是浅复制（仅复制顶层的属性，底层属性并不复制）。深层属性会同样返回索引，与原变量分享一个地址。（看下面栗子）
复制代码
复制代码
let obj = {
a: 1,
b: {
c: 2,
},
}
let newObj = Object.assign({}, obj);
console.log(newObj); // { a: 1, b: { c: 2} }
obj.a = 10;
console.log(obj); // { a: 10, b: { c: 2} }
console.log(newObj); // { a: 1, b: { c: 2} }
newObj.a = 20;
console.log(obj); // { a: 10, b: { c: 2} }
console.log(newObj); // { a: 20, b: { c: 2} }
newObj.b.c = 30;
console.log(obj); // { a: 10, b: { c: 30} }
console.log(newObj); // { a: 20, b: { c: 30} }
// 注意: 所有变量 的 *。b.c 都等于30; 原因看上面解释。
复制代码
复制代码
结论：
原文中还有很多其他的办法，但此文仅摘抄出最有用的几个。一般不会用到第一种办法，如需要复制的变量有很多层的话，需要用第二种办法来复制，如果变量仅仅包含一层（如json格式的配置信息变量），第三种是最高效的。
再次给出封装好的方法：
// 封装成方法// 返回一个新的变量副本
// get a copy of an object
function getNewObjectOf(src) {
return Object.assign({}, src);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
1.正则表达式 js 中判断某个元素是否存在于某个 js 数组中,相当于 PHP 语言中的 in_array 函数. Array.prototype.in_array=function(e){ var r=new RegExp(','+e+','); return (r.test(','+this.join(this.S)+','));}; 用法如下: var arr=new Array(['b',2,'a',4]); arr.in_array('b');//判断'b'字符是否存在于 arr 数
-
vue 获取及修改store.js里的公共变量实例
html <input type='text' :value='num'> <button @click='add'> + </botton> js data(){ return{ } }, methods:{ add(){ this.$store.commit('add',1) } }, computed:{ num:function(){ // 因为要做修改 num 的值 所以放在 计算属性里 return this.$store.state.num } } sto
-
js变量声明var使用与不使用的区别详解
一.区分显示的声明与隐式声明(var) JS中变量声明分显式声明和隐式声明. var name = 'muzidigbig';//显示声明 name = 'muzidigbig';//隐式声明(为全局变量的一个属性) 在函数中使用var关键字进行显式声明的变量是做为局部变量,在全局范围内声明的变量为全局变量:而没有用var关键字,使用直接赋值方式声明的是全局变量(全局对象属性). // name = 'muzidigbig';//隐式声明(为全局变量的一个属性) console.log(name
-
Javascript中将变量转换为字符串的三种方法
前言 大家应该都知道,对于JavaScript,有3种不同方法可以将变量转换为字符串.这篇文章将详细介绍这些方法,并比较他们的优劣.下面话不多说了,来一起看看详细的介绍吧. 3种方法 将变量转换为字符串的3种方法如下: value.toString() "" + value String(value) 当value为null或者undefined时,第1种方法就不行了.而方法2和方法3基本上是一样的. ""+value: 将value与空字符串相加,即可将其转换为字
-
JavaScript中变量、指针和引用功能与操作示例
本文实例讲述了JavaScript中变量.指针和引用功能与操作.分享给大家供大家参考,具体如下: 1.变量 我们可能产生这样一个疑问:编程语言中的变量到底是什么意思呢? 事实上,当我们定义了一个变量a时,就是在存储器中指定了一组存储单元,并将这组存储单元命名为a.变量a的值实际上描述的是这组存储单元中存放的具体信息. 例如,在JS中 var a; a=10; 第一个语句在存储器中指定了一组存储单元,并命名为a: 第二个语句在这组存储单元中存储了数字10. 变量a的值为10实际上是说存储单元组a存
-
js变量值传到php过程详解 将php解析成数据
一.总结 一句话总结:传参数去后台,用ajax,或者原生js方式拼接url.明白原理,洞悉系统是先解析php,再执行html代码和js代码. 二.用ajax 1. 页面提交数据: ajax 2. php页面获取参数: $val = $_POST['val'] 参考代码(jquery): $.ajax({ type: 'POST', url: 'save.php', data: {val: text1obj.value} success: function(msg){ // msg: php返回内
-
Node.js中环境变量process.env的一些事详解
前言 最近这两天在和运维GG搞部署项目的事儿.碰到一个问题就是,咱们的dev,uat,product环境的问题. 因为是前后端分离,所以在开发和部署的过程中会有对后端接口的域名的切换问题.折腾了一下午,查询了各种资料这才把这Node环境变量process.env给弄明白. 下面这就做个问题解决的记录.希望能对这个不明白的人有所帮助.话不多说了,来一起看看详细的介绍吧. Node环境变量 首先,咱们在做react.vue的单页应用开发的时候,相信大家对配置文件里的process.env并不眼生.
-
详解js中let与var声明变量的区别
ES6 新增了let命令,用来声明局部变量,所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束. 1.ES6可以用let定义块级作用域变量 代码如下: function f1(){ { var a = 10; let b = 20; } console.log(a); // 10 console.log(b); // Uncaught ReferenceError: b is not defined } f1(); 说明:在ES6之前只有全局作用域和函数作用域,在ES6中新增
-
js判断数组是否包含某个字符串变量的实例
最近碰到一个这样的现象,后台返回的数据中,数组里面有一些有变量值,有一些没有变量值. 举个例子,比如后台返回的例子是这样的: var arr=[ { "status":"success", "activerUserData": [ {"activeUser":"张珊","activeUserMobile":"15542175311","countNum&qu
-
JavaScript复制变量三种方法实例详解
这篇文章主要介绍了JavaScript复制变量三种方法实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 直接将一个变量赋给另一个变量时,系统并不会创造一个新的变量,而是将原变量的地址赋给了新变量名.举个栗子: 复制代码 复制代码 let obj = { a: 1, b: 2, }; let copy = obj; obj.a = 5; console.log(copy.a); // Result // a = 5; // 更改obj的值,
-
php获取POST数据的三种方法实例详解
php获取POST数据的三种方法 方法一,$_POST $_POST或$_REQUEST存放的是PHP以key=>value的形式格式化以后的数据. 方法二,使用file_get_contents("php://input") 对于未指定 Content-Type 的POST数据,则可以使用file_get_contents("php://input");来获取原始数据. 事实上,用PHP接收POST的任何数据均使用本方法.而不用考虑Content-Type,
-
MybatisPlus调用原生SQL的三种方法实例详解
目录 前言 方法一 方法二 方法三 MyBatis-Plus执行原生SQL 前言 在有些情况下需要用到MybatisPlus查询原生SQL,MybatisPlus其实带有运行原生SQL的方法,我这里列举三种 方法一 这也是网上流传最广的方法,但是我个人认为这个方法并不优雅,且采用${}的方式代码审计可能会无法通过,会被作为代码漏洞 public interface BaseMapper<T> extends com.baomidou.mybatisplus.core.mapper.BaseMa
-
Android 打包三种方式实例详解
Android 打包三种方式实例详解 前言: 现在市场上很多app应用存在于各个不同的渠道,大大小小几百个,当我们想要在发布应用之后统计各个渠道的用户下载量,我们就要进行多渠道打包. 01.应用的打包签名什么是打包? 打包就是根据签名和其他标识生成安装包. 签名是什么? 1.在android应用文件(apk)中保存的一个特别字符串 2.用来标识不同的应用开发者:开发者A,开发者B 3.一个应用开发者开发的多款应用使用同一个签名 就好比是一个人写文章,签名就相当于作者的署名. 如果两个应用都是一
-
Android实现定时器的五种方法实例详解
一.Timer Timer是Android直接启动定时器的类,TimerTask是一个子线程,方便处理一些比较复杂耗时的功能逻辑,经常与handler结合使用. 跟handler自身实现的定时器相比,Timer可以做一些复杂的处理,例如,需要对有大量对象的list进行排序,在TimerTask中执行不会阻塞子线程,常常与handler结合使用,在处理完复杂耗时的操作后,通过handler来更新UI界面. timer.schedule(task, delay,period); task: Time
-
IOS自带Email的两种方法实例详解
IOS自带Email的两种方法实例详解 IOS系统框架提供的两种发送Email的方法:openURL 和 MFMailComposeViewController.借助这两个方法,我们可以轻松的在应用里加入如用户反馈这类需要发送邮件的功能. 1.openURL 使用openURL调用系统邮箱客户端是我们在IOS3.0以下实现发邮件功能的主要手段.我们可以通过设置url里的相关参数来指定邮件的内容,不过其缺点很明显,这样的过程会导致程序暂时退出.下面是使用openURL来发邮件的一个小例子: #pr
-
Android判断后台服务是否开启的两种方法实例详解
Android判断后台服务是否开启的两种方法实例详解 最近项目用到后台上传,就开启了一个服务service. 但是刚开始用这种方法,有些机型不支持:酷派不支持.然后又换了第二种判断方法. // public boolean isServiceWork(Context mContext, String serviceName) { // boolean isWork = false; // ActivityManager myAM = (ActivityManager) mContext // .
-
springboot单元测试两种方法实例详解
这篇文章主要介绍了springboot单元测试两种方法实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 springboot的单元测试,这里介绍两种方式,一种是在测试类中添加注解:另一种是在代码中启动项目的main方法中继承接口(也可以写在其他方法中). 如 对查看数据库的连接池信息 进行单元测试 1. 在类上使用注解: @RunWith(SpringRunner.class) @SpringBootTest @RunWith(Sprin
-
Python tkinter三种布局实例详解
这篇文章主要介绍了Python tkinter三种布局实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.pack布局举例 # pack布局案例 import tkinter baseFrame = tkinter.Tk() # 以下代码都是创建一个组件, 然后布局 btn1 = tkinter.Button(baseFrame, text = "A") btn1.pack(side = tkinter.LEFT, expan
-
android studio按钮监听的5种方法实例详解
1.匿名内部类 public class MainActivity extends AppCompatActivity implements View.OnClickListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button btn1 = fin