美文网首页程序员Web 前端开发 前端开发
JavaScript赋值时的传值与传址

JavaScript赋值时的传值与传址

作者: 小pxu | 来源:发表于2016-05-31 21:37 被阅读1056次

JavaScript中有两种不同数据类型的值,分别是基本数据类型与引用数据类型

  • 基本数据类型包含5类,分别是:Number、String、Boolean、Null、Undefined
  • 引用数据类型包含剩下的Array、Date、Math、RegExp、Object、Function等

将一个值赋给变量时,解析器必须确定这个值是基本类型还是引用类型。

  • 基本类型是按值直接访问的
  • 引用类型是按引用访问的

基本数据类型赋值:

//此处是基本数据类型对的赋值
//最后在改变了b的值得情况下,a的值不受影响
var a = 1;
var b = a;
b = 10;

console.log(a);  //1
原因分析:

如果从一个变量向另一个变量复制基本类型的值,会在变量变量对象上创建一个新值,然后把该值复制到为新变量分配的位置上 ----《JavaScript高级程序设计》

也就是说,传值得过程经历了以下几步:

  1. 复制变量的值
  2. 申请一个新的内存地址保存复制的值
  3. 把复制的值的新地址赋给新的变量

所以两个变量的值只是在数值上相等,其实在内存中是两个地址,是互相独立的存在

因此其中一个发生改变时并不会影响到另外一个

引用数据类型赋值

//此处是引用数据类型的赋值
//在arr2变化的情况下,arr1也会同步变更
var arr1 = [1,2,3,4];
var arr2 = arr1;
arr2[0] = 10;

console.log(arr1[0]);  //10
原因分析

当从一个变量向另一个变量复制引用的值时,同样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。

不同的是,这个值的副本实际上是一个指针,而这个指针指向存储在堆中的一个对象。复制操作结束后,两个变量实际上引用同一个对象。

----《JavaScript高级程序设计》

也就是说,传址其实就是把一个变量在内存中的地址传给另一个变量

改变一个变量,就会影响另外一个变量

如何避免传址的缺点

因为两个变量同步变更的特性是我们不想要的,所以我们需要用克隆的方法避开它

克隆实现原理:

  • 利用字符串赋值为传值的特点,先将对象转化成字符串形式
  • 然后将字符串形式再转换成对象
第一种方法(for循环)

这种方法在遇到复杂数组时比较无力,比如 arr = [1,[2,3],{a:1,b:2}]

//for循环原数组,将每个参数分别赋值给空数组arr2
//缺陷是:当数组中存放了引用类型数据时,就需要多次循环,比较复杂
var arr1 = [1,2,3,4]
var arr2 = []
for (var i = 0; i<arr1.length; i++){
    arr2[i] = arr1[i]
}
arr2[0] = 10;

console.log(arr1[0]);  //1  arr1不受影响
第二种方法(forEach)

forEach是ES5新引入的数组方法,可以用来循环数组及对象

array.forEach(callback,[thisObject]);

forEach有两个参数:第一个参数是回调函数,第二个参数是执行回调是this的值

回调函数包含3个参数:

  1. 当前循环值
  2. 当前循环下标
  3. 被循环的数组本身

注意:ie浏览器没有forEach方法,要兼容的话需要自己用原生给原型链上加这个方法

 var arr1 = [1,2,3,4];
 var arr2 = [];
 var str = '';
 arr1.forEach(function(val){
    console.log(val)  //1 2 3 4  这里val是循环值
    str += val;
 });
 arr2 = str.split('')
 console.log(arr2)  //["1","2","3","4"] 此处arr已经是数组
 arr2[0] = 10;  //改变arr2中的参数
 
 console.log(arr1[0])  //1  arr1不受影响
第三种方法(JSON.stringify() / JSON.parse())

JSON.stringify():把对象转换成字符串形式的JSON格式字符串值(无法转换DOM/BOM对象)

JSON.parse():把字符串形式的标准JSON字符串转换成对象(属性名称必须有引号)

用法举例:

var arr = [1,2,[3,4],{a:'abc',b:true}];
console.log(JSON.stringify(arr))  //'[1,2,[3,4],{"a":'abc',"b":true}]'  属性会加上双引号

var oDiv = document.getElementById('div1')
console.log(JSON.stringify(oDiv))  //{}  打印一个空对象

克隆实现方法:

var arr1 = [1,2,[3,4],{a: 'abc',b: true}];
var arr2 = JSON.stringify(arr1);
arr2 = JSON.parse(arr2);
arr2[2][0] = 10;
 
console.log(arr1[2][0])  //3  arr1不受影响

相关文章

  • JavaScript基础学习笔记

    JavaScript中的传值与传址 赋值语句中JavaScript中对基本类型的传递是传基本值,基本类型包括:Bo...

  • JavaScript赋值时的传值与传址

    JavaScript中有两种不同数据类型的值,分别是基本数据类型与引用数据类型 基本数据类型包含5类,分别是:Nu...

  • 1.2堆栈与拷贝

    1.传值与传址 基本类型与引用类型最大的区别实际就是传值与传址的却别。 从上面我们可以得知,当我改变b中的数据时,...

  • ​Python赋值一切对象皆传址

    Python赋值一切对象皆传址 经常听到编程语言赋值操作中,有传引用,传值等传递方式,但在Python中只有传地址...

  • 基础知识点

    基础知识点 单双引号 传值方式 赋值传值 : 赋值时直接赋值固定值 引用传值: 参考文章:PHP取地址符(引用符)...

  • 传值与传址

    一、传值与传址的定义 1、传值:一般,函数调用过程中的参数传递的就是实参的值,就是把实参传递给形参。 对形参的修改...

  • C语言的函数(第二篇章:函数的传值与传址和函数的调用)

    一、函数的传值与传址 说起函数的传值与传址,外表看起来很高大上的样子,其实本质是都是传递一个数值而己。 在这里引入...

  • 深入PHP理解传址与传值赋值的区别

    原文地址:http://www.qiusuoweb.com/129.html 最近研读PHP变量构造的资料时,发现...

  • 可能碰到的iOS笔试面试题(8)--Block

    Block Block底层原理实现 首先我们来看四个函数 造成这样的原因是:传值和传址。为什么说会有传值和传址,把...

  • python 的copy 和deepcopy区别

    1.传值和传址 传值就是传入一个参数的值,传址就是传入一个参数的地址,也就是内存的地址(相当于指针)。他们的区别是...

网友评论

    本文标题:JavaScript赋值时的传值与传址

    本文链接:https://www.haomeiwen.com/subject/axfhdttx.html