JS的数据类型/判断方法/栈与堆/深浅拷贝

一、数据类型

1、六种基本数据类型

• undefined
• null
• string
• number(注意NaN(not a number))
• boolean
• symbol(ES6)

2、一种引用类型

• Object(包括Array和Function)

3、检测方法

• typeof x || typeof (x)
  用来检测:undefined、string、number、boolean、object、function、symbol
  无法检测引用类型里的Array

let a
console.log(typeof a) // "undefined"
console.log(typeof 'hello wolrd') // "string"
console.log(typeof 1024) // "number"
console.log(typeof true) // "boolean" 
console.log(typeof []) // "object"
console.log(typeof {}) // "object"
let add = (x, y) => x + y
console.log(typeof add) // "function"
let sym = Symbol()
console.log(typeof sym) // "symbol"

• x instanceof type
  用来检测引用类型是否是Array || Function || Object(在原型链里一层一层得找)
  无法检测基本类型

// 注意 Array Function 也是Object
console.log(Array instanceof Object) // true
console.log(Function instanceof Object) // true

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([] instanceof Object) // true
console.log((function(){}) instanceof Function) // true
console.log((function(){}) instanceof Object) // true
console.log(({}) instanceof Object) // true

• object.constructor
  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

ps:
(object).constructor,object加上括号肯定不会错,不加有时候会报错

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

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

• 其他补充方法

// null检测方式
console.log(null === null) // true 其他的都不成立
// Array 可以用 Array.isArray() 检测
console.log(Array.isArray([])) // true

• 万金油方法: Object.prototype.toString.call()
  能检测所有类型，返回"[object type]"字符串, 其中type是对象类型

var a = Object.prototype.toString
 
console.log(a.call(2)) // "[object Number]"
console.log(a.call(true)) // "[object Boolean]"
console.log(a.call('str')) //"[object String]"
console.log(a.call([])) // "[object Array]"
console.log(a.call(function(){})) // "[object Function]"
console.log(a.call({})) // "[object Object]"
console.log(a.call(undefined)) //"[object Undefined]"
console.log(a.call(null))  // "[object Null]"

4、 undefined和null区别

• 基本没区别，都表示“无”
• 细微区别：

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

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

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

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

二、栈和堆

1、定义

• 栈(stack):自动分配的内存空间,它由系统自动释放
• 堆(heap)动态分配的内存空间,大小不定,也不会自动释放

2、定义

• 基本数据类型存放在栈里, = 直接传值
• 引用数据类型存在放堆里, = 传地址
  

三、浅/深拷贝

1、基本概念

浅拷贝、深拷贝主要用于引用类型

• 基本数据类型

let a = 2
let b = a
a = 1
console.log(a, b) // 1 ,2 ——a,b指向栈里不同数据

• 引用数据类型

let a = {c: 2}
let b = a
a.c = 1
console.log(a.c,b.c) //1，1 —— a,b指向堆里同份数据

为了切断引用类型a和b的联系，所以我们需要浅/深拷贝

• 浅拷贝: 一层拷贝
• 深拷贝: 无限层拷贝

2、数组/对象

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

//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
    }
}

• 深拷贝

1.、最方便的JSON正反序列化

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

• 原理：利用 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
}

谢谢你阅读到了最后
欢迎点赞、评论、交流、一起成长