JavaScript数据操作--原始值和引用值的操作本质
我的一句话总结:原始值不管是变量赋值还是函数传递都不会改变原值,引用值不管是变量赋值还是函数传递,如果新变量重新赋值,则不会影响原引用值,如新变量是直接操作,就会影响原引用值。
首先明确,值和类型是两个不同的概念。例如,null是null类型的唯一值、undefined是undefined类型的唯一值、而true和false是boolean类型仅有的两个值等。在任何语言中,值的操作都可以归纳为以下3个方面。
复制值:即把值赋值给新变量,或者通过变量把值赋值给另一个变量、属性或数组元素。
传递值:即把值作为参数传递给函数或方法。
比较值:即把值与另一个值进行比较,看是否相等。
由于值类型数据和引用型数据的值存在形式不同,自然操作它们的方法和所产生的结果也是不同的。注意,当值为值类型数据时,我们常称之为原始值或基本值;当值为引用型数据时,我们常称之为引用值或复合值。
1.使用原始值
对于原始值来说,其操作的3个层面说明如下。
1)复制值
在赋值语句中,操作的过程将会产生一个实际值的副本,副本的值和实际值之间没有任何联系,它们独自位于不同的栈区或者堆区。这个副本可以存储变量、对象的属性和数组的元素。例如:
var n = 123, a, b = [], c = {};
a = n; // 复制数字123
b[0] = n; // 复制数字123
c.x = n; // 复制数字123
(a == b[0]) && (a == c.x) && (b[0] == c.x) && alert("复制的值都是相等的"); // 检测它们的值都是相等的
在上面示例中,分别把值123复制3份给变量a、数组b和对象c,虽然它们的值是相等的,但是它们之间是相互独立的。
2)传递值
当把值传递给函数或方法时,传递的值仅是副本,而不是值本身。例如,如果在函数中修改传递进来的值时,结果只能够影响这个参数值的副本,并不会影响到原来的值。
var a = 123; // 原来的值
function f(x){
x = x + x;
}
f(a); // 调用函数修改传递的值
alert(a); // 查看变量a的值是否受影响,返回值为123,说明没有变化
3)比较值
在上面的示例中我们也可以看到,当对原始值进行比较时,进行逐字节的比较来判断它们是否相等。比较的是值本身,而不是值所处的位置,固然比较的结果可能会相等,但只是说明它们所包含的字节信息是相同的。
2.使用引用值
对于引用值来说,其操作的3个层面说明如下。
1)复制值
在赋值语句中,所赋的值是对原值的引用,而不是原值副本,更不是原值本身。也就是说,进行赋值之后,变量保存的都是对原值的引用(即原值的存储地址)。当在多个变量、数组元素或对象属性中间复制时,它们都会与原始变量保存的引用相同。
所有引用具有相同的效力和功能,都可以执行操作,如果通过其中的一个引用编辑数据,这种修改将会在原值及其他相关引用中体现出来。例如:
var a = [1,2,3]; // 赋值数组引用
b = a; // 复制值
b[0] = 4; // 修改变量b中第一个元素的值
alert(a[0]); // 返回4,显示变量a中第一个元素的值也被修改为4
但是,如果给变量b重新赋予新值,则新值不会影响原值内容。例如:
var a = [1,2,3]; // 赋值数组引用
b = a; // 复制值
b = 4; // 为变量b重写赋值
alert(a[0]); // 变量a的内容保持不变
重复赋值实际上是覆盖变量对原值的引用,变为另一个值的副本或对其引用。所以不会对原值产生影响,演示示意图如图4-2所示。

