JS数据类型、判断、堆栈、深浅拷贝

数据类型

六种基本数据类型

1. undefined
2. null
3. string
4. number (NaN)
5. boolean
6. symbol

一种引用类型

• Object (包括Array和Function)

检测方法

1. typeof
   用来检测：undefined、string、number、boolean、symbol、object、function，无法检测ASrray
2. xx instanceof type
   用来检测引用类型Array、Function、Object
   无法检测基本类型

console.log(2 instanceof Number); // false
console.log(true instanceof Boolean); // false 
console.log('str' instanceof String);  // false  
console.log([] instanceof Array);    // true
console.log(function(){} instanceof Function); // true
console.log({} instanceof Object);    // true    
console.log(undefined instanceof Undefined);// 报错
console.log(null instanceof Null);//报错

3. constructor

console.log((2).constructor === Number); //true
console.log((true).constructor === Boolean); //true
console.log(('str').constructor === String); //true
console.log(([]).constructor === Array); //true
console.log((function() {}).constructor === Function); //true
console.log(({}).constructor === Object); //true

如果创建的对象更改了圆形，无法检测到最初的类型

function Fn(){}; //原来是方法
Fn.prototype=new Array(); //改变原型为数组
var f=new Fn();
console.log(f.constructor===Fn);    // false
console.log(f.constructor===Array); // true

4. 其他补充方法

• null检测：a === null
• Array检测：`Array.isArray([])

5. 万金油方法
   Object.prototype.toString.call()
   返回[object type]其中type是对象类型

var a = Object.prototype.toString;
 
console.log(a.call(2));
console.log(a.call(true));
console.log(a.call('str'));
console.log(a.call([]));
console.log(a.call(function(){}));
console.log(a.call({}));
console.log(a.call(undefined));
console.log(a.call(null));

[object Number]
[object Boolean]
[object String]
[object Undefined]
[object Null]
[object Array]
[object Function]
[object Object]

null和undefined区别

null表示"没有对象"，即该处不应该有值。典型用法是：

• 作为函数的参数，表示该函数的参数不是对象。
• 作为对象原型链的终点。

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

• 变量被声明了，但没有赋值时，就等于undefined。
• 调用函数时，应该提供的参数没有提供，该参数等于undefined。
• 对象没有赋值的属性，该属性的值为undefined。
• 函数没有返回值时，默认返回undefined。

堆和栈

定义

• stack栈，自动分配的内存空间，由系统自动释放
• heap堆是动态分配的内存，大小不定，不自动释放

与数据类型的关系

• 基本数据类型存放在栈中，=：直接传值

• 引用数据类型存放在堆中，=：传址

  
  
  

  堆栈

深浅拷贝

数组的浅拷贝：数组里的引用类型都是浅拷贝的

/**
    数组的浅拷贝
**/
//1、基本 =
var arr1 = [1, 2, 3]
var arr2 = arr1
arr1[0]=100
console.log(arr1,arr2) // [ 100, 2, 3 ] [ 100, 2, 3 ]

//2、slice
var arr3 = [1, 2, 3]
var arr4 = arr3.slice(-1) // 取数组最后一个元素
arr3[2] = 100
console.log(arr3,arr4) // [ 1, 2, 100 ] [ 3 ]
//看起来修改旧数组不改变新数组，像是深拷贝了
//但是！！！
var arr5 = [1, 2, 3, {b: 4}]
var arr6 = arr5.slice(-1)
arr5[3].b = 100
console.log(arr5, arr6) //[ 1, 2, 3, { b: 100 } ] [ { b: 100 } ]
// 如果数组里元素是个引用类型，那么旧数组里这个元素被改变，会影响新数组
// 所以slice()方法是浅拷贝

//3、concat 同上理

//4、遍历
var arr7 = [1,2,3,{b:4}]
var arr8 = []
for (var i = 0; i < arr7.length; i ++) {
    arr8.push(arr7[i])
}
arr7[3].b = 100
console.log(arr7, arr8) // [ 1, 2, 3, { b: 100 } ] [ 1, 2, 3, { b: 100 } ]

对象浅拷贝

// 1、 对象浅拷贝 - Object.assign
function shallowCopy4(origin) {
    return Object.assign({},origin)
}

//2、 对象浅拷贝 - 扩展运算符
// 扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中
function shallowCopy5(origin) {
    return {
        ...origin
    }
}

//3、使用...符
const newObje = {...obj}

//4、使用create
const newObj = Object.create({}, obj)

深拷贝

1. JSON正反序列化

 function deepClone1(origin) {
    return JSON.parse(JSON.stringify(arr));
}

原理：利用 JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化（还原）js对象
缺点：缺点就是无法拷贝 undefined、function、symbol 这类特殊的属性值，拷贝完变成null

2. 递归

function DeepClone(originObj) {
    // 先判断obj是数组还是对象
    let newObj;
    if(originObj instanceof Array ) {
        newObj = []
    } else if (originObj instanceof Object) {
        newObj = {}
    }
    for (let key in originObj) {
        // 判断子元素类型
        if (typeof(originObj[key]) === "object") {
            // 如果子元素为object 递归一下
            newObj[key] = DeepClone(originObj[key])
        } else {
            newObj[key] = originObj[key]
        }
    }
    return newObj
}

3. lodash的_.cloneDeep()