快捷導(dǎo)航

JavaScript每天必學(xué)之基礎(chǔ)知識(shí)

更新時(shí)間：2016年09月17日 10:48:46 投稿：lijiao

JavaScript每天必學(xué)之基礎(chǔ)知識(shí),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

基本概念

javascript是一門解釋型的語(yǔ)言，瀏覽器充當(dāng)解釋器。js執(zhí)行時(shí)，在同一個(gè)作用域內(nèi)是先解釋再執(zhí)行。解釋的時(shí)候會(huì)編譯function和var這兩個(gè)關(guān)鍵詞定義的變量，編譯完成后從上往下執(zhí)行并向變量賦值。

區(qū)分大小寫

ECMASCript中的一切（包括變量，函數(shù)名和操作符）都區(qū)分大小寫。

1. 變量

變量在第一次用到時(shí)就設(shè)置于內(nèi)存中，便于后來(lái)在腳本中引用。使用變量之前先進(jìn)行聲明?？梢允褂?var 關(guān)鍵字來(lái)進(jìn)行變量聲明。

var count, amount, level; // 用單個(gè) var 關(guān)鍵字聲明的多個(gè)聲明。

變量命名

變量名包括全局變量，局部變量，類變量，函數(shù)參數(shù)等等，他們都屬于這一類。

變量命名都以類型前綴+有意義的單詞組成，用駝峰式命名法增加變量和函式的可讀性。例如：sUserName，nCount。
前綴規(guī)范：
每個(gè)局部變量都需要有一個(gè)類型前綴，按照類型可以分為：
s：表示字符串。例如：sName，sHtml；
n：表示數(shù)字。例如：nPage，nTotal；
b：表示邏輯。例如：bChecked，bHasLogin；
a：表示數(shù)組。例如：aList，aGroup；
r：表示正則表達(dá)式。例如：rDomain，rEmail；
f：表示函數(shù)。例如：fGetHtml，fInit；
o：表示以上未涉及到的其他對(duì)象，例如：oButton，oDate；
g：表示全局變量，例如：gUserName，gLoginTime；

JScript 是一種區(qū)分大小寫的語(yǔ)言。創(chuàng)建合法的變量名稱應(yīng)遵循如下規(guī)則：

注意第一個(gè)字符不能是數(shù)字。

后面可以跟任意字母或數(shù)字以及下劃線，但不能是空格變量名稱一定不能是保留字。

javascript是一種弱類型語(yǔ)言，JavaScript 會(huì)忽略多余的空格。您可以向腳本添加空格，來(lái)提高其可讀性。

var是javascript的保留字，表明接下來(lái)是變量說(shuō)明，變量名是用戶自定義的標(biāo)識(shí)符，變量之間用逗號(hào)分開。

如果聲明了一個(gè)變量但沒有對(duì)其賦值，該變量存在，其值為Jscript 值 undefined。

強(qiáng)制類型轉(zhuǎn)換

在 Jscript 中，可以對(duì)不同類型的值執(zhí)行運(yùn)算，不必?fù)?dān)心 JScript 解釋器產(chǎn)生異常。相反，JScript 解釋器自動(dòng)將數(shù)據(jù)類型之一改變（強(qiáng)制轉(zhuǎn)換）為另一種數(shù)據(jù)類型，然后執(zhí)行運(yùn)算。例如：

運(yùn)算結(jié)果

數(shù)值與字符串相加        將數(shù)值強(qiáng)制轉(zhuǎn)換為字符串。
布爾值與字符串相加    將布爾值強(qiáng)制轉(zhuǎn)換為字符串。
數(shù)值與布爾值相加        將布爾值強(qiáng)制轉(zhuǎn)換為數(shù)值。

要想顯式地將字符串轉(zhuǎn)換為整數(shù)，使用 parseInt 方法。要想顯式地將字符串轉(zhuǎn)換為數(shù)字，使用 parseFloat 方法。

JavaScript 變量的生存期：當(dāng)您在函數(shù)內(nèi)聲明了一個(gè)變量后，就只能在該函數(shù)中訪問(wèn)該變量。當(dāng)退出該函數(shù)后，這個(gè)變量會(huì)被撤銷。這種變量稱為本地變量。您可以在不同的函數(shù)中使用名稱相同的本地變量，這是因?yàn)橹挥新暶鬟^(guò)變量的函數(shù)能夠識(shí)別其中的每個(gè)變量。

如果您在函數(shù)之外聲明了一個(gè)變量，則頁(yè)面上的所有函數(shù)都可以訪問(wèn)該變量。這些變量的生存期從聲明它們之后開始，在頁(yè)面關(guān)閉時(shí)結(jié)束。

js變量思維導(dǎo)圖

2.js的數(shù)據(jù)類型

jscript 有三種->主要數(shù)據(jù)類型、兩種->復(fù)合數(shù)據(jù)類型和兩種->特殊數(shù)據(jù)類型。

主要（基本）數(shù)據(jù)類型
字符串
數(shù)值
布爾

