【JavaScript】巧用思維導圖來輕松學習JavaScript

前面更新了h5的相關知識，接下來學習js，根據上面的學習可以知道js屬于高級語言，而js就是來規范行為的，

首先，我們用思維導圖來看一下學完這篇JavaScript你會學到什么？

js的歷史由來

js:是運行在客戶端的腳本語言，

是由布萊登*艾奇（現在還存在）——用了10天的時間研發出的——研發出來的時候，為livescript在網景公司——由于sun公司收購后（當時sun公司比較流行的語言就是java）所以，更名為JavaScript，
由以上的由來你就可以知道，javascript與Java之間沒有任何聯系，只是簡單的蹭了一個熱度，
而JavaScript的組成，分為三部分，1，ECMAscript 2，DOM（頁面檔案）3，BOM(瀏覽器)

js書寫的位置

1，行內
當寫少量的代碼的時候，這時候我們可以寫在行內，
例如：

<input type="button" value="點我" onclick="alert('X')>//當點擊這個按鈕的時候，彈窗會彈出X這個值

注：
1，單行或者少量的代碼寫在HTML的body中，一定要以on開頭，
2，關于引號的問題，在書寫習慣的時候，寫HTML的內容，我們用雙引號，寫js的內容的時候，我們用單引號，

2，內嵌

寫js的相關代碼的時候，可以直接寫在head里面，但是在寫多行的js的代碼的時候一定要用script包裹起來，

<script ">alert('X')</script>

3，外部
可以新建一個檔案夾用來寫js的相關內容，然后再引進來，

<script src="my.js"></script>//中間不能寫代碼

js的基本陳述句

alert(msg)     //瀏覽器彈出小方框
console.log(msg) //  控制臺列印出資訊
prompt（'info'）//瀏覽器彈出輸入框，用戶輸入資訊

例如：

alert('Hello world')

顯示為：

prompt('請輸入你的名字')

顯示為：

js的變數以及變數命名規范

注：
1，變數（定義）：用于存盤資料的容器，
2，首先要宣告變數的型別其次在進行賦值，
3，更新變數：當更新變數的時候，以最后一次為準，
4，當宣告多個變數的時候，中間使用逗號進行隔開，以分號結尾，

1，只宣告不賦值         顯示為：undefined
2，不宣告不賦值直接用     顯示為：報錯
3，只賦值不宣告          顯示為:可以使用但不建議，不符合常用規范

變數命名規范：
1，由字母，數字，下劃線以及美元$符號組成
2，嚴格區分大小寫，小寫和大寫是完全不同的
3，不能以數字開頭，不能是關鍵字以及保留字
4，變數名要有意義，遵守駝峰命名，

駝峰命名：

myFristname(屬于駝峰命名法，第一個字母小寫第二個字母開始大寫)

資料型別 (面試)

資料型別的定義：根據資料占不同的儲存空間，所以把資料劃分不同的型別，
js的變數資料型別是只有程式在運行的程序中，由等號右邊的值所確定的，
即：變數的資料型別是由js引擎根據等號右邊的變數值的資料型別進行判斷，

資料型別的分類：

1，簡單：

number型別 、string型別（字串型別）、Boolean型別、undefined型別、NUll（空型別）

2，復雜

object型別

注：資料型別是入門的常識一定一定要知道！而且面試也會考！！！

表現形式

Number型別       數字型別                    默認值：0
Boolean型別      布爾型別 值為true或者false   默認值：false
String型別       字串型別，必須帶上引號      默認值：""
undefined        宣告變數無值               默認值:undefined
Null          宣告 var a = Null，宣告a為空值   默認值：null

Number 型別

1，number型別

主要分為二進制，八進制 ，十進制 ，十六進制

舉例：

八進制 ： 0 - 7之間，一般數字前面加0表示八進制

十六進制 ：數字0 - 9，字母a - f 之間，比如：#ffffff 表示的是白色，一般數字前面加0X表示十六進制

2，數字范圍（了解）

最大：alert（Number.Max_VALUE）//1.709769e + 308
最小：alert（Number.Min_VALUE）// 5e -324

