欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript 知识梳理[一] 变量类型,浅拷贝,深拷贝

程序员文章站 2022-07-10 21:44:27
在一种编程语言中,充分了解其变量类型尤为重要,因为在使用过程中,数据的处理方式和变量的类型息息相关,JavaScript 和 java 类似,了解了变量类型,数据复用或者处理时,深浅拷贝便能一目了然。1、变量类型 变量类型包含 值类型 和 引用类型常见基本类型常见引用类型 值类型和引用类型的堆栈浅析 基本类型存储在栈中,直接存储的就是值 按值访问 引用类型存储在堆中,在栈中存放的是引用的地址 地址指向堆总存储的......

在一种编程语言中,充分了解其变量类型尤为重要,因为在使用过程中,数据的处理方式和变量的类型息息相关,JavaScript 和 java 类似,了解了变量类型,数据复用或者处理时,深浅拷贝便能一目了然。

1、变量类型

        变量类型包含 值类型 和 引用类型 

JavaScript 知识梳理[一] 变量类型,浅拷贝,深拷贝
常见基本类型
JavaScript 知识梳理[一] 变量类型,浅拷贝,深拷贝
常见引用类型

 

     值类型和引用类型的堆栈浅析

      基本类型存储在栈中,直接存储的就是值 按值访问

      引用类型存储在堆中,在栈中存放的是引用的地址 地址指向堆总存储的实际内容

JavaScript 知识梳理[一] 变量类型,浅拷贝,深拷贝
基本类型存储
JavaScript 知识梳理[一] 变量类型,浅拷贝,深拷贝
应用类型

 

2、浅拷贝和深拷贝

深浅拷贝都是针对于引用类型的数据来说的,简单来说 浅拷贝就只是拷贝了引用类型变量的地址 ,而地址指向的对中的实际对象内容是没有进行拷贝的,这样会导致,拷贝后的对象如果进行了修改,那么 原来的对象值也会被修改,原因很简单 修改的都是堆中实际的对象内容;而深拷贝就是完全复制,会创建出来一个新的对象存储在堆中,和原对象是相互独立的。

实现拷贝的方法来看一看

Object.assign() ==>Object.assign({},obj)

解构赋值:==》 obj2 = {...obj1}

// 以上深浅拷贝要看引用类型里面是否有多层嵌套

JSON.stringfy()==> obj2 = JSON.parse(JSON.stringfy(obj1))

递归调用拷贝==》

// 以上递归遍历实现后 两者都可以实现深拷贝

此处练习一个递归调用进行的深拷贝

         obj1:{
                age:20,
                name:"赵四",
                address:{
                    city:"青岛"
                },
                arr:['a','b','c']
            }


        deepClone(obj={}){
            if(typeof obj !=='object'|| obj==null){
                // 如果obj 是 null  或者 不是 对象或者数组 直接返回
                return obj
            }
            // 初始化返回结果
            let result 
            if(obj instanceof Array){
                result = []
            }else{
                result = {}
            }
            // 遍历obj 的属性
            for(let key in obj){
                // 保证key 不是原型的属性
                if(obj.hasOwnProperty(key))
                // 递归调用
                result[key] = this.deepClone(obj[key])
            }
            console.log(result)
            console.log("===deepCloneObj===")
            return result
        }

 

本文地址:https://blog.csdn.net/Sandy_zhi/article/details/107376597

相关标签: web 前端 js