復(fù)合（引用）數(shù)據(jù)類型
對(duì)象
數(shù)組

特殊數(shù)據(jù)類型
Null

`Undefined`

字符串?dāng)?shù)據(jù)類型：字符串?dāng)?shù)據(jù)類型用來(lái)表示 JScript 中的文本。在js中，雖然雙引號(hào)（”"）和單引號(hào)(”)均可表示字符串，而且它們幾乎沒有任何區(qū)別。但只使用雙引號(hào)(“”)來(lái)表示字符串被認(rèn)為是最佳的。

一個(gè)字符串值是排在一起的一串零或零以上的 Unicode 字符（字母、數(shù)字和標(biāo)點(diǎn)符號(hào)）。

什么是Unicode？

Unicode為每個(gè)字符都提供了唯一的數(shù)值，不管是什么平臺(tái)、什么程序或什么語(yǔ)言。開發(fā)unicode是為了給處理世界上存在的所有字符提供統(tǒng)一的編碼。

數(shù)值數(shù)據(jù)類型

我們需要明白一點(diǎn)，JScript 內(nèi)部將所有的數(shù)值表示為浮點(diǎn)值，因此，在 Jscript 中整數(shù)和浮點(diǎn)值沒有差別。

Boolean數(shù)據(jù)類型

布爾（邏輯）只能有兩個(gè)值：true 或 false。

js數(shù)組和對(duì)象

詳情看我這篇文章->javascript學(xué)習(xí)總結(jié)— —數(shù)組和對(duì)象部分

Null 數(shù)據(jù)類型：可以通過(guò)給一個(gè)變量賦 null 值來(lái)清除變量的內(nèi)容。

Jscript中 typeof 運(yùn)算符將報(bào)告 null 值為 Object 類型，而非類型 null。

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title></title>
 <script type="text/javascript"> 
   alert(typeof null);
 </script>
</head>
<body>
</body>
</html>

null用來(lái)表示尚未存在的對(duì)象，常用來(lái)表示函數(shù)企圖返回一個(gè)不存在的對(duì)象。

Undefined 數(shù)據(jù)類型：

如下情況將返回 undefined 值：
對(duì)象屬性不存在，
聲明了變量但從未賦值。

null和undefined的區(qū)別

alert(typeof undefined); //output "undefined" 
alert(typeof null); //output "object" 
alert(null == undefined); //output "true"

ECMAScript認(rèn)為undefined是從null派生出來(lái)的，所以把它們定義為相等的。

alert(null === undefined); //output "false" 
alert(typeof null == typeof undefined); //output "false"

null與undefined的類型是不一樣的，所以輸出”false“。而===代表絕對(duì)等于，在這里null === undefined輸出false

另外，這里介紹一種比較重要的數(shù)據(jù)類型——引用數(shù)據(jù)類型

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

javascript引用數(shù)據(jù)類型是保存在堆內(nèi)存中的對(duì)象，JavaScript不允許直接訪問(wèn)堆內(nèi)存空間中的位置和操作堆內(nèi)存空間，只能通過(guò)操作對(duì)象在棧內(nèi)存中的引用地址。所以引用類型的數(shù)據(jù)，在棧內(nèi)存中保存的實(shí)際上是對(duì)象在堆內(nèi)存中的引用地址。通過(guò)這個(gè)引用地址可以快速查找到保存在堆內(nèi)存中的對(duì)象。

下面我們來(lái)演示這個(gè)引用數(shù)據(jù)類型賦值過(guò)程

自然，給obj2添加name屬性，實(shí)際上是給堆內(nèi)存中的對(duì)象添加了name屬性，obj2和obj1在棧內(nèi)存中保存的只是堆內(nèi)存對(duì)象的引用地址，雖然也是拷貝了一份，但指向的對(duì)象卻是同一個(gè)。故而改變obj2引起了obj1的改變。

基本類型值指的是那些保存在棧內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段，即這種值完全保存在內(nèi)存中的一個(gè)位置。
而引用類型值則是指那些保存在堆內(nèi)存中的對(duì)象，即變量中保存的實(shí)際上只是一個(gè)指針，這個(gè)指針指向內(nèi)存中的另一個(gè)位置，該位置保存對(duì)象。

簡(jiǎn)而言之，堆內(nèi)存存放引用值，棧內(nèi)存存放固定類型值。

在 ECMAScript 中，變量可以存在兩種類型的值，即原始值和引用值。

原始值存儲(chǔ)在棧（stack）中的簡(jiǎn)單數(shù)據(jù)段，也就是說(shuō)，它們的值直接存儲(chǔ)在變量訪問(wèn)的位置。引用值存儲(chǔ)在堆（heap）中的對(duì)象，也就是說(shuō)，存儲(chǔ)在變量處的值是一個(gè)指針（point），指向存儲(chǔ)對(duì)象的內(nèi)存處。

 <script type="text/javascript”>