3 ，特殊值（了解 NaN是一個重點）

1，infinity:無窮大

alert（Infinity）

2，負的 infinity 就為無窮小

3，NaN 意思就是 not a Number 代表非數值

例如：

當我們利用prompt讓用戶傳輸一個數字的時候，傳進來就是一個字串的形式，沒有轉換為數字，直接參與運算，回傳的值就為NaN

注：

isNaN ( X ) 判斷數字：

x為非數字，回傳的值是：true
x為數字，回傳的值是：false

String型別

String型別表示形式為字串型別，一般字串的表現形式為 : 進行加單引號或者雙引號

1 ， 字串轉義符：轉義符以 \ 開頭：

\ n : 換行      \ " : 雙引號    \ \ :斜杠 \    \ t : 縮進   \ b :空格

2，字串的引號嵌套：外雙內單 或者 外單內雙

3，字串的長度 ：使用length來獲取字串的長度

var str = 'my name is andy';
console.log( str.length) // 15

4，字串的拼接

字串 + 任何型別 = 拼接后的新字串
注：
1, 結果一定為字串型別
2, 數值相加，字符相連

var age = 19 ;
console.log('我今年已經'+ 19 +'歲了');//屬于字串型別，符號可巧記為 ：引引加加

undefined 型別

舉例：

var str = undefined;
console.log(str + 'pink')//undefinedpink

Null 型別

舉例：

var str = Null;
console.log( str + 'pink')//Nullpink

使用typeof檢測資料型別

舉例：

var num = 10;
console.log( typeof num);//number型別

型別轉換

轉為字串 ：
1，變數.toString()

1，變數.toString()   
var num = 10;
alert(num.toString())

2，String變數

var num = 1;
alert(String(num));

3，加號拼接：數字加一個字串等于一個字串

var num = 1;
alert(num + '字串');

轉換成數字型
1，parseInt(String)函式

parselnt('18');//轉換成整形

2，parseFloat（string）函式

parseFloat('78.21')//轉換成浮點型

