摘要:年,以為藍本的建議被提交給了歐洲計算機制造商協會,。而且給未經聲明的變量賦值在嚴格模式下會導致拋出的錯誤。這也正是使用操作符檢測值時會返回的原因。函數檢查過程是。但是這個轉換過程會導致特殊的和值應用位操作時,這兩個值會被當成來處理。
前言
本文是 Awesome JavaScript 系列文章的第一篇,本系列文章主要為 JavaScript 的一些常見知識點,是我在 JavaScript 學習過程中的一些筆記。
JavaScript 誕生于 1995 年,和博主同年哈哈。當時,它的主要目的是處理以前由服務器端語言(如 Perl)負責的一些輸入驗證操作。JavaScript 從一個簡單的輸入驗證器發展為一門強大的編程語言,完全出乎人們的預料。應該說,它既是一門非常簡單的語言,又是一門非常復雜的語言。
1997 年,以 JavaScript 1.1 為藍本的建議被提交給了歐洲計算機制造商協會(ECMA,European Computer Manufacturers Association)。不久后,該協會定義了一種名為 ECMAScript 的新腳本語言的標準,即 ECMA-262。
1998 年,ISO/IEC(International Organization for Standardization and International Electrotechnical Commission,國標標準化組織和國際電工委員會)也采用了 ECMAScript 作為標準(即 ISO/IEC-16262)。自此以后,瀏覽器開發商就開始致力于將 ECMAScript 作為各自 JavaScript 實現的基礎,也在不同程度上取得了成功。
到現在呢,我們可以說 JavaScript 是一門專為與網頁交互而設計的腳本語言,他其實由以下三部分組成:
ECMAScript,由 ECMA-262 定義,提供核心語言功能。
文檔對象模型(DOM,Document Object Model),針對 XML 但經過擴展用于 HTML 的應用程序編程接口(API,Application Programming Interface)。提供訪問和操作網頁內容的方法和接口。
瀏覽器對象模型(BOM,Browser Object Model),提供與瀏覽器交互的方法和接口。
傳統的做法是將所有的 元素都放到頁面的 元素中。這樣做的目的是將所有的外部文件(包括 CSS 文件和 JavaScript 文件)的引用都放在相同的地方。但是這樣就意味著必須等到全部 JavaScript 代碼都被下載、解析和執行完成后,才能開始呈現頁面的內容(瀏覽器在遇到 標簽時才開始呈現內容)。這種情況下的用戶體驗就非常的不好。
其實我們可以將所有的 元素都放到頁面的 元素中頁面內容的后面,即 前。這樣在解析包含 JavaScript 代碼之前,頁面的內容將完全呈現在瀏覽器中。而用戶也會因為瀏覽器窗口顯示空白頁面的時間縮短而感到打開頁面的速度加快了。
noscript 元素早期瀏覽器都面臨一個特殊的問題,即當瀏覽器不支持 JavaScript 時如何讓頁面平穩退化。對這個問題的最終解決方案就是創造一個 元素,用以在不支持 JavaScript 的瀏覽器中顯示替代的內容。這個元素可以包含能夠出現在文檔 中的任何 HTML 元素( 除外)。包含在 元素中的內容只有在瀏覽器不支持腳本或瀏覽器支持腳本但是腳本被禁用的情況下才會顯示出來。
Example HTML Page
所謂標識符就是指變量、函數、屬性的名字,或者函數的參數。標識符可以是按照下列格式規則組合起來的一或多個字符:
第一個字符必須是一個字母、下劃線 _ 或一個美元符號 $;
其他字符可以是字母、下劃線、美元符號或數字;
標識符中的字母可以包含擴展的 ASCII 或 Unicode 字母字符,但不推薦這樣做。
注釋注釋推薦像下面這樣寫:
// 單行注釋 /* * 這是一個多行 * (塊級)注釋 */嚴格模式
ECMAScript 5 引入了嚴格模式的概念,嚴格模式是為 JavaScript 定義了一種不同的解析與操作模型。嚴格模式啟用方法如下:
function doSomething() { "use strict"; //函數體 }
"use strict"; 這行代碼其實是一個編譯指示(pragma),用于高速支持的 JavaScript 引擎切換到嚴格模式。
變量用 var 操作符定義的變量將成為定義該變量的作用域中的局部變量。也就是說,如果在函數中使用 var 定義一個變量,那么這個變量在函數退出后就會被銷毀。
function test() { var message = "hi"; //局部變量 } test(); alert(message); //錯誤!
function test() { message = "hi"; //全局變量 } test(); alert(message); //"hi"
不推薦濫用全局變量,因為在局部作用域中定義的全局變量很難維護。而且給未經聲明的變量賦值在嚴格模式下會導致拋出 ReferenceError 的錯誤。
可以使用一條語句定義多個變量,只要把每個變量(初始化與否均可)用逗號分隔開即可:
var message = "hi", found = false, age = 29;
因為 ECMAScript 是松散類型的,因而使用不同類型初始化變量的操作可以放在一條語句中完成。
注意,在嚴格模式下不能定義名為 eval 或 arguments 的變量,否則會導致語法錯誤。
數據類型ECMAScript 中有五種簡單數據類型(基本數據類型):Undefined、Null、Boolean、Number 和 String。還有一種復雜數據類型 -- Object,在本質上,Object 是一組無序的明值對組成的。乍一看這幾種數據類型不足以表示所有數據,但是 ECMAScript 數據類型具有動態性,所以沒有必要再定義其他類型的數據了。
typeof 操作符返回值 | 含義 |
---|---|
"undefined" | 這個值未定義 |
"boolean" | 這個值是布爾值 |
"string" | 這個值是字符串 |
"number" | 這個值是數值 |
"object" | 這個值是對象或 null |
"function" | 這個值是函數 |
var message = "some string"; alert(typeof message); //"string" alert(typeof (message)); //"string" alert(typeof 95); //"number"
上面幾個例子說明,typeof 操作符的操作數可以是變量(message),也可以是數值字面量。注 -- typeof 是一個操作符。
在 JavaScript 中,null 是一個 object,即 typeof null; 返回 object。這是設計的缺陷,在最初,使用標記位來區分對象類型和原始類型,對象型用 0 標識,原始型用 1 標識。導致了全零的 null 被識別為 object。null 被認為是一個空的對象引用,也就是一個空的對象指針。這也正是使用 typeof 操作符檢測 null 值時會返回 object 的原因。
在技術上講,函數在 ECMAScript 中是對象,不是一種數據類型。然而函數確實也有一些特殊的屬性,因此通過 typeof 操作符來區分函數和其他對象是有必要的。
Undefined 類型在 JavaScript 中,包含 undefined 值的變量與尚未定義的變量還是不一樣的。
var message; // alert(message); // alert(age);
var message; alert(typeof message); //"undefined" alert(typeof age); //"undefined"
即便未初始化的變量會自動被賦予 undefined 值,但顯示的初始化變量依然是明智的選擇。如果做到這一點,那么當 typeof 操作符返回 undefined 值時,我們就知道被檢測的變量是沒有被聲明還是尚未初始化。
對于未聲明的變量,只能執行一項操作即用 typeof 操作符檢測其數據類型(未聲明的變量調用 delet 不會報錯,但沒意義,而且在嚴格模式下也會報錯)。
未初始化和未聲明的變量的區別就是,在用 typeof 操作符檢測其數據類型時都顯示 undefined,但是在除此之外調用未聲明的變量時就會報錯。
因為在 JavaScript 中未定義和未聲明的變量用 typeof 操作符檢測其數據類型時都顯示 undefined,所以 DOM 相關函數都是返回 null,從 API 設計角度來講是合理的。
無論什么情況下,都沒有必要將一個變量的值顯示的設置為 undefined。
Null 類型如果定義的變量準備在將來保存對象,那么最好將該變量初始化為 null 而不是其他值。這樣只要檢查 null 值就可以知道相應的變量是否已經保存了一個對象的引用,如下所示:
if(car != null) { //對 car 對象執行某些操作 }
所以只要意在保存對象的變量還沒有真正保存對象,就應該明確地讓該變量保存 null 值。
實際上,undefined 值是派生自 null 值的,因此 ECMA-262 規定對他們的相等性測試要返回 true:
alert(null == undefined); //trueNumber 類型
因為保存浮點數值需要的內存空間是保存整數值的兩倍,所以 ECMAScript 會不失時機的將浮點數值轉換為整數值。
ECMAScript 能夠表示的數的范圍為 Number.MIN_VALUE ~ Number.MAX_VALUE,在大多數瀏覽器中為 5e-324 ~ 1.7976931348623157e+308。當程序執行時,數值超過正負范圍時會被分別轉化為 Infinity 和 -Infinity。想確定一個數是否超出 JavaScript 數值范圍,可以用 isInfinite() 函數。
var result = Number.MIN_VALUE + Number.MIN_VALUE; alert(isFinite(result)); //false
NaN 即非數值(Not a Number)是一個特殊值。用于表示一個本來要返回數值的操作數未返回數值的情況(這樣就不會拋出錯誤了)。其有兩個特點,首先任何涉及 NaN 操作都會返回 NaN,這一點在多步計算中可能會導致問題。其次, NaN 與任何值都不相等,包括其本身。ECMAScript 也定義了 isNaN(); 函數。這個函數接收一個參數,這個參數可以是任何類型的,而函數會幫我們確定這個參數是否 不是數值。函數檢查過程是 `isNaN(); => valueOf(); => toString();。
有三個可以把非數值轉化為數值的函數:Number(),parseInt(),parseFloat()。在使用 parseInt() 轉換數據類型時,為了避免錯誤解析,建議無論何時都要明確指定基數。多數情況下我們要解析的都是是進制數,因此始終將 10 作為第二個參數是十分必要的。
var num1 = Number("Hello world!"); //NaN var num2 = Number(""); //0 var num3 = Number("000011"); //11 var num4 = Number(true); //1 alert(num1); alert(num2); alert(num3); alert(num4);
var num1 = praseInt("10", 2); //2 (按二進制解析) var num1 = praseInt("10", 8); //8 (按八進制解析) var num1 = praseInt("10", 10); //10 (按十進制解析) var num1 = praseInt("10", 16); //16 (按十六進制解析)
parseFloat() 只解析十進制值,所以其沒有第二個參數。
var num1 = parseFloat("1234blue"); //1234 - integer var num2 = parseFloat("0xA"); //0 var num3 = parseFloat("22.5"); //22.5 var num4 = parseFloat("22.34.5"); //22.34 var num5 = parseFloat("0908.5"); //908.5 var num6 = parseFloat("3.125e7"); //31250000 alert(num1); alert(num2); alert(num3); alert(num4); alert(num5); alert(num6);String 類型
字符串由雙引號或單引號表示都可以,在 ECMAScript 中的這兩種語言形式沒有什么區別。
任何字符串的長度都可以通過訪問其 length 屬性取得,如果字符串中包含雙字節字符,那么 length 屬性可能不會精確的返回字符串中的字符數目。
var text = "This is the letter sigma: u030a."; alert(text.length); //輸出 28
ECMAScript 中的字符串是不可變的,如果要改變某個變量保存的字符串,首先要銷毀原來的字符串,然后再用另一個包含新值的字符串填充該變量,這個過程是在后臺完成的,這也就是某些舊版本瀏覽器在拼接字符串的時候速度很慢的原因了。
要把一個值轉換為字符串有兩種方法,第一種是 toString() 方法。數值、布爾值、對象和字符串值都有相應的 toString() 方法,但是 null 和 undefined 值沒有。一般調用 toString() 方法時不用傳遞參數,但是他也可以傳遞參數。
var age = 11; var ageAsString = age.toString(); //the string "11" var found = true; var foundAsString = found.toString(); //the string "true" alert(ageAsString); alert(typeof ageAsString); alert(foundAsString); alert(typeof foundAsString);
var num = 10; alert(num.toString()); //"10" alert(num.toString(2)); //"1010" alert(num.toString(8)); //"12" alert(num.toString(10)); //"10" alert(num.toString(16)); //"a"
在不知道要轉換的值是不是 null 或 undefined 的情況下可以使用第二種方法:轉型函數 String()。使用這種方法時,如果值有 toString() 方法則會調用該方法,沒有的話就按本方法規則執行。
var value1 = 10; var value2 = true; var value3 = null; var value4; alert(String(value1)); //"10" alert(String(value2)); //"true" alert(String(value3)); //"null" alert(String(value4)); //"undefined"Object 類型
ECMAScript 中的對象其實就是一組數據和功能的集合。
var o = new Object();
在 ECMAScript 中,當對數值應用位操作符時,后臺發生如下的轉換過程:64 位的數值被轉換為 32 位數值,然后執行位操作,最后再將 32 位的結果轉換回 64 位數值。但是這個轉換過程會導致特殊的 NaN 和 Infinity 值應用位操作時,這兩個值會被當成 0 來處理。對非數值可以先使用 Number() 函數將該值轉換為一個數值,然后再應用位操作。
var num1 = 25; //binary 00000000000000000000000000011001 var num2 = ~num1; //binary 11111111111111111111111111100110 alert(num2); //-26
按位非操作的本質就是操作數的負值減一。
左移操作:左移操作符為 <<,左移不會影響操作數的符號位。
var oldValue = 2; //equal to binary 10 var newValue = oldValue << 5; //equal to binary 1000000 which is decimal 64 alert(newValue); //64
右移操作分為有符號 >> 和無符號 >>> 兩種。對于正數來說,這兩種方法的結果一樣。但對于負數來說,無符號右移是以 0 填充空位,而不是像有符號右移那樣以符號位的值來填充空位。
var oldValue = -64; //equal to binary 11111111111111111111111111000000 var newValue = oldValue >>> 5; //equal to decimal 134217726 alert(newValue); //134217726
我們可以利用邏輯或的行為特性來避免為變量賦 null 或 undefined 值。例如:
var myObject = preferredObject || backupObject;
上面這段代碼,如果 preferredObject 的值不是 null,那么它的值將被賦給 myObject;如果是 null,則將 backupObject 的值賦給 myObject。ECMAScript 程序的賦值語句常用這種模式。
加性操作符有以下特性:+0 加 +0 結果為 +0;-0 加 -0 結果為 -0;+0 加 -0 結果為 +0。如果兩個操作數都是字符串,則將第二個操作數與第一個操作數拼接起來。如果只有一個操作數是字符串,則將另一個操作數轉換為字符串,然后再將兩個字符串拼接起來。
var result1 = 5 + 5; //two numbers alert(result1); //10 var result2 = 5 + "5"; //a number and a string alert(result2); //"55"
var num1 = 5; var num2 = 10; var message = "The sum of 5 and 10 is " + num1 + num2; alert(message); //"The sum of 5 and 10 is 510"
var num1 = 5; var num2 = 10; var message = "The sum of 5 and 10 is " + (num1 + num2); alert(message); //"The sum of 5 and 10 is 15"
減性操作符有以下特性:+0 減 +0 結果為 +0;-0 減 +0 結果為 -0;-0 減 +0 結果為 +0。
var result1 = 5 - true; //4 because true is converted to 1 var result2 = NaN - 1; //NaN var result3 = 5 - 3; //2 var result4 = 5 - ""; //5 because "" is converted to 0 var result5 = 5 - "2"; //3 because "2" is converted to 2 var result6 = 5 - null; //5 because null is converted to 0
相等操作符有相等 == 和不相等 !=、全等 === 和不全等 !== 兩種。前者先轉換再比較,后者僅比較不轉換。除此之外無區別。轉換指轉換成數值。
var result1 = ("55" == 55); //true ?equal because of conversion var result2 = ("55" === 55); //false ?not equal because different data types var result3 = ("55" != 55); //false ?equal because of conversion var result4 = ("55" !== 55); //true ?not equal because different data types alert(null == undefined); //true alert(null === undefined); //false alert("NaN" == NaN); //false alert("NaN" === NaN); //false alert(NaN == NaN); //false alert(NaN === NaN); //false alert(NaN != NaN); //true alert(NaN !== NaN); //true alert(false == 0); //true alert(false === 0); //false alert(true == 1); //true alert(true === 1); //false alert(null == 0); //false alert(undefined == 0); //false alert(5 == "5"); //true alert(5 === "5"); //false
注意:null == undefined 會返回 true,而 null === undefined 會返回 false,因為他們是不同類型的值。由于相等和不相等操作符存在類型轉換問題,而為了保持代碼中數據類型的完整性,我們推薦使用全等和不全等操作符。
條件操作符:
var max = (num1 > num2) ? num1 : num2;
有 if 語句、do-while 語句、while 語句、for 語句、for-in 語句、lable 語句、break 和 continue 語句、with 語句、switch 語句。
因為 ECMAScript 中不存在塊級作用域,因此在循環內部定義的變量也可以在外部訪問到。例如:
var count = 10; for (var i=0; i < count; i++){ alert(i); } alert(i); //10
for-in語句是一種精準的迭代語句,可以用來枚舉對象屬性。用法是:
for (property in wxpression) statement
下面是一個示例:這個例子循環顯示 BOM 中 window 對象的所有屬性。
for (var propName in window) { document.wright(propName); }
如果要迭代的對象的變量值為 null 或 undefined,for-in 語句會拋出錯誤。ECMAScript 5 已經更正了這一行為,對這種情況不再拋出錯誤,而只是不執行循環體。為了保證最大限度兼容性,建議在使用 for-in 循環之前先檢查確認該對象的值不是 null 或 undefined。
lable 語句可以在代碼中添加標簽,以便將來使用。語法為:
lable: statement;
代碼示例:這個例子中定義的 start 標簽可以在將來由 break 或 continue 語句引用。加標簽的語句一般都要與 for 語句等循環語句配合使用。
start: for (var - = 0; i < count; i++) { }
下面這段代碼使得 break 語句不僅會退出內部的 for 語句,而且也會退出外部的 for 語句。
var num = 0; outermost: for (var i=0; i < 10; i++) { for (var j=0; j < 10; j++) { if (i == 5 && j == 5) { break outermost; } num++; } } alert(num); //55
var num = 0; outermost: for (var i=0; i < 10; i++) { for (var j=0; j < 10; j++) { if (i == 5 && j == 5) { continue outermost; } num++; } } alert(num); //95
with 語句的作用是將代碼的作用域設置到一個特定的對象中,語法如下:
with (expression) statement;
定義 with 語句的目的是簡化多次編寫同一個對象的工作,如下面的例子所示:
var qs = location.search.substring(1); var hostName = location.hostname; var url = location.href;
用 with 語句寫的話就可以簡化成下面這樣:
with (location) { var qs = search.substring(1); var hostName = hostname; var url = href; }
注意:嚴格模式下不允許使用 with 語句,否則將視為語法錯誤。同時,大量使用這種語句會導致性能下降,同時也會給調試代碼造成困難,因此在開發大型應用程序時不建議使用 with 語句。
switch 語句,雖然 ECMAScript 的 switch 語句是借鑒其他語言的,但是也有其特色。可以在 ECMAScript 的 switch 語句中使用任何數據類型。其次,每一個 case 的值不一定是常量,可以是變量,也可以是表達式。
switch ("hello world") { case "hello" + " world": alert("Greeting was found."); break; case "goodbye": alert("Closing was found."); break; default: alert("Unexpected message was found."); }
var num = 25; switch (true) { case num < 0: alert("Less than 0."); break; case num >= 0 && num <= 10: alert("Between 0 and 10."); break; case num > 10 && num <= 20: alert("Between 10 and 20."); break; default: alert("More than 20."); }
對于函數的返回值,推薦的做法是要么讓函數始終都返回一個值,要么永遠都不要返回值,否則,如果函數有時候返回值,有時候不返回值,會給調試代碼帶來不便。
ECMAScript 不介意你傳遞的參數個數和參數的數據類型,因為 ECMAScript 中的參數只在內部是一個數組來表示的。實際上在函數體內可以通過 arguments 對象來訪問這個參數數組,從而獲得傳遞給函數的每一個參數。arguments 對象只是與數組類似但并不是 Array 的實例。
沒有傳遞值的命名參數將自動被賦予 undefined 值,這就和定義變量但為初始化類似。
在 ECMAScript 中,定義了兩個名字相同的函數,則該名字只屬于后定義的函數。
歡迎大家在評論區留下你的想法和感受!
歡迎大家關注知乎專欄:全棧成長之路
文章保質保量 (づ ̄3 ̄)づ╭?~
也歡迎大家加入學習交流QQ群:637481811
本文首發于我的 個人網站 LeviDing ,更多內容歡迎關注我的個人網站。
歡迎掃描上方二維碼關注 公眾號: LeviDing 訂閱實時動態。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112183.html
摘要:年,以為藍本的建議被提交給了歐洲計算機制造商協會,。而且給未經聲明的變量賦值在嚴格模式下會導致拋出的錯誤。這也正是使用操作符檢測值時會返回的原因。函數檢查過程是。但是這個轉換過程會導致特殊的和值應用位操作時,這兩個值會被當成來處理。 前言 本文是 Awesome JavaScript 系列文章的第一篇,本系列文章主要為 JavaScript 的一些常見知識點,是我在 JavaScrip...
摘要:年,以為藍本的建議被提交給了歐洲計算機制造商協會,。而且給未經聲明的變量賦值在嚴格模式下會導致拋出的錯誤。這也正是使用操作符檢測值時會返回的原因。函數檢查過程是。但是這個轉換過程會導致特殊的和值應用位操作時,這兩個值會被當成來處理。 前言 本文是 Awesome JavaScript 系列文章的第一篇,本系列文章主要為 JavaScript 的一些常見知識點,是我在 JavaScrip...
摘要:與此同時云犀利用強大的內容分發技術實現同一場活動多平臺同步直播在微博微信今日頭條等新媒體平臺引發廣泛的話題討論。而云犀的智能字幕實時剪輯等技術也讓錯過峰會直播的網民通過短視頻觀看精彩回放實現了峰會活動宣傳的二次傳播。2018年3月8日,在全球矚目的中國家電及消費電子博覽會(AWE2018)上,云犀與AWE深度合作,為本次峰會提供拍攝、直播、視頻制作等服務;云拍攝團隊派出15位專業簽約攝影攝像...
摘要:最近要做拖拽相關的功能,本來想自己寫,忽然想起來之前在輪子工廠有更新過,還是很好用滴。介紹一款可任意拖動排序的插件。支持桌面和移動端,拖拽過渡動畫美觀。 最近要做拖拽相關的功能,本來想自己寫,忽然想起來之前在輪子工廠有更新過,vue-dragging還是很好用滴。 介紹 vue-dragging -- 一款可任意拖動排序的vue插件。支持桌面和移動端,拖拽過渡動畫美觀。支持vue1和v...
閱讀 1466·2023-04-26 00:08
閱讀 797·2021-11-23 18:51
閱讀 1672·2021-11-12 10:34
閱讀 1007·2021-10-14 09:43
閱讀 501·2021-08-18 10:23
閱讀 2581·2019-08-30 15:55
閱讀 3392·2019-08-30 11:05
閱讀 2792·2019-08-29 12:50