一诽凌、數(shù)據(jù)類(lèi)型
1铸屉、六種基本數(shù)據(jù)類(lèi)型
- undefined
- null
- string
- number(注意:NaN)
- boolean
- symbol(ES6)
2瓶摆、一種引用類(lèi)型
- Object(包括Array和Function)
3淋淀、檢測(cè)方式
1)typeof(...)
用來(lái)檢測(cè):undefined、string俱笛、number、boolean传趾、symbol迎膜、object、function
無(wú)法檢測(cè)引用類(lèi)型里的Array
2)xx instanceof type
用來(lái)檢測(cè)引用類(lèi)型是Array/Function/Object
無(wú)法檢測(cè)基本類(lèi)型
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);// 報(bào)錯(cuò)
console.log(null instanceof Null);//報(bào)錯(cuò)
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
但是如果創(chuàng)建的對(duì)象更改了原型墨缘,是無(wú)法檢測(cè)到最初的類(lèi)型
function Fn(){}; //原來(lái)是方法
Fn.prototype=new Array(); //改變?cè)蜑閿?shù)組
var f=new Fn();
console.log(f.constructor===Fn); // false
console.log(f.constructor===Array); // true
4)其他補(bǔ)充方法
- null檢測(cè)方式:a === null
- Array檢測(cè)方式:Array.isArray([...])
5)萬(wàn)金油方法:Object.prototype.toString.call()
能檢測(cè)所有類(lèi)型星虹,返回 "[object type]", 其中type是對(duì)象類(lèi)型
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區(qū)別
- 基本沒(méi)區(qū)別镊讼,都表示“無(wú)”
- 細(xì)微區(qū)別:
null表示"沒(méi)有對(duì)象"宽涌,即該處不應(yīng)該有值。典型用法是:
(1) 作為函數(shù)的參數(shù)蝶棋,表示該函數(shù)的參數(shù)不是對(duì)象卸亮。
(2) 作為對(duì)象原型鏈的終點(diǎn)。
undefined表示"缺少值"玩裙,就是此處應(yīng)該有一個(gè)值兼贸,但是還沒(méi)有定義段直。典型用法是:
(1)變量被聲明了,但沒(méi)有賦值時(shí)溶诞,就等于undefined鸯檬。
(2) 調(diào)用函數(shù)時(shí),應(yīng)該提供的參數(shù)沒(méi)有提供螺垢,該參數(shù)等于undefined喧务。
(3)對(duì)象沒(méi)有賦值的屬性,該屬性的值為undefined枉圃。
(4)函數(shù)沒(méi)有返回值時(shí)功茴,默認(rèn)返回undefined。
二孽亲、棧和堆
1坎穿、定義
- 棧stack為自動(dòng)分配的內(nèi)存空間,它由系統(tǒng)自動(dòng)釋放返劲;
- 堆heap則是動(dòng)態(tài)分配的內(nèi)存玲昧,大小不定也不會(huì)自動(dòng)釋放。
?2旭等、與數(shù)據(jù)類(lèi)型的關(guān)系
- 基本數(shù)據(jù)類(lèi)型存放在棧里酌呆,=:直接傳值
-
引用數(shù)據(jù)類(lèi)型存放在堆里,=:傳址
題目:
三搔耕、淺/深拷貝
1隙袁、基本概念
前奏:淺/深拷貝主要針對(duì)引用類(lèi)型
因?yàn)閷?duì)于基本數(shù)據(jù)類(lèi)型而言:
var a = 2
var b = a
a = 1
console.log(a, b) // 1 ,2 ——a,b指向棧里不同數(shù)據(jù)
而對(duì)于引用類(lèi)型而言:
var a = {c: 2}
var b = a
a.c = 1
console.log(a.c,b.c) //1,1 —— a,b指向堆里同份數(shù)據(jù)
為了切斷引用類(lèi)型a和b的聯(lián)系弃榨,所以我們需要淺/深拷貝菩收,
- 淺拷貝:一層拷貝
- 深拷貝:無(wú)限層拷貝
2、兩大類(lèi):數(shù)組/對(duì)象
數(shù)組的淺拷貝:數(shù)組里的引用類(lèi)型都是淺拷貝的
/**
數(shù)組的淺拷貝
**/
//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) // 取數(shù)組最后一個(gè)元素
arr3[2] = 100
console.log(arr3,arr4) // [ 1, 2, 100 ] [ 3 ]
//看起來(lái)修改舊數(shù)組不改變新數(shù)組,像是深拷貝了
//但是9俦病O湮琛!
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 } ]
// 如果數(shù)組里元素是個(gè)引用類(lèi)型拳亿,那么舊數(shù)組里這個(gè)元素被改變晴股,會(huì)影響新數(shù)組
// 所以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 } ]
對(duì)象的淺拷貝
// 1电湘、 對(duì)象淺拷貝 - Object.assign
function shallowCopy4(origin) {
return Object.assign({},origin)
}
//2、 對(duì)象淺拷貝 - 擴(kuò)展運(yùn)算符
// 擴(kuò)展運(yùn)算符(...)用于取出參數(shù)對(duì)象的所有可遍歷屬性,拷貝到當(dāng)前對(duì)象之中
function shallowCopy5(origin) {
return {
...origin
}
}
?深拷貝
1寂呛、最方便的JSON正反序列化
function deepClone1(origin) {
return JSON.parse(JSON.stringify(arr));
}
原理:利用 JSON.stringify 將js對(duì)象序列化(JSON字符串)怎诫,再使用JSON.parse來(lái)反序列化(還原)js對(duì)象
缺點(diǎn):缺點(diǎn)就是無(wú)法拷貝 undefined、function贷痪、symbol 這類(lèi)特殊的屬性值幻妓,拷貝完變成null
2、遞歸實(shí)現(xiàn)
function DeepClone(originObj) {
// 先判斷obj是數(shù)組還是對(duì)象
let newObj;
if(originObj instanceof Array ) {
newObj = []
} else if (originObj instanceof Object) {
newObj = {}
}
for (let key in originObj) {
// 判斷子元素類(lèi)型
if (typeof(originObj[key]) === "object") {
// 如果子元素為object 遞歸一下
newObj[key] = DeepClone(originObj[key])
} else {
newObj[key] = originObj[key]
}
}
return newObj
}
參考:JS專(zhuān)題之深淺拷貝劫拢、 深拷貝的終極探索