var box = new Object(); //創(chuàng)建一個(gè)引用類型
var box = "lee";  //基本類型值是字符串
box.age = 23;  //基本類型值添加屬性很怪異，因?yàn)橹挥袑?duì)象才可以添加屬性。
alert(box.age); //不是引用類型，無(wú)法輸出；
</script>

3.JScript 的運(yùn)算符

優(yōu)先級(jí)：指運(yùn)算符的運(yùn)算順序，通俗的說(shuō)就是先計(jì)算哪一部分。
結(jié)合性：同一優(yōu)先級(jí)運(yùn)算符的計(jì)算順序，通俗的說(shuō)就是從哪個(gè)方向算起，是左到右還是右到左。

數(shù)據(jù)類型轉(zhuǎn)換和基本包裝類型

String() 轉(zhuǎn)換為字符串類型
Number() 轉(zhuǎn)換為數(shù)字類型
Boolean() 轉(zhuǎn)換為布爾類型

parseInt：將字符串轉(zhuǎn)換為整數(shù)。從字符串的開頭開始解析，在第一個(gè)非整數(shù)的位置停止解析，并返回前面讀到所有的整數(shù)。如果字符串不是以整數(shù)開頭的，將返回NaN。如：parseInt（“150 hi”）返回的值是：150，parseInt(“hi”)返回的值是：NaN。
parseFloat：將字符串轉(zhuǎn)換為浮點(diǎn)數(shù)。從字符串的開頭開始解析，在第一個(gè)非整數(shù)的位置停止解析，并返回前面讀到所有的整數(shù)。如果字符串不是以整數(shù)開頭的，將返回NaN。如：parseFloat("15.5 hi") 返回的值是：15.5，parseFloat("hi 15.5")返回的值是：NaN。

eval：將字符串作為javascript表達(dá)式進(jìn)行計(jì)算，并返回執(zhí)行結(jié)果，如果沒有結(jié)果則返回undefined。
基本包裝類型

每當(dāng)讀取一個(gè)基本類型值的時(shí)候，后臺(tái)就會(huì)創(chuàng)建一個(gè)對(duì)應(yīng)的基本包裝類型的對(duì)象，從而能調(diào)用一些方法來(lái)操作這些數(shù)據(jù)。基本包裝類型包括Boolean、Number和String

 var box = 'trigkit4'; //字面量
box.name = 'mike';  //無(wú)效屬性
box.age = function () { //無(wú)效方法
  return 22;
};

//new運(yùn)算符寫法
var box = new String('trigkit4');//new 運(yùn)算符
box.name = 'mike';  //有效屬性
box.age = function () { //有效方法
  return 22;
};

String類型包含了三個(gè)屬性和大量的可用內(nèi)置方法
屬性描述
length :返回字符串的字符長(zhǎng)度
Constructor : 返回創(chuàng)建String對(duì)象的函數(shù)
prototype : 通過(guò)添加屬性和方法擴(kuò)展字符串定義

4.js流程控制

對(duì)于js流程控制語(yǔ)句，這里只講幾個(gè)比較難懂的。其他不贅述。等下附上一張思維導(dǎo)圖。

1.for…in 語(yǔ)句對(duì)應(yīng)于一個(gè)對(duì)象的每個(gè)，或一個(gè)數(shù)組的每個(gè)元素，執(zhí)行一個(gè)或多個(gè)語(yǔ)句。
for (variable in [object | array])
statements

參數(shù)：
variable：必選項(xiàng)。一個(gè)變量，它可以是 object 的任一屬性或 array 的任一元素。
object, array：可選項(xiàng)。要在其上遍歷的對(duì)象或數(shù)組。
statement：可選項(xiàng)。相對(duì)于 object 的每個(gè)屬性或 array 的每個(gè)元素，都要被執(zhí)行的一個(gè)或多個(gè)語(yǔ)句。可以是復(fù)合語(yǔ)句。

雖然條件控制語(yǔ)句（如if語(yǔ)句）只在執(zhí)行多條語(yǔ)句的情況下才要求使用代碼塊（左花括號(hào)”{“開頭，右花括號(hào)”}”結(jié)尾）,但最佳實(shí)踐是始終使用代碼塊。

 if(args)
  alert(args);//容易出錯(cuò)

if(args){
  alert(args);//推薦使用
}

5.js函數(shù)

函數(shù)是由事件驅(qū)動(dòng)的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊。

Jscript 支持兩種函數(shù)：一類是語(yǔ)言內(nèi)部的函數(shù)，另一類是自己創(chuàng)建的。
JavaScript 函數(shù)允許沒有參數(shù)（但包含參數(shù)的小括號(hào)不能省略），也可以向函數(shù)傳遞參數(shù)供函數(shù)使用。

更多關(guān)于函數(shù)的知識(shí)請(qǐng)?jiān)L問(wèn)我的另一篇文章：javascript學(xué)習(xí)大總結(jié)（四）function函數(shù)部分

對(duì)象的組成
方法——函數(shù)：過(guò)程、動(dòng)態(tài)的
屬性——變量：狀態(tài)、靜態(tài)的

最后，再附上一張前輩總結(jié)的思維導(dǎo)圖：