Javascript數(shù)據(jù)類型知多少？
正如你所知道的，數(shù)據(jù)類型是作為js的入門知識(shí)點(diǎn)，在整個(gè)js的學(xué)習(xí)過程中也是尤為重要的。數(shù)據(jù)類型看起來(lái)簡(jiǎn)單，但是圍繞著其衍生的邊界數(shù)據(jù)類型判斷問題、深拷貝淺拷貝問題對(duì)于新手而言是難以理解的。
一、數(shù)據(jù)類型
JavaScript 是一種弱類型或者說動(dòng)態(tài)類型，這就意味著你不需要提前聲明變量的類型，在程序運(yùn)行的過程中，類型會(huì)被自動(dòng)確定。這就意味著你可以使用同一個(gè)變量保存不同類型的數(shù)據(jù).
js內(nèi)存分為棧內(nèi)存(stack)和堆內(nèi)存(heap)
- 棧內(nèi)存：是一種特殊的線性表，它具有后進(jìn)先出的特性，存放基本類型。
- 堆內(nèi)存：存放引用類型(在棧內(nèi)存中存一個(gè)基本類型值保存對(duì)象在堆內(nèi)存中的地址，用于引用這個(gè)對(duì)象)。
數(shù)據(jù)類型根據(jù)存儲(chǔ)方式分為兩類：
- 基本數(shù)據(jù)類型(簡(jiǎn)單數(shù)據(jù)類型、原始數(shù)據(jù)類型)：值存儲(chǔ)在棧內(nèi)存中，被引用或拷貝時(shí)，會(huì)創(chuàng)建一個(gè)完全相等的變量。占用空間小、大小固定，通過按值來(lái)訪問，屬于被頻繁使用的數(shù)據(jù)。
- 引用數(shù)據(jù)類型(復(fù)雜數(shù)據(jù)類型)：地址存儲(chǔ)在棧內(nèi)存中，值存在了堆內(nèi)存中，多個(gè)引用會(huì)指向同一個(gè)地址。占據(jù)空間大、占用內(nèi)存不固定。如果存儲(chǔ)在棧中，將會(huì)影響程序運(yùn)行的性能;引用數(shù)據(jù)類型在棧中存儲(chǔ)了指針，該指針指向堆中該實(shí)體的起始地址。當(dāng)解釋器尋找引用值時(shí)，會(huì)首先檢索其在棧中的地址，取得地址后從堆中獲得實(shí)體。
根據(jù)上面的標(biāo)準(zhǔn)劃分?jǐn)?shù)據(jù)類型，常見的有：
- 基本數(shù)據(jù)類型：String、Number、Boolean、Undefined、Null、Symbol、BigInt
- 復(fù)雜數(shù)據(jù)類型：Object、Array、Date、Function、RegExp等
未命名文件 (1).png
二、數(shù)據(jù)類型的檢測(cè)
通常的數(shù)據(jù)類型的檢測(cè)有三種方法：
- typeof
- instanceof
2.1 typeof
使用typeof進(jìn)行基礎(chǔ)數(shù)據(jù)類型(null除外)檢測(cè)，但是對(duì)于引用數(shù)據(jù)類型，除了function外，其它的均無(wú)法進(jìn)行判斷。
- typeof "yichuan"; //"string"
- typeof 18; //"number"
- typeof undefined; //undefined
- typeof true; //boolean
- typeof Symbol(); //"symbol"
- typeof null; //"object"
- typeof []; //"object"
- typeof {}; //"object"
- typeof console; //"object"
- typeof console.log; //"function"
2.2 instanceof
使用instanceof是通過原型鏈進(jìn)行查找，可以準(zhǔn)確地判斷復(fù)雜引用數(shù)據(jù)類型，但是不能準(zhǔn)確判斷基礎(chǔ)數(shù)據(jù)類型。
- let Fun = Function(){};
- let fun = new Fun();
- fun instanceof Fun;//true
- let str = new String("yichuan");
- str instanceof String;//true
- let str = "yichuan";
- str instanceof String;//false
2.3 Object.prototype.toString.call()
Object.prototype.toString方法返回對(duì)象的類型字符串，因此可用來(lái)判斷一個(gè)值的類型。因?yàn)閷?shí)例對(duì)象有可能會(huì)自定義toString方法，會(huì)覆蓋Object.prototype.toString，所以在使用時(shí)，最好加上call。所有的數(shù)據(jù)類型都可以使用此方法進(jìn)行檢測(cè)，且非常精準(zhǔn)。
- Object.prototype.toString.call("yichuan");//["object String"]
- Object.prototype.toString.call(18);//["object Number"]
- Object.prototype.toString.call(true);//["object Boolean"]
- Object.prototype.toString.call(null);//["object Null"]
- Object.prototype.toString.call(new Symbol());//["object Symbol"]
- Object.prototype.toString.call({});//["object Object"]
- Object.prototype.toString.call([]);//["object Array"]
- Object.prototype.toString.call(/123/g);//["object RegExp"]
- Object.prototype.toString.call(function(){});//["object Function"]
- Object.prototype.toString.call(new Date());//["object Date"]
- Object.prototype.toString.call(document);//["object HTMLDocument"]
- Object.prototype.toString.call(window);//["object Window"]
我們可以看到此輸出的結(jié)果都是["object Xxxx"]首字母大寫。
2.4 通用的數(shù)據(jù)類型判斷方法
- function getType(obj){
- //先判斷輸入的數(shù)據(jù)判斷返回結(jié)果是否為object
- if(typeof obj !== "object"){
- return typeof obj;
- }
- // 對(duì)于typeof返回object的，再進(jìn)行具體的判斷，使用正則返回結(jié)果，切記正則中間有個(gè)空格哦
- return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/,"$1");
- }
切記：
- 使用typeof返回的類型是小寫
- 使用toString返回的類型是大寫
- getType("yichuna");//"string"
- getType(18);//"number"
- getType(true);//"boolean"
- getType(undefined);//"undefined"
- getType();//"undefined"
- getType(null);//"Null"
- getType({});//"Object"
- getType([]);//"Array"
- getType(function(){});//"Function"
- getType(new Date());//"Date"
- getType(/123/g);//"RegExp"
三、數(shù)據(jù)類型轉(zhuǎn)換
3.1 強(qiáng)制類型轉(zhuǎn)換
常見的強(qiáng)制類型轉(zhuǎn)換方法有：
- Number()
- String()
- Boolean()
- parseInt()
- parseFloat()
- toString()
3.2 Number()方法的強(qiáng)制轉(zhuǎn)換規(guī)則
- 布爾值 true和false分別被轉(zhuǎn)換為1和0
- 數(shù)字 返回本身
- null 返回0
- undefined 返回NaN
- 字符串
- 如果字符串中只包含數(shù)字，則將其轉(zhuǎn)換為十進(jìn)制
- 如果字符串中只包含有有效的浮點(diǎn)格式，將其轉(zhuǎn)換為浮點(diǎn)數(shù)值
- 如果是空字符串，將其轉(zhuǎn)換為0
- 如果不是以上格式的字符串，則均返回NaN
- Symbol 拋出異常
3.3 Boolean()方法的強(qiáng)制轉(zhuǎn)換規(guī)則
undefined、null、false、""、0(包括+0、-0)、NaN轉(zhuǎn)換出來(lái)都是false，其余類型轉(zhuǎn)換都是true。特別注意：Boolean({})轉(zhuǎn)換為true
3.4 隱式類型轉(zhuǎn)換==
- 如果類型相同，無(wú)需進(jìn)行類型轉(zhuǎn)換
- 如果其中一個(gè)操作值為null或undefined，那么另一個(gè)操作符必須是null或undefined才會(huì)返回true，否則均返回false
- 如果其中一個(gè)值是Symbol類型，那么返回false
- 如果其中一個(gè)操作知為Boolean，那么轉(zhuǎn)為number
- 兩個(gè)操作值均為string和number類型，那么將字符串轉(zhuǎn)為number
- 如果一個(gè)操作值為object，且另一個(gè)為string、number或symbol，就會(huì)把object轉(zhuǎn)為原始數(shù)據(jù)類型判斷
小試牛刀：
- null == undefined; //true
- null == 0;//false
- "" == null;//false
- "" == 0;//true 會(huì)轉(zhuǎn)為number類型再進(jìn)行判斷
- "123" == 123;//true
- 0 == false;//true
- 1 == true;//true
3.5 隱式類型轉(zhuǎn)換+
"+"號(hào)操作符，不僅可以用于數(shù)字相加，還可以用于字符串拼接。
- 如果其中一個(gè)是字符串，另外一個(gè)是number、undefined、null或boolean，則調(diào)用toString()方法進(jìn)行字符串拼接
- 如果是純字符串、數(shù)組、正則等，則默認(rèn)調(diào)用對(duì)象的轉(zhuǎn)換方法會(huì)存在優(yōu)先級(jí)，然后進(jìn)行拼接
- 如果字符串和bigInt進(jìn)行相加，會(huì)先將bigInt轉(zhuǎn)為字符串
- 如果number類型與undefined相加，則得到NaN
- 1 + 2;//3
- 1 + "2";//"12"
- "1" + undefined;//"1undefined"
- "1" + null;//"1null"
- "1" + true;//"1true"
- "1" + 1n;//"11" 字符串和bigInt進(jìn)行相加，會(huì)先將bigInt轉(zhuǎn)為字符串
- 1 + undefined;//NaN undefined會(huì)先轉(zhuǎn)為NaN
- 1 + null;//1 null轉(zhuǎn)為0
- 1 + true;//2
- 1 + 1n;//Error
3.6 object的轉(zhuǎn)換規(guī)則
- 如果部署了Symbol.toPrimitive方法，優(yōu)先調(diào)用再返回
- 調(diào)用valueOf()，如果轉(zhuǎn)換為基礎(chǔ)類型則返回
- 調(diào)用toString()，如果轉(zhuǎn)換為基礎(chǔ)數(shù)據(jù)類型則返回
- 如果都沒有返回基礎(chǔ)數(shù)據(jù)類型，則會(huì)報(bào)錯(cuò)
四、深拷貝和淺拷貝
在js的編程中經(jīng)常需要進(jìn)行數(shù)據(jù)進(jìn)行復(fù)制，那么什么時(shí)候使用深拷貝、什么時(shí)候使用淺拷貝呢，是開發(fā)過程中需要思考的?如何提升自己手寫js的能力，以及對(duì)一些邊界情況的深入思考能力呢?
有兩個(gè)重要問題：
- 拷貝一個(gè)很多嵌套的對(duì)象要如何實(shí)現(xiàn)呢?
- 深拷貝寫成什么程度才能讓面試官滿意呢?
4.1 淺拷貝的原理和實(shí)現(xiàn)
自己創(chuàng)建一個(gè)新的對(duì)象，來(lái)接受要重新復(fù)制或引用的對(duì)象值。
- 如果對(duì)象屬性是基本數(shù)據(jù)類型，復(fù)制的就是基本數(shù)據(jù)類型的值給新對(duì)象;
- 如果對(duì)象屬性是引用數(shù)據(jù)類型，賦值的則是內(nèi)存中的地址，如果其中一個(gè)對(duì)象改變了這個(gè)內(nèi)存中的地址，肯定會(huì)影響另外一個(gè)對(duì)象
4.1.1 Object.assign
Object.assign是es6中object的一個(gè)方法，該方法可以用于js對(duì)象的合并等多個(gè)用途，其中一個(gè)用途就是可以進(jìn)行淺拷貝。
- Object.assign(target,...sources);//target目標(biāo)對(duì)象，sources待拷貝的對(duì)象
注意：
- Object.assign不會(huì)拷貝對(duì)象的繼承屬性
- Object.assign不會(huì)拷貝對(duì)象的不可枚舉屬性
例如：
- let obj = {};
- let obj1 = {
- name:"yichuan",
- scores:{
- math:100,
- Chinese:100
- }
- };
- Object.assign(obj,obj1);
- console.log(obj);//{name:"yichuan",scores:{math:100,Chinese:100}}
改變目標(biāo)對(duì)象的值：我們可以看到下面改變了目標(biāo)對(duì)象的值，會(huì)引起待拷貝對(duì)象的值的改變。
- let obj = {};
- let obj1 = {
- name:"yichuan",
- scores:{
- math:100,
- Chinese:100
- }
- };
- Object.assign(obj,obj1);
- console.log(obj);//{name:"yichuan",scores:{math:100,Chinese:90}}
- obj.scores.Chinese = 10;
- console.log(obj);//{name:"yichuan",scores:{math:100,Chinese:90}}
- console.log(obj1);//{name:"yichuan",scores:{math:100,Chinese:90}}
不可拷貝不可枚舉屬性
- let obj1 = {
- user:{
- name:"yichuan",
- age:18
- },
- idCard:Symbol(1)
- };
- Object.defineProperty(obj1,"innumerable",{
- value:"不可枚舉屬性",
- enumerable:false
- });
- let obj2 = {};
- Object.assign(obj2,obj1);
- obj1.user.name = "onechuan";
- console.log("obj1",obj1);//{user: {…}, idCard: Symbol(1), innumerable: '不可枚舉屬性'}
- console.log("obj2",obj2);//{user: {…}, idCard: Symbol(1)} 我們可以看到并沒有innumerable屬性
4.1.2 展開運(yùn)算符
- /* 對(duì)象的拷貝 */
- let obj1 = {
- user:{
- name:"yichuan",
- age:18
- },
- school:"實(shí)驗(yàn)小學(xué)"
- };
- let obj2 = {...obj1};
- obj2.school = "五道口男子技校";
- console.log(obj1);//{school: "實(shí)驗(yàn)小學(xué)",user: {name: 'yichuan', age: 18}}
- obj2.user.age = 19;
- console.log(obj2);//{school: "實(shí)驗(yàn)小學(xué)",user: {name: 'yichuan', age: 19}}
- /* 數(shù)組的拷貝 */
- let arr = ["red","green","blue"];
- let newArr = [...arr];
- console.log(arr);//['red', 'green', 'blue']
- console.log(newArr);//['red', 'green', 'blue']
4.1.3 concat拷貝數(shù)組
數(shù)組的concat方法其實(shí)也是淺拷貝
- let arr = ["red","green","blue"];
- let newArr = arr.concat();
- newArr[1] = "black";
- console.log(arr);//["red","green","blue"];
- console.log(newArr);//["red","black","blue"];
4.1.4 slice拷貝數(shù)組
slice方法僅針對(duì)數(shù)組類型，arr.slice(begin,end);
- let arr = ["red","green","blue"];
- let newArr = arr.slice();
- newArr[1] = "black";
- console.log(arr);//["red","green","blue"];
- console.log(newArr);//["red","black","blue"];
4.1.5 手寫淺拷貝
- 對(duì)基本數(shù)據(jù)類型進(jìn)行最基本的拷貝
- 對(duì)引用數(shù)據(jù)類型開辟新的存儲(chǔ)，并且拷貝一層對(duì)象屬性
- function shallowClone(target){
- //先要判斷是否為對(duì)象數(shù)據(jù)類型
- if(typeof target === "object" && target !== null){
- //判斷輸入的是object類型還是數(shù)組類型
- const cloneTarget = Array.isArray(target) ?[]:{};
- //遍歷目標(biāo)對(duì)象元素
- for(let prop in target){
- //判斷cloneTarget對(duì)象上是否有此屬性，沒有進(jìn)行拷貝
- if(!cloneTarget.hasOwnProperty(prop)){
- cloneTarget[prop] = target[prop]
- }
- }
- return cloneTarget;
- }
- return target;
- }
4.2 深拷貝的原理和實(shí)現(xiàn)
前面我們知道淺拷貝只是創(chuàng)建了一個(gè)新的對(duì)象，復(fù)制了原有對(duì)象的基本類型的值。對(duì)于復(fù)雜引用數(shù)據(jù)類型，其在堆內(nèi)存中完全開辟了一塊內(nèi)存地址，并將原有對(duì)象完全復(fù)制過來(lái)存放。
深拷貝就是將一個(gè)對(duì)象從內(nèi)存中完整地拷貝出來(lái)給目標(biāo)對(duì)象，并在堆內(nèi)存中開辟新的空間進(jìn)行存儲(chǔ)新對(duì)象的值，且新對(duì)象的值改變不會(huì)影響原對(duì)象，也就是實(shí)現(xiàn)了二者的隔離。
4.2.1 JSON.stringify()
其實(shí)在實(shí)際開發(fā)過程使用最簡(jiǎn)單的深拷貝就是使用JSON.stringify()配合JSON.parse()。但其實(shí)是有缺陷的，不影響簡(jiǎn)單使用。注意：
- let obj1 = {
- user:{
- name:"yichuan",
- age:18
- },
- school:"實(shí)驗(yàn)小學(xué)"
- };
- let obj2 = JSON.parse(JSON.stringify(obj1));
- console.log(obj1);//{school: "實(shí)驗(yàn)小學(xué)",user: {name: 'yichuan', age: 18}}
- console.log(obj2);//{school: "實(shí)驗(yàn)小學(xué)",user: {name: 'yichuan', age: 18}}
- obj2.school = "門頭溝學(xué)員";
- obj2.user.age = 19;
- console.log(obj1);//{school: "實(shí)驗(yàn)小學(xué)",user: {name: 'yichuan', age: 18}}
- console.log(obj2);//{school: "門頭溝學(xué)院",user: {name: 'yichuan', age: 19}}
4.2.2 簡(jiǎn)易手寫深拷貝
作為簡(jiǎn)易版手寫深拷貝，只能完成基礎(chǔ)的拷貝功能，也存在一些缺陷：
- 不能拷貝不可枚舉的屬性以及symbol類型
- 只能針對(duì)普通的引用類型的值做遞歸復(fù)制
- 對(duì)象的屬性里面成環(huán)，即循環(huán)引用沒有得到妥善解決
- function deepClone(obj){
- const cloneObj = {};
- //遍歷對(duì)象鍵名
- for(let key in obj){
- //判斷是否為對(duì)象類型
- if(typeof obj[key]==="object"){
- //是對(duì)象就再次調(diào)用函數(shù)進(jìn)行遞歸拷貝
- cloneObj[key] = deepClone(obj[key]);
- }else{
- //是基本數(shù)據(jù)類型的話，就直接進(jìn)行復(fù)制值
- cloneObj[key] = obj[key];
- }
- }
- return cloneObj;
- }
- const obj1 = {
- user:{
- name:"yichuan",
- age:18
- },
- school:"實(shí)驗(yàn)小學(xué)"
- }
- let obj2 = deepClone(obj1);
- obj1.user.age = 19;
- console.log(obj2);//{school: "實(shí)驗(yàn)小學(xué)",user: {name: 'yichuan', age: 18}}
4.2.3 優(yōu)化版手寫深拷貝
對(duì)于上面簡(jiǎn)易版的深拷貝，很顯然面試官是不買賬的，為此我們針對(duì)遞歸進(jìn)行升級(jí)處理。
- 針對(duì)能夠遍歷對(duì)象的不可枚舉屬性以及Symbol類型，我們可以使用Reflect.ownKeys方法
- 當(dāng)參數(shù)為Date、RegExp類型，則直接生成一個(gè)新的實(shí)例返回
- 利用Object的getOwnPropertyDescriptors方法可以獲得對(duì)象的所有屬性，以及對(duì)應(yīng)的特性，順便結(jié)合Object.create()方法創(chuàng)建新對(duì)象，并繼承傳入原對(duì)象的原型鏈
- 利用WeakMap類型作為Hash表，因?yàn)閃eakMap是弱引用類型，可以有效防止內(nèi)存泄漏，作為檢測(cè)循環(huán)引用有很大的幫助。如果存在循環(huán)，則引用直接返回WeakMap存儲(chǔ)的值
- const isComplexDataType = (obj) => (typeof obj === 'object' || typeof obj === 'function') && obj !== null;
- function deepClone(obj, hash = new WeakMap()) {
- //判斷是否為日期類型
- if (obj.constructor === Date) return new Date(obj);
- //判斷是否正則對(duì)象
- if (obj.constructor === RegExp) return new RegExp(obj);
- //如果循環(huán)引用了，就使用weakMap進(jìn)行解決
- if (hash.has(obj)) return hash.get(obj);
- const allDesc = Object.getOwnPropertyDescriptors(obj);
- //遍歷傳入?yún)?shù)所有鍵的特性
- const cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);
- //繼承原型鏈
- hash.set(obj, cloneObj);
- for (const key of Reflect.ownKeys(obj)) {
- cloneObj[key] = isComplexDataType(obj[key]) && typeof obj[key] !== 'function' ? deepClone(obj[key]) : obj[key];
- }
- return cloneObj;
- }
- const obj1 = {
- num: 2021,
- str: 'jue',
- bool: true,
- nul: null,
- arr: ['ref', 'green', 'blue'],
- date: new Date(0),
- reg: new RegExp('/123/g'),
- user: {
- name: 'yichuan',
- age: 18
- },
- school: '實(shí)驗(yàn)小學(xué)'
- };
- const obj2 = deepClone(obj1);
- obj1.user.age = 19;
- console.log(obj2);//{arr: ['ref', 'green', 'blue'],bool: true,date: Thu Jan 01 1970 08:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) ,nul: null,num: 2021,reg: /\/123\/g/,school: "實(shí)驗(yàn)小學(xué)",str: "jue",user: {name: 'yichuan', age: 18}}
5參考學(xué)習(xí)
《如何寫出一個(gè)驚艷面試官的深拷貝?》
《JavaScript基本數(shù)據(jù)類型和引用數(shù)據(jù)類型》
《Javascript核心原理精講》
6寫在最后
其實(shí)在實(shí)際開發(fā)和使用過程中，很多人對(duì)于深拷貝的細(xì)節(jié)問題理解并不是很透徹，如果能夠更深層次的研究細(xì)節(jié)，你就會(huì)發(fā)現(xiàn)此部分內(nèi)容對(duì)于了解更深層次js的底層原理有所幫助。這篇文章是作為對(duì)數(shù)據(jù)類型、數(shù)據(jù)類型的檢測(cè)、數(shù)據(jù)類型強(qiáng)制和隱藏轉(zhuǎn)換、深淺拷貝的簡(jiǎn)要總結(jié)，希望對(duì)大家有所幫助。
