JavaScript对象引用与赋值实例详解


Posted in Javascript onMarch 15, 2017

本文实例讲述了JavaScript对象引用与赋值。分享给大家供大家参考,具体如下:

<script type="text/javascript">
//例子一: 引用
var myArrayRef = new Array(0,1,2); //创建数组对象
var mySeconArrayRef = myArrayRef; // 对象复制.
myArrayRef[0] = 100; // 修改元素值
alert(mySeconArrayRef[0]);
/**
* 输出 100; 学过其它语言的都应该知道这里应该输出的是0 为什么输出的是100呢?
* 上面程序通过把myArrayRef对象复制给了mySeconArrayRef这时就存在了2个独立的 但最初值是相同的对象
* 因为是独立的为什么修改myArrayRef会对别一个对象有影响呢?大家都知道只有当他们引用的是同一个对象时这时修改一个才会
* 对别一个产生影响.但是在javascript语言中创建的对象myArrayRef值中其时保存的是对象的引用(也就是一个地址).
* 也就是 我用 new Array生成的保存在内存中而new Array把它所在的地方告诉了myArrayRef,myArrayRef又把这地址告诉了mySeconArrayRef
* 他们两个都指向的是new Array生成对象的地址而不是把对象保存在myArrayRef中,所以通过其中的一个去修改值时其时是修改他们同指象的那对象.
*/
alert(mySeconArrayRef[0] );
//例子二: 赋值
var myVa = 'ABC'; //把ABC的值 赋予了myVa
var myVb = myVa; // myVa 赋值给 myVb
myVa = 'DEF'; //修改myVa
/**
* 输出的是:ABC. 因为是把值保存在了变量了 而不是保存的是引用地址,所以他们两个是相对独立的整体.
*/
alert(myVb);
</script>

如果真要复制对象互不影响,则要通过转换赋值或者遍历key:value来复制你中的方法和属性。

注意:对象的子对象也是引用,所以遍历赋值的时候要判断,子元素是否是对象,如果子元素是对象,则继续对子元素进行遍历赋值。

转换赋值方式:

var data = {a:1,b:2,c:3,d:[0,1,2,3]};
var str = JSON.stringify(data);
var data1 = $.parseJSON(str); //$为jQuery对象需要引入jQuery包
data1["e"] = 4;
data1["d"][0] = 11;
console.log(data);
console.log(data1);

输出结果:

{a: 1, b: 2, c: 3, d: [0,1,2,3]}
{a: 1, b: 2, c: 3, d: [11,1,2,3], e: 4}

相互没有影响

当对象引用做为函数参数传递时候,依然会相互影响,切记,如下示例:

var data = {a:1,b:2,c:3,d:{q:4,w:5,e:6}};
var data1 = data;
function con(data2){
data2["r"] = 5;
console.log(JSON.stringify(data2));
}
con(data1);
console.log(JSON.stringify(data));

输出结果:

{"a":1,"b":2,"c":3,"d":{"q":4,"w":5,"e":6},"r":5}
{"a":1,"b":2,"c":3,"d":{"q":4,"w":5,"e":6},"r":5}

对象引用赋值后,如果将对象置空,相互间是不受影响的,如下:

var arr = {"a":"1","b":"2"};
var arr1 = arr;
arr = {};
arr["a"] = 2;
console.log(arr1);
console.log(arr);

输出结果:

{"a":"1","b":"2"},{"a":2}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript中的new使用
Mar 20 Javascript
JS重要知识点小结
Nov 06 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 #Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 #Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 #Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 #Javascript
jQuery动态产生select option下拉列表
Mar 15 #Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 #Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 #Javascript
You might like
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
浅谈MySQL中的触发器
2015/05/05 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
pandas计数 value_counts()的使用
2019/06/24 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
python实现双人五子棋(终端版)
2020/12/30 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
2014年客户经理工作总结
2014/11/20 职场文书
助学感谢信范文
2015/01/21 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android