JavaScript中引用vs复制示例详析


Posted in Javascript onDecember 06, 2018

前言

好像一般很少人讲到js中的引用和复制,不过弄清楚这个概念可以帮助理解很多东西

先讲一下很基础的东西,看看js中几种数据类型分别传的什么

引用:对象、数组、函数

复制:数字、布尔

字符串单独说明,因为它的特殊性,无法确定是传递引用还是复制数值(因为字符串的值是没法改变的,所以纠结这个问题也是没意义的)但是用于比较的时候显然是属于传值比较

下面来一起看看详细的介绍吧

首先我们看下面这个例子:

let age = 18;
let age2 = age;
console.log(age, age2);

我们会得到以下的值:

18 18

这个相信大家都能很好理解。

那么如果我们改变 age 的值呢?输出会有什么变化?

age = 20;
console.log(age, age2);

我们会得到:

20 18

看到这里大家就奇怪了,上面的结果都很正常啊。

但在 JavaScript 中是有例外的,对于普通数据类型如 integer,string,boolean 可以通过 = 来复制这个变量,但对于 array 和 object 数据类型,= 只能起到引用的效果。

大家可以看下面这个例子:

let arr = ['wes', 'bob', 'faker'];
let arr2 = arr;
console.log(arr2, arr);
arr[2] = 'dean';
console.log(arr2, arr);

得到的结果是:

["wes", "bob", "faker"] ["wes", "bob", "faker"]
["wes", "bob", "dean"] ["wes", "bob", "dean"]

我们会发现随着 arr 的改变,arr2 也会跟着改变。

说明 arr2 并没有复制 arr 的值,只是引用了它,它们都指向同一个内存中的值。

object 也是一样的:

let obj = {
 age: 19,
 name: 'like',
 last: 'jam'
};
let obj2 = obj;
console.log(obj, obj2);
obj.age = 50;
console.log(obj, obj2);

得到的结果是:

{age: 19, name: "like", last: "jam"} {age: 19, name: "like", last: "jam"}
{age: 50, name: "like", last: "jam"} {age: 50, name: "like", last: "jam"}

那么如何复制 array 和 object 呢?

复制 array 的方法:

方法1:

let arr2 = [].concat(arr);

方法2:

let arr2 = arr.slice();

方法3:

let arr2 = Array.from(arr);

方法4:

let arr2 = [...arr];

一般我们比较常用的是方法3和方法4,方法1和方法2比较取巧,但都是可以达到复制 array 的目的的。

ps: [...arr] 是 ES6 中的方法。

复制 object 的方法:

方法1:

let obj2 = Object.assign({}, obj);

方法2:

let obj2 = {...obj};

方法1和方法2都有个缺点,它们只会复制对象的第一层。

看下面这个例子:

let obj = {
 number: 12,
 name: {
  first: 'bob',
  last: 'evil'
 }
};
let obj2 = Object.assign({}, obj);
obj.number = 50;
console.log(obj, obj2);

我们会得到下面的结果:

obj = {
    number: 50,
    name: {
        first: 'bob',
        last: 'evil'
    }
}

obj2 = {
    number: 12,
    name: {
        first: 'bob',
        last: 'evil'
    }
}

但如果我们改变第二层的值:

obj.name.first = 'sam';
console.log(obj, obj2);

obj = {
    number: 50,
    name: {
        first: 'sam',
        last: 'evil'
    }
}

obj2 = {
    number: 12,
    name: {
        first: 'sam',
        last: 'evil'
    }
}

我们发现对象第二层依旧是引用的,并没有实现复制。

那么怎么复制一个完整的 object 呢?

最简单的方法就是使用第三方函数库 lodash ,它提供了 clone 和 deepclone 完全可以满足日常的需求。

object 的复制因为要考虑到很多因素,我会另开一篇,专门整理。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery 开天辟地入门篇一
Dec 09 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
深入探寻javascript定时器
Jan 02 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
JS判断数组那点事
Oct 10 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 #jQuery
express+vue+mongodb+session 实现注册登录功能
Dec 06 #Javascript
如何使用puppet替换文件中的string
Dec 06 #Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 #Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 #Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 #Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 #Javascript
You might like
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
python安装Scrapy图文教程
2017/08/14 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
男女朋友协议书
2014/04/23 职场文书
2015年中个人总结范文
2015/03/10 职场文书
未婚证明范本
2015/06/15 职场文书
公司酒会主持词
2015/07/02 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书