21html模版里的if判斷語句

家好，html模板的判斷語句和Python里的寫法是一樣的，只不過每一行需要包裹在花括號和百分號里。

·從視圖函數(shù)里傳遞一個名稱為user的數(shù)據(jù)，user變量的值輸入小鐵，在html文件里判斷。如果user返回了數(shù)據(jù)顯示歡迎你小鐵，否則如果沒有顯示數(shù)據(jù)顯示請登錄。

·最后用and if來閉合判斷語句，運行Web服務，在瀏覽器里查看效果。因為user這個變量是有數(shù)據(jù)的，所以前端顯示的歡迎您小鐵。將user變量的值改成無，回到瀏覽器查看效果，這個時候瀏覽器顯示的是請登錄。

這就是html模板文件里if判斷語句的使用方法。

、JavaScript 數(shù)據(jù)類型

JavaScript 數(shù)據(jù)類型有兩種，分別是基本數(shù)據(jù)類型和引用數(shù)據(jù)類型。

基本數(shù)據(jù)類型NumberStringBooleanUndefinedNullSymbol (ES6 新增，表示獨一無二的值)
引用數(shù)據(jù)類型ObjectFunctionArray

我們來詳細了解一下這兩種數(shù)據(jù)類型的特點

1.基本數(shù)據(jù)類型

值不可變

基本類型的值是 不可變 的

var name = 'javascript';
name.toUpperCase(); //  'JAVASCRIPT'
console.log(name); //  'javascript'

但是我們不是經(jīng)常有 ++a 這種操作嗎？比如

let a = 1
console.log(++a) // '2'

其實這個時候并不是 a 指向的 1 直接加了 1，而是新建了一個 1+1 = 2 的值，再將 a 指向這個新建出來的 2，原來的那個 1 并沒有發(fā)生改變，留由垃圾回收機制處理。也就是說不是 a 指向的值發(fā)生了改變，而是 a 變量指針指向了一個新的值，這和「基本類型的值是不可變的」這句話并不矛盾。

數(shù)據(jù)存放在棧區(qū)

原始數(shù)據(jù)類型直接存儲在棧(stack)中的簡單數(shù)據(jù)段，占據(jù)空間小、大小固定，屬于被頻繁使用數(shù)據(jù)，所以放入棧中存儲。

2.引用數(shù)據(jù)類型

值是可變的

let a = { age : 20 }；
a.age = 21；
console.log(a.age)    //21

同時保存在棧內存和堆內存

引用數(shù)據(jù)類型占據(jù)空間大，大小不固定，儲存在堆內存，但是指向該引用數(shù)據(jù)類型的變量指針「a」是儲存在棧內存中。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體。

二、數(shù)據(jù)的賦值

基本數(shù)據(jù)類型的賦值為復制了一個新的值，對新變量的修改不會影響原變量

let a = 1;
let b = a;
b++
console.log(a)   // 1
console.log(b)   // 2

在內存中的變化如圖：

但是引用數(shù)據(jù)類型就不一樣，因為引用數(shù)據(jù)內型占用空間大，所以賦值操作是將新變量指針指向了原對象，修改其一都會影響到另一個。

let a={id=1234}
let b=a
b.id=1222
console.log(a.id) // 1222
console.log(b.id) // 1222

在內存中的變化如圖：

關于引用對象的拷貝又分為深拷貝和淺拷貝，限于篇幅就留給下篇文章了

三、檢驗數(shù)據(jù)類型

typeof

這應該初學者首次接觸的類型判斷方法了，它返回一個表示數(shù)據(jù)類型的字符串，返回結果包括：

number
boolean
string
symbol
object
undefined
function

但是不能判斷 array 和 null

typeof Symbol();  
// symbol  正確
typeof '';   
// string 正確
typeof 1;     
// number正確
typeof true;    
//boolean 正確
typeof undefined; 
//undefined 正確
typeof new Function(); 
// function 正確
typeof null; 
//object 無效
typeof [] ;
//object 無效
typeof new Date(); 
//object 無效
typeof new RegExp(); 
//object 無效

typeof 缺點

可以看到 Date 和 RegExp 對象都只是被是被成了 object 對象，也就是說除 function 以外的對象都會被識別成 object ，這樣顯然是不合理的，這時就需要 instanceof 來進行判斷。

instanceof

instanceof 運算符用于檢測構造函數(shù)的 prototype 屬性是否出現(xiàn)在某個實例對象的原型鏈上。簡單來說就是 instanceof 是用來判斷 A 是否為 B 的實例，表達式為

A (object) instanceof B (constructor)

如果A是B的實例，則返回true,否則返回 false。

// 定義構造函數(shù)
function C(){} 
function D(){} 

var o = new C();


