整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
為 JavaScript 的??級知識點，JS 數(shù)據(jù)類型在整個 JavaScript 的學(xué)習(xí)過程中其實尤為重要。因為
在 JavaScript 編程中，經(jīng)常會遇到邊界數(shù)據(jù)類型條件判斷問題，很多代碼只有在某種特定的數(shù)據(jù)
類型下，才能可靠地執(zhí)?。
希望本章的學(xué)習(xí)，能讓你熟練掌握數(shù)據(jù)類型的判斷以及轉(zhuǎn)換等知識，在遇到數(shù)據(jù)類型判斷，隱式轉(zhuǎn)換等問題時，
可以輕松應(yīng)對。
Javascript數(shù)據(jù)類型有下面的8種
其中，前面7種為基礎(chǔ)類型，最后 1 種為引用類型，這也是要重點學(xué)習(xí)的。
因為各種不同的數(shù)據(jù)類型，創(chuàng)建的對象，最后都存放在內(nèi)容當中。
因此數(shù)據(jù)類型大概可以分為兩類來進行存儲
關(guān)于引用類型，“共享”的概念，可以通過兩段代碼來講解，
let a = {
site: "helloworld.net",
name: "兔哥",
};
let b = a;
console.log(a.site); //輸出: helloworld.net
b.site = "csdn.net";
console.log(a.site); //輸出：csdn.net
console.log(b.site); //輸出：csdn.net上面的例子比較簡單，有一個對象 a , 又賦值給了 b , 結(jié)果就是a, b 是引用類型，并且指向同一塊內(nèi)存
a對象修改，b會受影響 ， b對象修改，a會受影響 。
從打印結(jié)果就可以看出來：這兩個值都指向同一塊內(nèi)存，一個發(fā)生了變化 ，另一個也跟著發(fā)生了變化 。
其實，對于引用類型來說，變量保存的是地址，并不是真實的值，通過地址，找到內(nèi)存，才能從內(nèi)存中讀出真實的值。
下面的例子能驗證。
let a = {
name: "兔哥",
age: 18,
};
function change(obj) {
obj.age = 20;
obj = {
name: "張三",
age: 30,
};
return obj;
}
let b = change(a);
console.log(b.age); //輸出：30
console.log(a.age); //輸出：20
console.log(a); //輸出 ：{ name: '兔哥', age: 20 }
console.log(b); //輸出 ：{ name: '張三', age: 30 }是不是和你想象的有區(qū)別？需要注意的是，這里的 function 給我們帶來了不一樣的東西。
原因如下 ：
結(jié)論如下：
數(shù)據(jù)類型也是面試過程中，經(jīng)常會被遇到的問題。
比如：如何判斷是否為數(shù)組？
而且在平常寫代碼過程中，也會經(jīng)常用到。
很多人只知道用 typeof 來判斷，但這樣的回答是不能夠讓面試官滿意的。
所以我們要加深對 JS 數(shù)據(jù)類型的理解，做到對各種數(shù)據(jù)類型的判斷方法了然于胸
再進行歸納總結(jié)，這樣才能徹底掌握數(shù)據(jù)類型的判斷方法。
這是最常見的一種方法，來一段代碼，快速了解用法。
typeof 10 //‘number’
typeof '10' //‘string’
typeof undefined //‘undefined’
typeof Symbol() //‘symbol’
typeof [] //‘object’
typeof {} //‘object’
typeof console //‘object’
typeof console.log //‘object’
typeof null //‘object’最后一種要注意：判斷null ，不要用typeof null ， 雖然也會返回 object ，但是這是一個JS的bug
直接用 if( x === null) 判斷就行
我們 new ?個對象，那么這個新對象就是它原型鏈繼承上?的對象了
通過 instanceof 我們能判斷這個對象是否是之前那個構(gòu)造函數(shù)?成的對象
這樣就基本可以判斷出這個新對象的數(shù)據(jù)類型。下?通過代碼來了解?下。
let Phone = function () {};
let apple = new Phone();
console.log(apple instanceof Phone); //true
let phone = new String("小米手機");
console.log(phone instanceof String); //true
let str = "www.helloworld.net";
console.log(str instanceof String); //false上面就是用instanceof 判斷數(shù)據(jù)類型的大概流程，那么如果讓你實現(xiàn)一個instanceof的底層實現(xiàn)，你會怎么寫。
請看下面代碼：
function myInstanceof(left, right) {
// 這里先用typeof來判斷基礎(chǔ)數(shù)據(jù)類型，如果是，直接返回false
if (typeof left !== "object" || left === null)
return false;
// getProtypeOf是Object對象自帶的API，能夠拿到參數(shù)的原型對象
let proto = Object.getPrototypeOf(left);
while (true) {
//循環(huán)往下尋找，直到找到相同的原型對象
if (proto === null)
return false;
//找到相同原型對象，返回true
if (proto === right.prototype)
return true;
proto = Object.getPrototypeof(proto);
}
}
// 驗證一下自己實現(xiàn)的myInstanceof是否OK
console.log(myInstanceof(new Number(100), Number)); // true
console.log(myInstanceof(100, Number)); // false
現(xiàn)在你知道了兩種判斷數(shù)據(jù)類型的?法，那么它們之間有什么差異呢？
總結(jié)了下?兩點：
function 類型以外，其他的也?法判斷。
總之，不管單獨? typeof 還是 instanceof，都不能滿?所有場景的需求，?只能通過?者混寫的?式
來判斷。
但是這種?式判斷出來的其實也只是?多數(shù)情況，并且寫起來也?較難受，你也可以試著寫?下。
其實我個?還是?較推薦下?的第三種?法，相?上述兩個??，能更好地解決數(shù)據(jù)類型檢測問題
toString() 是Object的原型?法，調(diào)?該?法，可以統(tǒng)?返回格式為 [object XXX]的字符串，其中
XXX 就是對象的類型。對于 Object 對象，直接調(diào)? toString() 就能返回[object Object]；?對于其他對
象，則需要通過 call 來調(diào)?，才能返回正確的類型信息。我們來看?下代碼。
Object.prototype.toString( {} ); // "[object Object]"
Object.prototype.toString.call( {} ); // 同上結(jié)果，加上call也ok
Object.prototype.toString.call(100); // "[object Number]"
Object.prototype.toString.call("100"); // "[object String]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(function () {}); // "[object Function]"
Object.prototype.toString.call(null); //"[object Null]"
Object.prototype.toString.call(undefined); //"[object Undefined]"
Object.prototype.toString.call(/123/g); //"[object RegExp]"
Object.prototype.toString.call(new Date()); //"[object Date]"
Object.prototype.toString.call([]); //"[object Array]"
Object.prototype.toString.call(document); //"[object HTMLDocument]"
Object.prototype.toString.call(window); //"[object Window]"從上?這段代碼可以看出，Object.prototype.toString.call() 可以很好地判斷引?類型，甚?可以把
document 和 window 都區(qū)分開來。
但是在寫判斷條件的時候?定要注意，使?這個?法最后返回統(tǒng)?字符串格式為 "[object XXX]" ，?這
?字符串??的 "XXX" ，第?個?字?要?寫（注意：使? typeof 返回的是?寫），這?需要多加留
意。
那么下?來實現(xiàn)?個全局通?的數(shù)據(jù)類型判斷?法，來加深你的理解，代碼如下。
function getType(obj) {
let type = typeof obj;
// 先進行typeof判斷，如果是基礎(chǔ)數(shù)據(jù)類型，直接返回
if (type !== "object") {
return type;
}
// 對于typeof返回結(jié)果是object的，再進行如下的判斷，正則返回結(jié)果
return Object.prototype.toString
.call(obj)
.replace(/^\[object (\S+)\]$/, "$1");
}
/* 代碼驗證，需要注意大小寫，哪些是typeof判斷，哪些是toString判斷？思考下 */
getType([]); // "Array" typeof []是object，因此toString返回
getType("100"); // "string" typeof 直接返回
getType(window); // "Window" toString返回
getType(null); // "Null"首字母大寫，typeof null是object，需toString來判斷
getType(undefined); // "undefined" typeof 直接返回
getType(); // "undefined" typeof 直接返回
getType(function () {}); // "function" typeof能判斷，因此首字母小寫
getType(/100/g); //"RegExp" toString返回至此，數(shù)據(jù)類型檢測的三種方式介紹完了，也給出了示例代碼，希望你可以對比著學(xué)習(xí)，使用。
下面我們來看下一個問題：數(shù)據(jù)類型的轉(zhuǎn)換。
在日常開發(fā)中，經(jīng)常會遇到數(shù)據(jù)類型的轉(zhuǎn)換問題
有時候需要主動進行強制轉(zhuǎn)換
有時候JS會進行隱式轉(zhuǎn)換，隱式轉(zhuǎn)換的時候就要多留心了。
"123" == 123; // false or true?
"" == null; // false or true?
"" == 0; // false or true?
[] == 0 // false or true?
null == undefined; // false or true?
Number(null); // 返回什么？
Number(""); // 返回什么？
parseInt(""); // 返回什么？
{}+10; // 返回什么？
let obj = {
[Symbol.toPrimitive]() {
return 200;
},
valueOf() {
return 300;
},
toString() {
return "Hello";
},
};
console.log(obj + 200); // 這里打印出來是多少？上?的問題相信你并不陌?，基本涵蓋了我們平常容易疏漏的?些情況，這就是在做數(shù)據(jù)類型轉(zhuǎn)
換時經(jīng)常會遇到的強制轉(zhuǎn)換和隱式轉(zhuǎn)換的?式，那么下?我就圍繞數(shù)據(jù)類型的兩種轉(zhuǎn)換?式詳細講解
?下，希望可以為你提供?些借鑒。
強制類型轉(zhuǎn)換?式包括 Number()、parseInt()、parseFloat()、toString()、String()、Boolean()，這?
種?法都?較類似，都是通過?身的?法來進?數(shù)據(jù)類型的強制轉(zhuǎn)換。
下面通過一段代碼來說明上面的規(guī)則
Number(true) //1
Number(false) //0
Number('0111') //111
Number(null) //0
Number('') //0
Number('abc') //NaN
Number(-0x11) //-17
Number(0x11) //17
其中，我分別列舉了?較常?的 Number 轉(zhuǎn)換的例?，它們都會把對應(yīng)的?數(shù)字類型轉(zhuǎn)換成數(shù)字類
型，?有?些實在?法轉(zhuǎn)換成數(shù)字的，最后只能輸出 NaN 的結(jié)果。
這個?法的規(guī)則是：除了 undefined、 null、 false、 ''、 0（包括 +0，-0）、 NaN 轉(zhuǎn)換出來是 false，
其他都是 true。
這個規(guī)則很簡單，沒有那么多規(guī)矩
Boolean(0) //false
Boolean(null) //false
Boolean(undefined) //false
Boolean(NaN) //false
Boolean(1) //true
Boolean(13) //true
Boolean('12') //true凡是通過邏輯運算符 (&&、 ||、 !)、運算符 (+、-、*、/)、關(guān)系操作符 (>、 <、 <= 、>=)、相等運算符
(==) 或者 if/while 條件的操作，如果遇到兩個數(shù)據(jù)類型不?樣的情況，都會出現(xiàn)隱式類型轉(zhuǎn)換。這?你
需要重點關(guān)注?下，因為?較隱蔽，特別容易讓?忽視。
下?著重講解?下?常?得?較多的“==”和“+”這兩個符號的隱式轉(zhuǎn)換規(guī)則
返回 true，否則都返回 false；
進?判斷（調(diào)? object 的 valueOf/toString ?法進?轉(zhuǎn)換）。
如果直接死記這些理論會有點懵，我們還是直接看代碼，這樣更容易理解?些，如下所示。
'+' 號操作符，不僅可以用作數(shù)字相加 ，還可以用作字符串拼接。僅當 '+' 兩邊都是數(shù)字時，進行的是加法運算
如果兩邊都是字符串，無須進行隱式類型轉(zhuǎn)換
除了上面規(guī)則，還有一些特殊規(guī)則
如果直接死記這些理論會有點懵，我們還是直接看代碼，這樣更容易理解?些，如下所示。
1 + 2 //3 常規(guī)情況
'1' + '2' //'12' 常規(guī)情況
'1' + undefined // '1undefined' , 規(guī)則1：undefined 轉(zhuǎn)成字符串
'1' + null // '1null' ，規(guī)則1：null轉(zhuǎn)成字符串
'1' + true // '1true', 規(guī)則1：true轉(zhuǎn)成字符串
'1' + 2 // '12' , 規(guī)則3， 字符串拼接
整體來看，如果數(shù)據(jù)中有字符串，JavaScript 類型轉(zhuǎn)換還是更傾向于轉(zhuǎn)換成字符串，因為第三條規(guī)則
中可以看到，在字符串和數(shù)字相加的過程中最后返回的還是字符串，這?需要關(guān)注?下。
了解了 '+' 的轉(zhuǎn)換規(guī)則后，我們最后再看?下 Object 的轉(zhuǎn)換規(guī)則。
對象轉(zhuǎn)換的規(guī)則，會先調(diào)?內(nèi)置的 [ToPrimitive] 函數(shù)，其規(guī)則邏輯如下：
直接理解有些晦澀，還是直接來看代碼，你也可以在控制臺??敲?遍來加深印象。
var obj = {
value: 1,
valueOf() {
return 2;
},
toString() {
return "3";
},
[Symbol.toPrimitive]() {
return 4;
},
};
console.log(obj + 1); // 輸出： 5 ， 因為有Symbol.toPrimitive方法，所以優(yōu)先調(diào)用這個方法，所以結(jié)果是 5
10 + {} // "10[object Object]" , 調(diào)用的是valueOf函數(shù)
// "1,2,,4,510" , 會先調(diào)用valueOf，結(jié)果是個數(shù)組
//不是基礎(chǔ)類型，然后再調(diào)用的是toString函數(shù)
[1,2,undefined,4,5] + 10 理解不到位，很容易引起在編碼過程中的 bug，得到?些意想不到的結(jié)果。
Javascript語言不像是其它語言一樣，Javascript是個殘缺的語言，沒有開發(fā)完就上了。
所以有些犄角旮旯的不符合常理的，我們知道就行了，沒必要記住，知道有那回事就行了
但是自己寫代碼的時候，一定要嚴格要求自己，一定要注意類型的問題
強制要求自己，按照強類型語言開發(fā)要求自己，不要做一些騷操作因為那代表不了技術(shù)水平
reamweaver的CSS面板分類
type(類型)
background(背景)
block(區(qū)塊)
box(方框) 或盒子意思
border(邊框)
list(列表)
positioning(定位)
extensions(擴展)
共八個部分
1. type(類型)
type面板主要是對文字的字體，大小，顏色，效果等基本樣式進行設(shè)置。
注意：屬性名帶*號的是指樣式效果不能在編輯文檔時顯示，要用瀏覽器打開才能看到效果。
(1)font-family：設(shè)置字體系列。什么叫字體系列呢?是指對文字設(shè)定幾個字體，當遇到第一個字體不能顯示的文字時會自動用系列中的第二個
字體或后面的字體顯示。
注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，
也可以直接手動在下拉框里寫字體名，字體之間用逗號隔開。中文網(wǎng)頁默認字體是宋體, 一般就空著不要選取任何字體。
默認值： not specified(取決于瀏覽器,系統(tǒng)默認的字體, 如: 微軟雅黑)
注意：
1.如果有漢字, 那么我們要加引號
2.如果有多個英文字母組成的單詞, 我們也要加引號; "microsoft yahei" 中間用空格隔開
3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...
為了避免在CSS中使用 font 或 font-family 設(shè)置中文字體時亂碼, 可以使用 Unicode 編碼來表示字體。
/* 示例:使用Unicode字體編碼設(shè)置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";(2)font-size：定義文字的大小。你可以通過選取數(shù)字和度量單位來選擇具體的字體大小，或者你也可以選擇一個相對的字體大小。
最好使用pixels作為單位，這樣不會在瀏覽器中文本變形。一般字體用比較標準的12px或14px, 默認值為16px。
注意：CSS中長度的單位分絕對長度單位和相對長度單位:
絕對長度單位有：
pt：磅(point)
mm、cn、in、pc：(毫米、厘米、英寸、活字)根據(jù)顯示的實際尺寸來確定長度。
此類單位不隨顯示器的分辨率改變而改變。
相對長度單位有：
px：(像素)根據(jù)顯示器的分辨率來確定長度。
em：當前文本的尺寸。例如：{font-size:2em}是指文字大小為原來的2倍。
比如自身font-size: 30px; 那么此時1em=30px;
ex：當前字母"x"的高度，一般為字體尺寸的一半。
%：是以當前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。
small、large：表示比當前小一個級別或大一個級別的尺寸。
默認值：medium(標準大小)
(3)font-style：定義字體樣式為normal、italic、oblique。默認設(shè)置為normal。
注意： italic 斜體 oblique 歪斜體 italic和oblique實際效果是一樣的。
默認值:normal
(4)line-height：設(shè)置文本所在行的行高。默認為normal。可以是行內(nèi)元素、行內(nèi)塊元素, 通常與height設(shè)置的高度值相同, 可以做到垂直居中的作用。
你也可以自己鍵入一個精確的數(shù)值并選取一個計量單位。
比較直觀的寫法用百分比, 例如140%是指行高等于文字大小的1.4倍。
最常用的方法: line-height:1.5em; /*行間距,相對數(shù)值,1.5倍行距,*/ 可有效的避免文字發(fā)生重疊
默認值： normal
(5)text-decoration：在文本中添加underline(下劃線)、overline(上劃線)、line-through(中劃線)、blink(閃爍效果)。
這些效果可以同時存在，將效果前的復(fù)選框選定即可。
注意：鏈接的默認設(shè)置是underline，我們可以通過選none去除下劃線。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持
默認值： none
(6)font-weight：給字體指定粗體字的磅值。
normal 默認值。定義標準的字符。
bold 定義粗體字符。
bolder 定義更粗的字符。
lighter 定義更細的字符。
100
200
300
400
500
600
700
800
900
inherit 規(guī)定應(yīng)該從父元素繼承字體的粗細。
定義由粗到細的字符。400 等同于 normal, 而 700 等同于 bold。
默認值: normal
(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫字母)時, 此樣式區(qū)域內(nèi)所有字母大寫。
normal表示正常的字體, 為默認值；
默認值: normal
(8)text-transform：將選區(qū)中每個單詞的第一個字母轉(zhuǎn)為大寫, 或者令單詞全部大寫或全部小寫。
參數(shù)：capitalize(單詞首字母大寫)、uppercase(轉(zhuǎn)換成大寫)、lowercase(轉(zhuǎn)換成小寫)、none(不轉(zhuǎn)換)。
默認值：none
(9)color：定義文字顏色。包括對表單輸入的文字顏色。
CSS中顏色的值有三種表示方法：
#RRGGBB格式，是由紅綠藍三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進制正整數(shù)。
例如：#FF0000表示紅色，#FFFF00表示黃色。
rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。
用顏色名稱。CSS可以使用已經(jīng)定義好的顏色名稱。例如：red表示紅色, yellow表示黃色。
顏色值的縮寫:
p{color:#000000} 可以縮寫為：p{color:#000}
p{color:#336699} 可以縮寫為：p{color:#369}
默認值： not specified
color: transparent; 透明色
rgba() 解釋: rgba(紅0-255, 綠0-255, 藍0-255, 透明度0-1)
注意: 如果文字的顏色通過單獨的類選擇去設(shè)置沒有改變顏色, 則應(yīng)該通過組合選擇器(.header .top .topR .blue)去設(shè)置, 改變它的優(yōu)先級。
2. background(背景)
background面板主要是對元素的背景進行設(shè)置，包括背景顏色、背景圖象、背景圖象的控制。
一般是對body(頁面)、table(表格)、div(區(qū)域)的設(shè)置。
(1)background-color：設(shè)置元素的背景色。包括對input表單輸入框的背景顏色;
默認值: transparent(背景顏色為透明)
rgba() 解釋: rgba(紅0-255, 綠0-255, 藍0-255, 透明度0-1) 一般用于背景色
(2)background-image：設(shè)置元素的背景圖像。
默認值:none
CSS3支持多重背景圖,只要加上一個url指定圖片路徑,并用逗號(,)將兩組url分隔就可以了
background-image:url(a.jpg),url(b.jpg);base64使用
background-image: url("data:image/png;base64,iVBORw0KGgo=...");(3)background-repeat：確定背景圖像是否以及如何重復(fù)。
repeat 默認值。背景圖像將在垂直方向和水平方向重復(fù)。
repeat-x 背景圖像將在水平方向重復(fù)。
repeat-y 背景圖像將在垂直方向重復(fù)。
no-repeat 背景圖像將僅顯示一次。
inherit 規(guī)定應(yīng)該從父元素繼承background-repeat屬性的設(shè)置。
注意：如果定義的元素的body，可以控制頁面背景是否重復(fù)。
默認值: repeat
(4)background-attachment：固定背景圖像或者跟隨內(nèi)容滾動。
參數(shù)fixed表示固定背景(不隨屏幕滾動而滾動，決定背景圖像是否要固定在原來的位置), scroll表示跟隨內(nèi)容滾動的背景。
注意：如果定義的元素的body, 可以使頁面背景固定。
默認值: scroll
(5)background-position(X)：指定背景圖像的水平位置。
可以指定為left(左邊), center(居中)，right(右邊)；
也可以指定數(shù)值，如20px是指背景距離左邊20象素。
background-position(Y)：指定背景圖像的垂直位置。
可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數(shù)值。
background-position屬性值:
left top
center top
right top
left center
center center
right center
left bottom
center bottom
right bottom
如果您僅規(guī)定了一個關(guān)鍵詞，那么第二個值將是"center"。
注意:采用英文單詞的水平位置和垂直位置的屬性值可以調(diào)換
x% y% 第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規(guī)定了一個值，另一個值將是 50%。
xpos ypos 第一個值是水平位置，第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。
如果您僅規(guī)定了一個值，另一個值將是50%。
您可以混合使用 % 和 position 值。
默認值：0% 0%
i，朋友，您來啦。帶上小板凳，我們一起瞅一瞅今天的話題。
undefined、null、boolean、number、string、symbol和BigInt。
BigInt：專治各種不服的大整數(shù)，海納百川、超級無敵都不夠形容它。
symbol：你我Ta可以共享一個名字，但就是不一樣，橫空出世時，就有全宇宙唯一標識。
對象（普通對象、日期對象、錯誤對象等）、數(shù)組、函數(shù)、正則表達式、Promise、Map、Set、WeakMap、WeakSet、Generator、Proxy、……。
掌握了復(fù)雜類型，就擁有了魔法，有了魔法就能駕馭編程的洪流。[呲牙]
typeof 返回一個字符串，表示變量或表達式的類型。需要注意的是，typeof 在大多數(shù)情況下，針對某些類型都會返回 "object"，而不是具體的類型名稱。
instanceof 運算符用于檢測構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個實例對象的原型鏈上。
Object.prototype.toString.call()
此方式返回一個表示該對象的字符串，其中包括了對象的類型信息。這種方法可以識別出更具體的類型。
關(guān)注作者：關(guān)注有趣的前端編程。
希望本文能夠?qū)δ兴鶐椭兄x您的閱讀！
人人為我，我為人人，謝謝您的瀏覽，讓我們一起加油吧。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
