前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS的数据类型/判断方法/栈与堆/深浅拷贝

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

作者头像
杨肆月
发布2019-08-20 16:10:02
1.4K0
发布2019-08-20 16:10:02
举报
文章被收录于专栏:全栈开发之路

一、数据类型

1、六种基本数据类型

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

2、一种引用类型

  • Object(包括Array和Function)

3、检测方式

1)typeof(...)

用来检测:undefined、string、number、boolean、symbol、object、function 无法检测引用类型里的Array

2)xx instanceof type

用来检测引用类型是Array/Function/Object 无法检测基本类型

代码语言:javascript
复制
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
代码语言:javascript
复制
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

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

代码语言:javascript
复制
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是对象类型

代码语言:javascript
复制
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]

4、null和undefined区别

  • 基本没区别,都表示“无”
  • 细微区别:

null表示"没有对象",即该处不应该有值。典型用法是: (1) 作为函数的参数,表示该函数的参数不是对象。 (2) 作为对象原型链的终点。

undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是: (1)变量被声明了,但没有赋值时,就等于undefined。 (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。 (3)对象没有赋值的属性,该属性的值为undefined。 (4)函数没有返回值时,默认返回undefined。

二、栈和堆

1、定义

  • 栈stack为自动分配的内存空间,它由系统自动释放;
  • 堆heap则是动态分配的内存,大小不定也不会自动释放。

⭐2、与数据类型的关系

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

题目:

三、浅/深拷贝

1、基本概念

前奏:浅/深拷贝主要针对引用类型

因为对于基本数据类型而言:

代码语言:javascript
复制
var a = 2
var b = a
a = 1
console.log(a, b) // 1 ,2 ——a,b指向栈里不同数据 

而对于引用类型而言:

代码语言:javascript
复制
var a = {c: 2}
var b = a
a.c = 1
console.log(a.c,b.c) //1,1 —— a,b指向堆里同份数据

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

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

2、两大类:数组/对象

数组的浅拷贝:数组里的引用类型都是浅拷贝的
代码语言:javascript
复制
/**
    数组的浅拷贝
**/
//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 } ]
对象的浅拷贝
代码语言:javascript
复制
// 1、 对象浅拷贝 - Object.assign
function shallowCopy4(origin) {
    return Object.assign({},origin)
}

//2、 对象浅拷贝 - 扩展运算符
// 扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中
function shallowCopy5(origin) {
    return {
        ...origin
    }
}
⭐深拷贝
1、最方便的JSON正反序列化
代码语言:javascript
复制
function deepClone1(origin) {
    return JSON.parse(JSON.stringify(arr));
}

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

参考:JS专题之深浅拷贝深拷贝的终极探索

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.08.16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、数据类型
    • 1、六种基本数据类型
      • 2、一种引用类型
        • 3、检测方式
          • 4、null和undefined区别
          • 二、栈和堆
            • 1、定义
              • ⭐2、与数据类型的关系
              • 三、浅/深拷贝
                • 1、基本概念
                  • 2、两大类:数组/对象
                    • ⭐深拷贝
                相关产品与服务
                文件存储
                文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档