浅谈JavaScript的赋值操作的一些问题

简介: 开篇语:以前面试时经常会被面试官问到JavaScript中的一些基础性问题,可JavaScript正好又是自己的弱项,所以一些好工作自然就与自己失之交臂了。

开篇语:以前面试时经常会被面试官问到JavaScript中的一些基础性问题,可JavaScript正好又是自己的弱项,所以一些好工作自然就与自己失之交臂了。可正是这样,自己才开始意识到JavaScript对于前端开发的重要性,才开始努力地深入学习这门语言。接下来我就来讲讲JavaScript中赋值操作的一些问题。

1、首先讲一下值类型的赋值操作。值类型有个特点就是,每一个值类型变量都有其各自的存储地址,一个值类型变量的值变化不会影响其他值类型变量的值。例如:

var  a =“张三”;

var  b = a;

a =“李四”;

console.log(b);   //张三

以下是chrome浏览器控制台的测试结果:

这个应该很好理解,b = a表达式将a的值赋给了b,所以b的值为“张三”,而后面就算a变成了“李四”,那跟b又没有什么关系,b还是b,还是“张三”。

2、接下来再讲讲引用类型的赋值操作。引用类型有个特点就是,引用类型变量的存储地址可能公用同一个,其中一个变量值的改变可能会造成其他变量值也跟着改变。例如:

var a = [1,2,3], b = a;

a[2] = 8;

console.log(a==b)   //true

console.log(b[2])   //8

以下是chrome浏览器控制台的测试结果:

这个原理其实也很简单,因为数组其实就是一种引用类型,其他引用类型还包括Object和Function。以上表达式b = a只是将a的引用赋值给b,其实就是将a变量的地址赋值给b,而a、b两个变量其实是指向同一个地方的,所以当a数组中的某个值变化时,b数组相应的那个值当然也会跟着变化。可是,如果接下来让a = null又会出现什么样的情况呢?我们测试一下看看:

a = null;

console.log(b[2]);   //8

这下就奇怪了,刚刚不是还说a和b共用同一个存储空间吗?现在怎么a变成了null了,b却还是保持原来的值呢?其实呢,a和b两个变量中储存的都只是数组的一个存储地址而已,而真正数组的值是存在于另外一块存储空间的。当a = null时,也就是将a中原来存储的地址清空了,而数组的那块存储空间还在,只是将变量a和数组之间的联系断开了而已。然而此时b仍然指向[1,2,8]这个数组,所以可以将b[2]的值正常输出。

现在如果已经理清楚了上面的这些问题,那么下面这种情况应该就很好理解了。

var a = {name:”张三”};

var b = a;

a = {name:”李四”};

console.log(b.name);   //张三

这个例子中,a被重新赋值新的地址,指向对象{name:”李四”},而b仍然是指向之前的{name:”张三”}。

结束语:通过以上分析,相信你对赋值,包括数据的存储也有一定了解了吧,这里关键在于理解引用类型,因为引用类型变量存储的地址并非实际的数值而只是地址而已。

本文为原创文章,转载请注明出处,谢谢!

相关文章
|
5月前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
52 7
|
2月前
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22
|
4月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
56 1
|
4月前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
40 1
|
4月前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
44 1
|
5月前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
129 1
|
5月前
|
存储 前端开发 JavaScript
回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。
【6月更文挑战第27天】回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。它作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,模拟异步操作后,调用`handleResult`传递结果。这样,当异步任务完成时,`handleResult`负责处理结果。
37 1
|
5月前
|
JavaScript
详细讲解JS的解构赋值(Es6)
详细讲解JS的解构赋值(Es6)
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
JavaScript 前端开发 开发者
JavaScript进阶-解构赋值与展开运算符
【6月更文挑战第19天】ES6的解构赋值与展开运算符增强了JS开发效率。解构允许直接从数组或对象提取值,简化数据提取,而展开运算符则用于合并数组和对象或作为函数参数。解构时注意设置默认值以处理不存在的属性,避免过度嵌套。展开运算符需区分数组与对象使用,勿混淆于剩余参数。通过示例展示了这两种操作在数组和对象中的应用,提升代码可读性与简洁度。
144 5