基础数据类型

1、基本类型(值类型)：Boolean、String、Number、Symbol、Null、Undefined

2、引用类型：Function、Object、Array

特别说明：Symbol是ES6新增的原始数据类型，表示独一无二

浅拷贝和深拷贝

区分：假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，如果B没变，那就是深拷贝

场景：vue操作数据时，把item属性赋值给一个变量form，修改form时发现item也变了，这时候需要 form = { ...item }

深入理解--浅拷贝

(1) Object.assign()

var obj1 = {a: 1, b: 2}
var obj2 = Object.assign({}, obj1) // 要注意Object.assign第一个参数必须是个空对象
 
obj2.a = 4
console.log(obj1, obj2)

// obj1, { a: 1, b: 2 }
// obj2, { a: 4, b: 2 }

(2) 解构赋值

var obj1 = {a: 1, b: 2}
var obj2 = {...obj1}
 
obj2.a = 4
console.log(obj1, obj2)

// obj1, { a: 1, b: 2 }
// obj2, { a: 4, b: 2 }

缺陷， 这两种方式通常只能拷贝简单数据结构，如果数据结构复杂化类似于：

var obj1 = [{
    name: '臧三',
    childs: ['小明', '小芳']
}]
 
var obj2 = [...obj1]
obj2[0].childs = []
 
console.log(obj1, obj2)

// obj1, { name: '臧三', childs: [] }
// obj2, { name: '臧三', childs: [] }

发现两个obj的值都发生了改变，此时我们需要深拷贝

深入理解--深拷贝

(1) 利用json.stringify

var obj1 = [{
    name: '臧三',
    childs: ['小明', '小芳']
}]
var obj2 = JSON.parse(JSON.stringify(obj1))
 
obj2[0].childs = []
console.log(obj1, obj2)

// obj1, { name: '臧三', childs: ['小明', '小芳'] }
// obj2, { name: '臧三', childs: [] }

注意：此方法适用于简单数据结构，如果数据结构包含undefined，function, 并不会被拷贝

(2) 终极方法，递归实现

function extends (data) {
    if (!data) { return false }
    
    if( typeof data === 'object' ) {
        let items = typeof data.length === 'number' ? [] : {}
        for(let i in data) {
            items[i] = extend(data[i])
        }
        return items
    } else {
        return data
    }
}

var obj1 = [{
    name: '臧三',
    childs: ['小明', '小芳'],
    fn: function(){},
    age: undefined
}]
var obj2 = extends(obj1)

obj2[0].childs = []
console.log(obj1, obj2)

// obj1, { name: '臧三', childs: ['小明', '小芳'], age: undefined, fn: function(){} }
// obj2, { name: '臧三', childs: [], age: undefined, fn: function(){} }
文章目录