一文带你看懂JavaScript变量类型

数据类型

对外的,面对编译器

基本数据类型(值类型)

包括

Undefined

Null

Boolean

String

Number

Symbol(ES6) 存放位置:内存中的栈区域。

值的不可变性,称这些类型的值为原始值。

基本数据类型的值是按值访问的,基本类型的值是不可变的。

比较:基本数据类型的比较是值的比较,只判断是否相等。

拷贝:都是值的复制,相互没有影响。

引用数据类型(对象类型)

包括

Object

Array

Function

RegExp

Date 存放位置:内存中的栈存放指向堆区域的指针,内容在堆区域中

值的可变性:引用类型的值是按引用访问的,引用类型的值是动态可变的

比较:引用类型的比较是引用地址的比较,判断是否指向同一对象。

拷贝:

赋值:仅改变引用的指针,指向同一个对象,相互影响

浅拷贝:拷贝一层,不对对象的子对象进行拷贝,对第一层的基本类型的修改互不影响,对于子对象会相互影响。

深拷贝:对对象中的子对象进行递归拷贝,拷贝前后的两个对象互不影响。

undefined 和 null 的区别?

undefined:是一个没有设置值的变量。JavaScript特有的。没有返回值的函数返回为undefined,没有实参的形参也是undefined。

null:它是一个空对象指针。

null 和 undefined 的值相等,但类型不等:

typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true

基本数据类型和引用类型的数据结构

基本数据类型:数据存于内存中的栈区域。

应用数据类型:内存中的栈存放指向堆区域的指针,内容在堆区域中。

赋值、浅拷贝和深拷贝

如果是基本数据类型,直接赋值,会拷贝其本身,不存在浅拷贝和深拷贝。

如果是引用类型:

赋值:仅改变引用的指针,指向同一个对象,相互影响

浅拷贝:拷贝一层,不对对象的子对象进行拷贝,对第一层的基本类型的修改互不影响,对于子对象会相互影响。

深拷贝:对对象中的子对象进行递归拷贝,拷贝前后的两个对象互不影响。

赋值

let obj1 = { color: 'red', age: 20, address: { city: 'beijing', }, arr: ['a', 'b', 'c'] }; //赋值 let obj2 = obj1; obj1.age = 21; obj1.address.city = "shanghai"; console.log(obj2.age);//21 console.log(obj2.address.city);//shanghai

浅拷贝

letobj1 = {    color:'red',    age: 20,    address: {        city:'beijing',    },    arr: ['a','b','c']};//浅拷贝letobj3 = shallowCopy(obj1);obj1.age = 21;obj1.address.city ="shanghai";console.log(obj3.age); //20console.log(obj3.address.city); //shanghai//自定义浅拷贝函数functionshallowCopy(obj) {if(typeof obj !=='object'|| obj == null) {returnobj;    }letresult;if(obj instanceof Array) {        result = [];    }else{        result = {};    }for(letkeyinobj) {if(obj.hasOwnProperty(key)) {            result[key] = obj[key];        }    }returnresult;}

深拷贝

letobj1 = {    color:'red',    age: 20,    address: {        city:'beijing',    },    arr: ['a','b','c']};//深拷贝letobj4 = deepCopy(obj1);obj1.age = 21;obj1.address.city ="shanghai";console.log(obj4.age);//20console.log(obj4.address.city);//shanghai//自定义深拷贝函数functiondeepCopy(obj) {    // obj 是 null 或者不是对象和数组,直接返回if(typeof obj !=='object'|| obj == null) {returnobj;    }    // 初始化返回结果letresult;if(obj instanceof Array) {        result = [];    }else{        result = {};    }for(letkeyinobj) {if(obj.hasOwnProperty(key)) {            result[key] = deepCopy(obj[key]);        }    }returnresult;}

本地对象

对内的,供开发者使用

包装类型对象 Boolean String Number

引用类型 Array Function Date Object RegExp Error