o instanceof C; // true，因為 Object.getPrototypeOf(o) === C.prototype


o instanceof D; // false，因為 D.prototype 不在 o 的原型鏈上

o instanceof Object; // true，因為 Object.prototype.isPrototypeOf(o) 返回 true

C.prototype instanceof Object // true，同上

C.prototype = {};

var o2 = new C();

o2 instanceof C; // true

o instanceof C; // false，C.prototype 指向了一個空對象,這個空對象不在 o 的原型鏈上.

D.prototype = new C(); // 繼承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true 因為 C.prototype 現(xiàn)在在 o3 的原型鏈上

現(xiàn)在就可以判斷不同類別的對象了

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true

instanceof 的缺點

1.是否處于原型鏈上的判斷方法不嚴謹

instanceof 方法判斷的是是否處于原型鏈上，而不是是不是處于原型鏈最后一位，所以會出現(xiàn)下面這種情況：

var arr = [1, 2, 3];
console.log(arr instanceof Array) // true
console.log(arr instanceof Object);  // true
function fn(){}
console.log(fn instanceof Function)// true
console.log(fn instanceof Object)// true

因為所有原型鏈的盡頭都是 object，所以就造成了這種狀況。當你自定義了一個類A，并且繼承了一個原生類B，這個時候 檢測結果未必準確 ：

A instanceof A // true
A instanceof B // true
A instanceof Object true

2.無法判斷字面量方式創(chuàng)建的基本數(shù)據(jù)類型

對于基本數(shù)據(jù)類型來說， 字面量方式 創(chuàng)建出來的結果和 實例方式創(chuàng)建 的是 有一定區(qū)別 的

console.log(1 instanceof Number)//false
console.log(new Number(1) instanceof Number)//true

從嚴格意義上來講， 只有實例創(chuàng)建出來的結果才是標準的對象數(shù)據(jù)類型值 ，也是標準的Number這個類的一個實例；對于字面量方式創(chuàng)建出來的結果是基本的數(shù)據(jù)類型值，不是嚴謹?shù)膶嵗怯捎贘S的松散特點，導致了可以使用Number.prototype上提供的方法。

3. 無法檢測 null 和 undefined

對于特殊的數(shù)據(jù)類型null和undefined，他們的所屬類是Null和Undefined，但是瀏覽器把這兩個類保護起來了，不允許我們在外面訪問使用。

constructor

constructor 作用和 instanceof 非常相似。但 constructor 檢測 Object 與 instanceof 不一樣，還可以處理基本數(shù)據(jù)類型的檢測。

var aa=[1,2];
console.log(aa.constructor===Array);//true
console.log(aa.constructor===RegExp);//false
console.log((1).constructor===Number);//true
var reg=/^$/;
console.log(reg.constructor===RegExp);//true
console.log(reg.constructor===Object);//false

constructor的缺點

1.無法檢測 null 和 undefined

null 和 undefined 是無效的對象，因此是不會有 constructor 存在的，這兩種類型的數(shù)據(jù)需要通過其他方式來判斷。

2.不穩(wěn)定

函數(shù)的 constructor 是不穩(wěn)定的，這個主要體現(xiàn)在把類的原型進行重寫，在重寫的過程中很有可能出現(xiàn)把之前的 constructor 給覆蓋了，這樣檢測出來的結果就是不準確的，由此可知 instanceof 同樣也存在這個問題。

function Fn(){}
Fn.prototype = new Array()
var f = new Fn
console.log(f.constructor)//Array

Object.prototype.toString.call()

這就是大名鼎鼎的全能方法，最準確最常用，據(jù) MDN 描述

每個對象都有一個 toString() 方法，當該對象被表示為一個文本值時，或者一個對象以預期的字符串方式引用時自動調用。默認情況下，toString() 方法被每個 Object 對象繼承。如果此方法在自定義對象中未被覆蓋，toString() 返回 "[object type]"，其中 type 是對象的類型。

在 Number、String，Boolean，Array，RegExp、Date、Function 等對象上 toString() 方法都是被重寫過了的，會按照一定的規(guī)則返回字符串。但是在 object 對象上，這個方式是返回當前方法執(zhí)行的主體（方法中的this）所屬類的詳細信息即"[object Object]",其中第一個object代表當前實例是對象數(shù)據(jù)類型的(這個是固定的 onject)，第二個Object代表的是this所屬的類型。

為了每個對象都能通過 Object.prototype.toString() 來檢測，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式來調用，傳遞要檢查的對象作為第一個參數(shù)，稱為 thisArg。

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window是全局對象global的引用

總結

在線咨詢

上一篇：前端程序員入門html的4大方法，這兩本神書真心經(jīng)典！
下一篇：出現(xiàn)網(wǎng)頁錯誤時，404、502這些數(shù)字代表啥

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商