2)传递值
当使用引用将数据传递给函数时,传递给函数的也是对原值的一个引用,函数可以使用这个引用来修改原值本身,任何修改在函数外部都是可见的。例如:
var a = [1,2,3];
function f(x){
x[0] = 4; // 在函数中修改参数值
}
f(a); // 传递引用值
alert(a[0]); // 返回4,原值发生变化
请注意,在函数内修改的是对外部对象或数组的引用,而不是对象或数组本身的值。在函数内可以使用引用来修改对象的属性或数组的元素,但是如果在函数内部使用一个新的引用覆盖原来的引用,那么在函数内部的修改就不会影响原引用的值,函数外部也是看不到的。
var a = [1,2,3];
function f(x){
x = 4; // 在函数中修改参数值
}
f(a); // 传递引用值
alert(a[0]); // 返回1,原值不会发生变化
3)比较值
当比较两个引用值时,比较的是两个引用地址,看它们引用的原值是否为同一个副本,而不是比较它们的原值字节是否相等。当对两个不同值进行引用时,尽管它们具有相同的字节构成,但是这两个引用的值却是不相等的。
var a = new Number(1); // 引用值a
var b = new Number(1); // 引用值b
var c = a; // 把a的引用赋值给c
alert(a==b); // 返回false
alert(a==c); // 返回true
所以,{} == {},[] == [],都返回false。因为引用地址不同。
总之,对于任何语言来说,使用值和使用引用都是数据操作的两种基本方法。当我们操作数据时,要采用什么方法来进行处理,主要看数据的类型。值类型和引用型数据参与运算的方式不同,值类型数据通过使用值来操作数据,而引用型数据使用引用来操作数据。运算方式的不同,自然所产生的结果也不同。我们不妨再看一个示例:
var s = "abc"; // 字符串,值类型数据
var o = new String(s); // 字符串对象,被装箱后的字符串 function f(v){ // 运算函数
v.toString = function(){ // 修改参数的方法toString()
return 123;
};
}
f(s); // 传入值
alert(s); // 返回字符串"abc",说明运算没有对原数据造成影响
f(o); // 传入引用
alert(o); // 返回数值123,说明运算已经影响到原数据的内部结构
值类型是以实际值参与运算的,因此与原数据没有直接联系。而引用型以引用地址参与运算,计算的结果会影响到引用地址所关联的堆区数据块。但是,有一点例外,对于JavaScript的字符串来说,它的操作方法就比较复杂,详情请google!
JavaScript数据操作--原始值和引用值的操作本质的更多相关文章
- javascript原始值和引用值类型及区别
原始值和引用值类型及区别 首先,原始值和引用值类型都是js中的数据类型,为了充分利用存储空间,定义了不同的数据类型,而且js是弱类型,动态语言,数据类型可变. 原始值(简单数据类型) 存储在栈中的简单 ...
- ES6 学习笔记(三)原始值与引用值
总结: 1.原始值,表示单一的数据,如10,"abc",true等. 1.1. ES的6种原始值: Undefined.Null.Boolean.Number.String.Sym ...
- JS中原始值和引用值的储存方式
在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值 原始值指的是代表原始数据类型的值,也叫基本数据类型,包括:Number.Stirng.Boolean.Null.Underfine ...
- JS中原始值和引用值分析
JS中变量中两种类型的值:原始值,引用值 原始值是存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置. var x = 1; //1就是一个原始值,变量x中存放的就是原始 ...
- Js 中的原始值和引用值
最近遇写 node.js 时到一个问题,把对象当赋值给数组成员时总是出错,比如下面的代码, var Arr = new Array(); var Obj = new Object(); for(var ...
- ECMAScript 原始值和引用值
原始值和引用值 在ECMAScript中,变量可以存在两种类型的值,即原始值和引用值 原始值 存储
- JavaScript-原始值和引用值
一.原始值和引用值的概念 在 ECMAScript 中,变量可以存在两种类型的值,即原始值和引用值. 1.1 原始值 (1)原始值指的是 原始类型 的值,也叫 基本类型,例如 Number.Stirn ...
- JavaScript检测原始值、引用值、属性
上周写过一篇读书笔记<编写可维护的JavaScript>之编程实践,其中 第8章 避免『空比较』是博主在工作中遇坑较多的雷区,所以特此把该章节重新整理分享,希望大家不再坑队友(>﹏& ...
- JS浅谈原始值与引用值操作
值的操作分为三大类:复制,传递,比较 一:复制 原始值 let a = 10; let b = a; 注释:2018-7-30 17:33:49 1 原始类型的值都是存放在栈内存当中,所以他们的赋值操 ...
随机推荐
- awk打印出当前行的上一行
#awk '/B/{print a;}{a=$0}' a.txt A # cat a.txt A BCDE
- 算法与数据结构之选择排序(C语言)
#include<stdio.h> #include<stdlib.h> void SelectSort(int *a,int n);//预声明要调用的函数 int main( ...
- 绘制图形与3D增强技巧(二)----直线图元
一. glBegin(GL_LINES); glend(); 二.线带和线环 glBegin(GL_LINE_STRIP); glend(); glBegin(GL_LINE_LOOP); glend ...
- Java线程与并发库高级应用-线程范围内共享数据ThreadLocal类
1.线程范围内共享变量 1.1 前奏: 使用一个Map来实现线程范围内共享变量 public class ThreadScopeShareData { static Map<Thread, In ...
- 高级语言虚拟机的一点理解,对比.NET和Java平台
最近学习了一些高级语言虚拟机的知识,在此对.NET平台和java平台做一个简单的比较.对java平台已经很熟了,所以此处只介绍.NET平台下的一些概念. 一.CLI 通用语言基础架构(Common L ...
- BZOJ1010 [HNOI2008]玩具装箱toy
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- wordpress /wp-content/plugins/wp-symposium/server/php/UploadHandler.php File Arbitrary Upload Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Relevant Link:2. 漏洞触发条件3. 漏洞影响范围4. 漏 ...
- vs 2012 + OPenCV 2.4.8 配置
一:安装Opencv 下载opencv-2.4.8.exe,然后安装在目录D:\opencv-2.4.8. 二:配置vs 2012 1.打开vs创建项目 2.下一步,选择dll ,空项目,然后完成.后 ...
- 【Alpha阶段】第一次线上会议
会议信息 因编译作业ddl,暂时没有大进展,没有close的issue 时间:2016.11.07 19:00 时长:10min 地点:讨论组 类型:线上会议 NXT:2016.11.08 21:30 ...
- jQuery知识点总结(第三天)
今天来总结剩余的选择器. 非常感谢评论区提问题的朋友们,有的错误是我笔误,有的问题则是知识点没有辨析解释清楚.只要有疑问,我们大家一同探究学习. 表单对象过滤选择器: ○ 选取所有可用的元素 ...