首页 > 编程语言 >4.1 JavaScript 原始值与引用值

4.1 JavaScript 原始值与引用值

时间:2023-01-24 11:12:10浏览次数:47  
标签:4.1 log JavaScript num let 引用 console 变量 赋值

JavaScript 中有两种类型的值:原始值和引用值。

原始值是不可变的,如Undefined、Null、Boolean、Number、String和Symbol。当将一个原始值赋值给另一个变量时,实际上是将该值的一个副本赋值给变量。

引用值是可变的,如对象和数组。当将一个引用值赋值给另一个变量时,实际上是将该值的内存地址赋值给变量,因此两个变量会指向同一个值。

对于原始值来说,如果将其赋值给另一个变量,改变该变量的值不会影响到其他变量。例如:

let a = 5;
let b = a;
b = 10;
console.log(a); // 5
console.log(b); // 10

对于引用值来说,如果将其赋值给另一个变量,改变该变量的值会影响到其他变量。例如:

let a = [1, 2, 3];
let b = a;
b.push(4);
console.log(a); // [1, 2, 3, 4]
console.log(b); // [1, 2, 3, 4]

如果需要深拷贝一个引用值,可以使用 JavaScript 的深拷贝函数,例如 JSON.parse(JSON.stringify(obj))

另外还需要注意,如果是改变对象属性的值时,还是会相互影响的

let a = {num:1}
let b = a
b.num = 2
console.log(a.num) // 2
console.log(b.num) // 2

对于对象属性的修改,如果想要避免相互影响,可以使用浅拷贝的方式来赋值,即使用 Object.assign() 或者扩展运算符(...)来赋值。 例如:

let a = {num:1};
let b = Object.assign({}, a); // 或者 let b = {...a};
b.num = 2;
console.log(a.num); // 1
console.log(b.num); // 2

这样就可以避免相互影响了。

如果对象属性中还有对象,使用浅拷贝只能复制一层属性,如果要深拷贝可以使用深拷贝库,如 lodash 的 _.cloneDeep() 函数。

如果是原始类型的数据,在比较的时候是基于值的比较,而对于引用类型的数据,是基于地址的比较。

例如:

let a = 5;
let b = 5;
console.log(a === b); // true

let c = [1, 2, 3];
let d = [1, 2, 3];
console.log(c === d); // false

如果需要比较两个对象是否相等,可以使用 lodash 的 _.isEqual() 函数来进行比较。

还有另外一种方法就是使用 JSON.stringify() 将两个对象转化成字符串,再比较字符串是否相等,但是需要注意的是如果对象中有函数或者循环引用的情况时会抛出错误。

总结一下,在JavaScript中,原始值和引用值是有区别的,在赋值、修改、比较时需要注意。

标签:4.1,log,JavaScript,num,let,引用,console,变量,赋值
From: https://www.cnblogs.com/yuzhihui/p/17065948.html

相关文章

  • JavaScript 自增和自减运算符
    JavaScript中有两种方法来自增或自减一个变量的值,分别是自增运算符和自减运算符。自增运算符(++):将变量的值增加1。letx=5;x++;//x现在的值为6自减运算符(--):将......
  • Javascript Basic
    Javascriptisa dynamicallytyped, weaklytypedand interpreted high-levelprogramminglanguage.InterestingJavaScriptFeaturesWe'llgoovertheseinmor......
  • JavaScript基础
    快速入门1.引入JavaScript1、内部标签<script>//注释</script> 2、外部引入abc.js//...test.html<scriptsrc="abc.js"></script> 测试代码<!DOCTYPE......
  • JavaScript 解决冒泡事件导致的性能问题
    在JavaScript中,当有大量的子元素都需要绑定同一个事件时,冒泡事件可能会导致性能问题。这时可以使用以下方法来解决性能问题。使用事件委托:通过在父元素上绑定事件监听......
  • JavaScript 事件委托
    事件委托是一种事件处理方式,它可以通过在父元素上绑定事件,然后利用事件冒泡的特性,让父元素处理子元素上的事件。这样做的好处是可以减少事件监听器的数量,提高性能。在Jav......
  • JavaScript学习笔记—高阶函数
    如果一个函数的参数或返回值是函数,则这个函数就成为高阶函数将函数作为参数,意味着可以对另一个函数动态的传递代码classPerson{constructor(name,age){thi......
  • JavaScript 事件冒泡和事件捕获
    事件冒泡指的是从触发元素开始,向父元素传播事件的过程。事件捕获则是相反,从父元素开始,向触发元素传播事件。在JavaScript中,当一个事件发生时,会先进行事件捕获,然后再进行......
  • JavaScript
    JavaScript第三章--类型、值、变量3.10变量声明与赋值3.10.1let,const//let可以声明的同时赋值,也可以只声明,只声明的变量值为undefinedleti,num;letb=10;//co......
  • manim 4.1
    %%manim-vWARNING-qls1iftype("xxp'smanim")==str:#不写在下方construct函数中,因为这可能使用到其内部的函数,我想与其分离,因为如果construct内部的函......
  • import引用模块时,有{}和没有{}的区别
    1、如果js文件中的实例、变量、方法是 exportdefault默认导出的,就可以不用{},并且可以自己任意命名,例如: 2、如果js文件中是直接命名导出,则需要用{},可以通过as取别名......