内置对象

在脚本程序初始化时被创建,不必实例化这两个对象。

Global Math

基本包装类型

在实际中每读取一个基本数据值的时候,后台就会创建一个对应的基本包装类型对象,从而让我们能够调用一些方法操作这些数据。

lets1 ="some text"; //值类型没有方法。lets2 = s1.substring(2);console.log(s1); //some textconsole.log(s2); //me text

引用类型与基本包装类型的区别

它们的对象生命周期不同:

引用类型:使用new创建引用类型的实例,在执行数据流离开当前作用域时会一直存储在内存中。

基本包装类型:自动创建基本包装类型的对象,只执行一行代码的瞬间之后就会立即销毁。

这意味着在运行时为基本包装类型值添加属性和方法是无效的。

lets1 ='some text';s1.color ='red';s1.color // undefined// 但是这样是可以的lets1 = new String('some text');s1.color ='red';s1.color // red

不建议显式的创建基本包装类型的对象,因为在很多时候会造成一些让人很迷惑的东西。

letb = new Boolean(false); //b 这个变量就是 Boolean 对象letc = b &&true;console.log(c); //true

letstr ='hello'; // str 本质上是一个原始值,并不存在 prototype 属性console.log(typeof str); // stringconsole.log(str instanceof String); //false参考文章: https://segmentfault.com/a/11...

类型判断

typeof

相较于JS基本数据类型少null多function。

console.log(typeof null); //objectconsole.log(typeof undefined); //undefinedconsole.log(typeof 123); //numberconsole.log(typeof"123"); //stringconsole.log(typeoftrue); //booleanconsole.log(typeoffunctiona() {}); //functionconsole.log(typeof [1, 2, 3]); //objectconsole.log(typeof {a:"a"}); //object

instanceof

确定原型指向关系。只适用于对象,因为值类型没有原型。

不能判断一个对象实例具体属于哪种类型。

leta = [];console.log(a instanceof Array);//trueconsole.log(a instanceof Object);//true

Object.prototype.toString.call()

Object 的原型方法,返回"[object type]",其中type是对象的类型。

toString()调用null返回[object, Null],undefined返回[object Undefined]。

无法识别自定义的对象类型。

console.log(Object.prototype.toString.call(123)); //[object Number]

functionoptc(obj) {returnObject.prototype.toString.call(obj).slice(8, -1);}console.log(optc(123)); //Numberconsole.log(optc('123')); //Stringconsole.log(optc(true)); //Booleanconsole.log(optc(undefined)); //Undefinedconsole.log(optc(null)); //Nullconsole.log(optc({})); //Objectconsole.log(optc([])); //Arrayconsole.log(optc(function() {})); //Functionconsole.log(optc(/\d/)); //RegExpconsole.log(optc(new Date())); //Date

constructor(构造函数)

利用构造函数判断数据类型。

对象的构造函数名就是该数据类型。

除Null和Undefined外,所有的数据类型都是/可以转化为对象,而如果是对象,就肯定有构造函数。

functionA() {}leta = new A();console.log(a.constructor.toString()); //functionA() {}

总结

准确判断数据类型包括自定义的对象类型

functiondataType(data) {if(!data) { //判断null、undefinedreturnObject.prototype.toString.call(data).slice(8, -1);    }else{returndata.constructor.toString().match(/function\s*([^(]*)/)[1];    }}console.log(dataType(null)); //nullconsole.log(dataType(undefined)); //Undefinedconsole.log(dataType(123)); //Numberconsole.log(dataType([])); //ArrayfunctionPoint(x, y) {}console.log(dataType(new Point(1, 2))); //Point

最后:


上面都是自己整理好的!我就把资料贡献出来给有需要的人!顺便求一波关注。

学习我们是认真的,拿大厂offer是势在必得的。 java(想了解更多点一下哦)

原文链接:https://www.tuicool.com/articles/EVbmIzR

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容