js数据克隆逐步深入

js的数据类型分类

• 　　值类型（基本类型）：String、Number、Boolean、Null、Undefined、Symbol
• 　　引用数据类型：Object、Array、Function

存储对象

• 　　对于值类型数据，存储的对象为原始数据
• 　　对于引用数据类型，存储的对象为引用地址

 实现克隆

• 　　对于基本的数据类型，可利用 = 进行浅拷贝
• 　　对于引用数据类型（只存在一级）

　　　　Object

  　　　　　　var a = {
                name: 'nico',
                age: 18,
            };
            // way1
            var b={...a}
            // way2
            var c=Object.assign({},a)
            // way3
            var d={}
            Object.keys(a).forEach(key=>{
                d[key]=a[key]
            })
            // way4
            var e={}
            for(let key in a){
                e[key]=a[key]
            }

　　　　Array　　

    　　　　　var a = [1, 2, 3];
            // way1
            var b = [...a];
            // way2
            var c = a.concat();
            // way3
            var d = a.slice();
            // way4
            var e=Object.assign([],a)
            // way5
            var f=[]
            for(let i in a){
                f[i]=a[i]
            }    

• • 　　Object.assign使用说明

var formItem1 = [
    {name: 'zzz', age: '11'}
]
var formItem2 = [
    {name: 'xxx',age: '13',show:false}
]
var formItem3 = Object.assign(formItem1, formItem2)
// 用在数组的时候,会将数组视为对象
// 即：formItem1=[{0:{name: 'zzz', age: '11'}}],formItem2=[{0:{{name: 'xxx',age: '13',show:false}}}]
console.log(formItem3)
// 所以formItem3的打印结果为[ { name: 'xxx', age: '13', show: false } ]

• 对于引用数据类型（存在多级）

　　　　　　　var a=[{name:'nico',age:18,hobby:['sing','dance']}]
            // way
            var b=JSON.parse(JSON.stringify(a))

• 　　对于引用数据类型（存在Regexp、Date、Function等）

            function judgeType(targetItem){
                const toString=Object.prototype.toString
                const map={
                    '[object String]':'string',
                    '[object Number]':'number',
                    '[object Boolean]':'boolean',
                    '[object Undefined]':'undefined',
                    '[object Null]':'null',
                    '[object Array]':'array',
                    '[object Function]':'function',
                    '[object Object]':'object',
                    '[object RegExp]':'regExp',
                    '[object Date]':'date',

                }
                if(targetItem instanceof Element){
                    return 'element'
                }
                return map[toString.call(targetItem)]
            }

            function deepClone(targetObj){
                const type=this.judgeType(targetObj)
                let resObj=null
                if(type==='array'){
                    resObj=[]
                    for(let i=0;i<targetObj.length;i++){
                        resObj.push(this.deepClone(targetObj[i]))
                    }
                }else if(type === 'object'){
                    resObj={}
                    for(let key in targetObj){
                        if(targetObj.hasOwnProperty(key)){
                            resObj[key]=this.deepClone(targetObj[key])
                        }
                    }
                }else{
                    return targetObj
                }
                return resObj
            }

            var a={
                name:'coco',
                age:18,
                printHi:function(){
                    console.log('Hi')
                },
                birthDay:new Date('2000-01-01')
            }

            var b=deepClone(a)