3，Number(’ ')強制轉換

Number('12');

注：
parseInt(’ 120px’) 結果為120 會去掉px, parsefloat類似，
rem(‘120px’) 結果為NAN

4,利用演算法運算加 減 乘以及除實作隱式轉換
比如：

console.log('12'-0);//雙引號的12為字串型別，當減去零的時候，字串轉換成數字型別，結果為12

4，轉換為布爾型別

方式：Boolean( ) 函式

注：
1，當出現 0 、NAN、null、undefind以及空時，出現的值都是false.
2,其余的值為true.

識別符號

識別符號：開發人員為變數起的名字
關鍵字：js本身以及使用的名字，不能充當為變數名
保留字：未來可能成為關鍵字

算數運算子：加、減、乘和除
前置遞增運算子：

運算子

++num類似于num = num + 1
先加1在參與運算

后置遞增運算子：

num++類似于 num = num + 1
先參與運算后加1

關于等于

一個等于：是進行賦值；
兩個等于：判斷兩邊的值是否相等
三個等于：判斷兩邊的值和型別是否完全相等

邏輯運算子

&&：and的作用
||：or的作用
！：not的作用

賦值運算子

= ：直接賦值
+=、-=：加減一個數后再進行賦值
*=、/=、%=:乘除取模后再進行復制

回圈

if else回圈

if（條件運算式）{
陳述句1
}
else if(條件運算式){
陳述句2
}

三元運算式

條件運算式 ? 運算式 1 ：運算式 2
執行思路：
1，當條件運算式為真，則回傳到運算式1的值
2，當條件運算式為假，則回傳到運算式2的值

倒計時準備——小熱身

用戶輸入數字，若num<10，則前面補0則不補0

var time = prompt("請輸入一個0-59之間的數字");
time < 10 ？'0' + time : time

switch陳述句

switch(運算式){
case value1:執行陳述句1；
break;
case value2:執行陳述句1；
break;
case value3:執行陳述句1；
break;
case value4:執行陳述句1；
break;

...

default;
執行最后的陳述句；

}

小面試（switch 與if else if陳述句的區別）
1, switch:確定某個值的情況，if else確定于某個范圍
2，條件判斷后直接執行到某一個陳述句，效率比較高，而if else需要經過多次判斷
3，一般情況下，可以互相轉換

for回圈

for(初始變數；條件運算式1；操作運算式){

}

小面試：
continue與break的區別：
continue：跳出本次回圈，繼續執行下一次回圈
break：立即跳出整個回圈

陣列

定義陣列以及獲取陣列

var arr = [ ]//定義陣列
陣列名[索引號]//獲取陣列里的數

遍歷

1，使用for回圈來進行遍歷陣列的元素
2，for回圈里面的i表示的是計算器的索引號
3，通過length來獲取陣列里面的元素，如arr.length

舉例：把元素里面的所有數都進行遍歷了一遍

var arr = ['red','green','blue'];
for (var i = 0；i < arr.length ; i++）{
console.log(arr[i]);
}

小面試：
如何在陣列中增加元素？
通過1，通過修改length的長度；
原因：
1，通過length長度實作陣列擴容的目的；
2，length屬性有可讀寫
通過2，索引號增加陣列元素；

建議（關于學習陣列需要練習的習題的經典例題）：
1，利用陣列求最大值
2，篩選陣列
3，翻轉陣列
4，冒泡陣列

函式

函式就是封裝一段可以被重復的代碼塊

1，宣告函式

function 函式名（ 形參1，形參2）{
//函式體
}
函式名（實參1，實參2）

注：
1，function宣告函式的關鍵字，全部小寫
2，函式是做某件事情，函式名一般是動詞
3，函式不呼叫自己不執行

呼叫函式

函式名（）；//呼叫函式的時候一定要加小括號

舉例：

function cook(aru){
console.log(aru);
}
cook('Hello word')//實參的值hello word傳到形參，之后在進行執行下去

函式的回傳值return

function 函式名（）{
return 需要回傳的結果；
}
函式名（）；

只要函式遇到return就把后面的結果回傳到函式的呼叫者，在實際開發程序中，經常用一個變數來接受函式的回傳結果，

函式有return,則回傳到return后面的值；
函式沒有return，則回傳到undefined；

小面試：
break、continue以及return的區別:
1,break:結束當前的回圈（比如for回圈）
2,continue:結束本次回圈，繼續執行下一個回圈
3,return:不僅可以退出回圈，還能夠回傳到值，同時還結束當前的函式體

argument的使用

在js當中，每一個函式都有一個內置的函式物件，所有函式都有一個內置的argument物件，argument物件中存盤了傳遞的所有實參

function fn(){
console.log(arguments);
}
fn(1,2,3)

其中，fn是以一個偽陣列的形式存盤，即

argument（3）

argument具有的屬性：
1，具有陣列的length的屬性；
2，按照索引的方式進行存盤；
3，沒有真正的陣列的方法

作用域

變數的作用域根據全域作用域主要分為全域變數以及區域變數（區域變數只能在函式內部進行使用）

全域變數：只有瀏覽器關閉的時候才會銷毀，比較占記憶體資源，
區域變數：當我們程式執行完畢就會銷毀，比較節約記憶體資源

作用域鏈

當內部函式訪問外部函式的變數，采取的是鏈式查找方式，決定選取那一個值，采取就近原則

舉例：

var num = 10;
function fn(){
var num = 20;
}
function fun(){
console.log(num);//查找上一層是否有num，有num即為20
}
}

預決議

由于js代碼是由瀏覽器中的js決議器來執行，js決議器主要分為預決議以及代碼執行

預決議：js引擎會把js里面的所有的var還有function提升到當前作用域的最前面
代碼執行：依次從上往下進行執行，

完結

個人總喜歡一首歌為追光者，聽這首歌，總能讓我有種堅持下去的????
如果說，你是海上的煙火，我是浪花的泡沫，某一刻，你的光照亮了我

關于我：

好物分享：
html5 看這一篇就夠了！！！！.
零基礎入門前端《一》.
零基礎入門前端《二》.
零基礎入門前端《三》.

我是涼心姑娘，歡迎來我的博客！你的一個贊👍，是我寫下去的動力！