JavaScript Base
一 概述
1 什么是JavaScript
簡稱JS，是一種運行于JS解釋器或執行引擎中的腳本代碼，是一種瀏覽器解釋型的語言,主要用來實作頁面的互動與動態效果，
2 JS的組成
核心語法 -ECMAScript 規范了JS的基本語法
瀏覽器物件模型 -BOM Browser Object Model，提供了一系列操作瀏覽器的方法
檔案物件模型 -DOM Document Object Model ，提供了一系列操作的檔案的方法
二 JS使用方式
1 系結在元素標簽中，主要指JS事件
事件 ：用戶在元素上所激發的行為操作（單擊） 語法 ：
<div onclick="alter('hello javascript!')">click me</div>
? JS 操作如果涉及代碼非常多，一般會抽離出來單獨寫在JS檔案中，如果是簡單的代碼，可以以屬性值字串的形式書寫
2 檔案中，使用標簽
語法 ：
<script>
JS代碼
</script>
注意 ：標簽可以書寫在檔案的任意位置，書寫多次，但是不同的位置會影響代碼最終的執行效果，
3 外部鏈接
語法 ：
<script src=https://www.cnblogs.com/monkey-code/p/"'https://cdn.bootcss.com/jquery/3.2.1/core.js'"></script>
? src 引入的外部資源是網頁加載所必須的一部分，網頁在加載src檔案時，會等待檔案加載完畢再執行后面的代碼 ? href 網頁在加載href檔案時，不會等待加載完畢，邊加載邊向后執行 常用操作 ：
三 基礎語法
1 JS 是由陳述句組成的
JS陳述句可以由運算子，關鍵字，運算式組成
JS陳述句必須以英文分號結束;
JS中嚴格區分大小寫 console.log(); 正確寫法 Console.log(); 錯誤寫法
所有涉及的標點符號，必須使用英文的
2 JS中的注釋
單行注釋 //
多行注釋 /* 注釋文本 */
四 JS的變數與常量
1 變數
創建變數
先宣告，后賦值，使用關鍵字 var 進行宣告 宣告 ：var 變數名; 賦值 ：變數名 = 值;
宣告的同時賦值 var 變數名 = 值;
var name = "monkey"; console.log(name); document.write(name); alter(name);
使用注意
- 宣告變數時，關鍵字var可以省略，不建議省略，容易出問題
- 變數如果只宣告，未賦值，var a; 變數默認值為 undefined
變數名的命名規范
不能與JS中的關鍵字和保留字沖突（var default break class function for while do...name）
自定義的變數名可以由數字，字母，下劃線，$組成，不能使用數字開頭
var $ = 20;變數名稱嚴格區分大小寫
var name = 'monkey'; var Name = 'Monkey';命名盡量有意義一些，做到見名知意
多個單詞組成變數名，采用小駝峰標識
var userName = 'monkey';
變數的使用方式
賦值 賦值符號 = 作用 ：將賦值符號右邊的值賦給左邊的變數
var name = 'monkey'訪問
直接輸出
console.log(name);變數出現在賦值符號右邊，表示訪問變數的值
var name = 'monkey'; var myStr = 'My name is '+name; //myStr: My name is monkey
2 常量
一經宣告就不允許再被修改的資料就是常量
語法 ：
const 常量名 = 值;注意 ：
常量在宣告的同時必須賦值
為了與變數名區分，常量名一般采用全大寫的方式
const PI = 3.14159;
操作小數位 保留小數點后 n 位
toFixed(n); var num = 3.1415926; var res = num.toFixed(2); // 3.14
五 資料型別
1 基本資料型別（簡單資料型別）
(1) number 型別
數字型別，表示32位的整數或者是64位的浮點數 1 位元組 = 8 位 整數占4位元組 浮點數占8位元組
整數 常用的：十進制表示方法 八進制：以數字0開頭 以8為基數，采用0-7八個數字來表示，逢8進1
//0*8(0) + 1*8(1) var num = 010; var num2 = 011;十進制轉八進制，需要先將十進制轉換為二進制，再將二進制轉換為八進制 十六進制：以 0x 為前綴
var num3 = 0x35;
注意 ： 使用console.log()輸出整數時，不管用哪一種進制表示，都會轉成十進制輸出
小數
小數點計數法 3.14
指數計數法 1.5e3
e表示以10為底 e后面的數字表示10的次方數 1.5e3 = 1.5 * 10(3)
(2) string 型別
可以由 Unicode 的字符，數字或標點來組成
注意 ：字串在使用時必須使用''或""引起來
每個字符都有對應的Unicode碼
查看字符的Unicode碼 var s1 = '張'; 方法 ：charCodeAt(index) 作用 ： 用來查看指定位置的字符對應的Unicode編碼 注意 ：
字串中的字符都對應有一個下標，參考陣列的存盤方式,下標從0開始
var s = "hello"; s.charCodeAt(2);Unicode 編碼中前128位與ASCII碼值一致
可以查看中文字符對應的Unicode碼，如果想把中文的Unicode碼值轉換成字符，需要先將碼值轉換為16進制，再進行漢字字符的轉換 轉換16進制： toString(16);
var s = "張"; var r = s.charCodeAt(0); r = r.toString(16);16進制字串轉換漢字字符
"5f20" 添加\u轉義 var s = "\u5f20"; 注意 ： 不能寫 var s = "\u"+"5f20"; 語法錯誤- 中文范圍 "\u4e00" ~ "\u9fa5"
- 轉義字符 \n ：換行 \t : 制表符 " : " ' : ' \ : \
(3) boolean 布爾型別
用來表示真或假 注意 ： 布爾型別表示真或假，是可以參與數學運算的，true = 1 / false = 0
(4) undefined 型別
- 變數宣告未賦值時，為undefined
- 如果訪問物件不存在的屬性時，也為undefined
(5) null 型別
空型別
2 判斷資料型別
typeof 使用 ：
var n = "asda";
console.log(typeof n);
console.log(typeof(n));
3 參考資料型別（復雜資料型別）
陣列 函式 物件
六 資料型別轉換
相同資料型別的變數進行運算時，保持資料型別一致
1 隱式型別轉換（自動轉換）
number + string 當字串與其他資料型別相加時, + 表示字串的拼接，不再是數學運算 轉換規則 ：將非字串型別的資料轉換成字串之后進行拼接，最終結果為字串
var num = 15; var str = "18"; var r1 = num + str; // "1518" var r2 = 15 + 18 + "18"; // "3318" var r3 = "18" + 15 + 18; //"181518" var r4 = 15 + "18" + 15; //"151815"boolean + string 將布爾型別轉換為字串進行拼接
var n = true; var r = n + "你好"; // "true你好"number + Boolean 將布爾型別轉換為數字進行數學運算 true = 1; false = 0;
var n = true + 15; // 16 var n1 = false + 20; //20
2 強制型別轉換
toString() 將任意非字串型別的資料轉換為字串型別，并回傳轉換后的結果
var n = 100； var r = n.toString(); console.log(typeof n,typeof r);Number() 將數字字串或者是布林值轉換成number型別，如果字串中包含非數字字符，轉換失敗，會回傳NaN （Not a Number）
var r = Number("35.5"); //35.5 var r2 = Number(true); // 1 var r3 = Number("18a"); //NaNparseInt() 決議字串中的數字，只決議字串開頭中的數字，如果字串不是以數字開頭的，都回傳NaN，并且只決議整數
var r = parseInt("18.2a"); //18
var r2 = parseInt("a18"); //NaN
var r3 = parseInt(35.5); //35
? 如果parseInt方法的引數不是字串，會自動先使用toString()轉換成字串，之后再進行決議
- parseFloat() 作用等同于parseInt()，決議結果包含小數部分
var r = parseFloat("35.5"); //35.5
注意 ：如果字串中出現指數計數法表示的小數 "1.5e3",都視為是小數
七運算子
1 賦值運算子
? = ? 將右邊的值賦給左邊變數
2 算數運算子
-
-
- / % //加 減 乘 除 取余
-
2. ++ -- 自增或自減運算子
變數的自增和自減指的是在自身基礎上進行 +1或-1 的操作
```js
var n = 5;
n ++; // n = n + 1;
console.log(n); // 6
++ n;
console.log(n); // 7
注意：
1. 自增或自減運算子在單獨與變數結合時，放前和放后沒有區別
2. 如果自增或自減運算子與其他運算子結合使用，要區分前綴和后綴,做前綴，那就先++/--,再進行賦值或其他運算，如果做后綴，就先結合其他運算子，再進行++ / --
```js
var num = 5;
var res = num ++;
console.log(num,res); // 6 5
```
? 如果是 var res = num ++;
```js
var num = 5;
var res = ++ num;
console.log(num,res); // 6
```
*先找變數 ,從變數位置從右向左結合運算子*
3 關系運算子（比較運算子）
> 大于
>= 大于等于
< 小于
<= 小于等于
== 相等
!= 不等
=== 恒等
!== 不恒等
注意 ：關系運算的結果為布爾型別
數字與字串進行比較
首先會自動將字串轉換為數字再進行比較，如果轉換成功，按照數字之間的比較進行運算；如果轉換失敗，會變成數字與 NaN之間的比較，結果永遠都為False
"10" > 5; // true "10a" > 5; //false "你好" > 5; //fasle字串之間的比較，進行每位字符Unicode碼的比較， 當前位如果相同，就后移至下一位再次進行比較， 當前位如果不同，直接出結果
"10" > "5"; // false "ab" > "ac"; //false "張三豐" > "張無忌"; //false== === / != !==
相等 ：== 用于判斷兩個值是否相等，在比較時，會自動轉換資料型別，只要值相等，結果就為True
恒等 ：=== 用于判斷兩個變數的資料型別和值是否完全相等，不會進行資料型別轉換，只有當運算元的資料型別保持一致，值相等，才為True
"10" == 10; //true "10" === 10; // false不等 ：!= 在兩端值不相等的情況下，回傳True 不恒等 ：!== 兩個運算元中，資料型別與值只要有一個不相等，就回傳True，否則是False
"10" != 10; //false "10" != "10"; //false "10" !== 10; //true "10" !== "10"; //false
4 邏輯運算子
進行多項比較，并將結果組合為單一的布林值 && ：邏輯與 等同于 python and，左右為運算式，只有兩個運算式的結果都為真，邏輯與的結果才為真 || ：邏輯或 等同于 python or ，只要有一個條件為真，結果就為真 ！ ：邏輯非 等同于 python not ，對現有條件的結果進行取反操作
- 條件1 && 條件2 條件1 條件2 結果
取值 true true true
? true false false
? false true false
結果 false false false
條件1 || 條件2
條件1 條件2 結果
取值 true true true
? true false true
? false true true
結果 false false false
- !條件 直接取反 非真即假，非假即真
5 位運算子
程式中所有的資料在計算機中都是以二進制存盤的，位運算，就是對二進制位進行操作
按位與 ：& 將整數轉換為二進制形式，每一位都進行與操作
011 & 101 et : 0 1 1 & 1 0 1 ------------- 0 0 1注意 ： 任何數字與 1 進行位與操作，結果為1時，表明運算元為奇數，結果為0，運算元為偶數，所以可以用來判斷數字奇偶
3 & 1 -> 011 & 001 -> 001
2 & 1 -> 010 & 001 -> 000
按位或 ：|
3 | 5 011 | 101
111
按位異或 ：^ 兩個數字的二進制位進行比較，相同則為0，不同則為1
3 | 5 011 | 101
111
注意 ：^ 操作可以在不借助第三方變數的情況下，交換兩個變數的值
var a = 3,b = 5;
1. 普通做法
var c = a;
a = b;
b = c;
2. ^
a = a ^ b; -> a = 6;
b = a ^ b; -> 6 ^ 5 ->110 ^ 101 ->011
a = a ^ b; -> 6 ^ 3 ->110 ^ 011 ->101
6 三目運算子
三目運算子，有三個運算元 類似： 單目運算子（一元運算子）++ -- ！typeof,只有一個運算元的運算子； 雙目運算子（二元運算子）+ - * / % && || >...有兩個運算元的運算子 語法 ： 條件運算式 ？運算式1 ：運算式2; 先判斷條件運算式的結果，為真，執行運算式1；為假，執行運算式2
var a = 150;
var res = a > 120? "偏胖，該減肥了" ："正好，不胖不瘦";
consoole.log(res);
八 流程控制陳述句
? 控制當前代碼的執行順序 ? 流程陳述句結構 ：
1 順序結構
? 按照代碼書寫順序，從上到下執行
2 分支（選擇）結構
? 根據條件選擇某一段代碼執行
(1)if 結構
語法 ：
if (條件){
//待執行的陳述句
//只有條件為真，才執行{}里的陳述句
}
if()后面的可以省略，省略之后，只控制該結構下的第一條陳述句
條件盡可能是布爾型別的
任何非0值都為真，0為假，以下情況，條件的結果都為假 if(0) if(0.0) if("") if(NaN) if(undefined) if(null)
(2)多重分支結構
if(條件1){
//條件為真時執行
} else if(條件2){
//條件1為假，并且條件2為真時執行
} else if(條件3){
//條件2為假，條件3為真時執行
}
...
else{}
(3)switch 陳述句
switch (變數) {
case 值1 :
//如果變數的值與case給出的值相等，就會執行 ：后面的代碼段
代碼塊;
break; //跳出switch陳述句，不再向后進行匹配，可以省略
case 值2 ：
代碼塊;
break;
case 值3 ：
代碼塊;
break;
...
default :
代碼塊; // 所有case都匹配失敗之后執行的默認陳述句
}
變數與case 值的匹配，是用===恒等判斷的，只有資料型別與值都相等才能匹配成功
var a = 10; switch (a) { case '10': 代碼塊 }break 表示跳出switch判斷，后面的判斷陳述句不執行
default關鍵字用于在運算式不匹配前面給出的任何一種情形時，最終執行的操作
3 回圈結構
作用 重復執行某段代碼
回圈三要素 回圈變數 回圈條件 回圈體
(1)while 回圈
語法：
while (回圈條件){ 回圈體 }執行流程
- 定義回圈變數
- 執行回圈體
- 更新回圈變數
- 判斷回圈條件，條件成立，重復2-3-4，條件不成立，結束回圈
(2)do-while回圈
語法
do{ 回圈體 }while(回圈條件);
(3)while 與 do-while區別：
? while回圈先判斷回圈條件，為真才執行回圈體； do-while回圈不管條件是否成立，先執行回圈體，后判斷回圈條件，即使回圈條件不成立，也會執行一遍回圈體
(4)for回圈
- 語法
for(1.定義回圈變數; 2.判斷回圈條件; 3.更新回圈變數)
{
回圈體
}
回圈流程
- 定義回圈變數
- 判斷回圈條件
- 條件成立，執行回圈體
- 更新回圈變數
for 回圈與 while回圈的區別
- 相同點 ：執行流程相同
- 不同點 ： while 回圈常用于不確定回圈次數的場合 for 回圈常用于確定回圈次數的場合
回圈控制
- break break用在回圈體中，表示跳出回圈，結束整個回圈，并且回圈體中break后面的代碼都不執行
- continue continue用在回圈體中，表示跳出本次回圈，開始下一次回圈
回圈的嵌套 允許在一個回圈中嵌套另一個回圈 語法 ： for(var i = 1; i ? 9; i ++){ //行
for(var j = 1; j <= 9; j ++){ //列 }
九 函式和作用域
函式定義
? 就是一段待執行的代碼塊
函式作用
? 實作多條陳述句的封裝 ? 實作代碼復用
函式使用
- 函式的宣告
- 函式的呼叫 注意 ：函式先宣告后呼叫（JS中非強制）
函式語法
(1) 函式宣告
- 語法
function 函式名 (引數串列) {
函式體;
回傳值
}
JS中函式宣告使用function關鍵字
函式名自定義，遵照變數命名規范，見名知意
引數串列，引數表示函式體執行所需要的資料，可以為空，為空時()不能省略；多個引數之間使用,隔開
function sum (a,b){
return a + b;
}
- 回傳值 使用return關鍵字，將函式體內部執行的結果傳遞給外界使用，只能回傳一個值，回傳值不需要的話，可以省略return
function showFn(){
console.log("hello");
}
注意 ：return一定要寫在函式體的末尾，return關鍵字后面的代碼都不執行
- 匿名函式
var fn = function (){
函式體
};
(2) 函式呼叫
語法
函式名(10,20); var res = 函式名(10,20);函式引數分為形參和實參，函式宣告時，使用形參，函式呼叫時，傳遞實參 形參 ：代號 實參 ：具體的資料 傳參的程序，就是給函式中形參變數賦值的程序
函式如果有回傳值，在呼叫時，需要定義變數接識訓傳值
變數的作用域
(1)含義
變數的作用域指的是變數起作用的范圍
(2)分類 ：
全域作用域 處在全域作用域中的變數就是全域變數 2. 在function之外通過var宣告的變數都是全域變數，在任何地方都可以訪問 3. 宣告變數時，省略var關鍵字，一律是全域變數，推薦使用var關鍵字，不要省略
區域作用域 （JS中區域作用域指的是函式作用域） 區域作用域中的變數就叫區域變數 5. 在函式內部使用var關鍵字宣告的變數都是區域變數，只在當前函式作用域中可以訪問，外界無法訪問 6. 區域變數出了函式就不能訪問了
注意 ： 在函式中訪問變數，
1. 如果當前函式中沒有該變數，就訪問全域作用域中的變數 2. 如果當前函式中定義了該變數，全域中也有相同的變數名，函式就近訪問變數
十 陣列及API
定義
? Array 陣列是一個有序的元素序列，陣列中的元素會自動分配下標，從0開始，方便讀寫
陣列創建
創建空陣列
var arry_name = []; // var 陣列名 = new Array(); //創建陣列的同時初始化元素
var arry_name = [elem1,elem2,...]; var arry_name = new Array(elem1,elem2,...); // 只包含一個引數時表述創建的陣列長度 var arr = new Array(5); // 創建長度為 5 的陣列
陣列使用
獲取陣列的長度 屬性 ： length 使用 ：陣列名.length; //獲取陣列長度
訪問陣列元素 陣列中每一個元素都有對應的下標 元素的下標范圍 0 → length-1 語法 ：陣列名[下標];
設定陣列元素 語法 ：陣列名[下標] = value;
清空陣列中元素 arr.length = 0;
回圈遍歷陣列
for(var i = 0; i < arr.length; i ++){ arr[i]; }
陣列的API
toString() 作用 ：將陣列中的元素轉換為字串回傳 回傳值 ：字串
var arr = [1,2,3]; var s = arr.toString(); console.log(s); //"1,2,3"join() 作用 ：將陣列中的元素連接成一個字串并回傳 回傳值 ：字串 引數 ：可選，如果省略引數，默認元素之間使用,連接， 可以給引數，指定元素之間的連接符
reverse() 作用 ：反轉陣列元素 回傳值 ：陣列，會改變陣列的原有結構
var arr = [10,20,30]; //[30,20,10] console.log(arr.reverse());sort() 作用 ：對陣列中元素進行排序 回傳值 ：陣列，會改變陣列原有結構 引數 ：可選，自定義排序函式， 默認按照元素的Unicode碼升序排列
升序的排序函式
function sortAsc(a,b){ return a-b; } arr.sort(sortAsc);解釋 ：
- sortAsc函式接收兩個引數， 會自動將陣列中相鄰的兩個元素傳遞給引數
- 如果回傳值>0，交換兩個元素的位置，否則不變
匿名函式作為排序函式，直接寫在（）中
arr.sort(function (a,b){ return b-a;});
陣列的進出堆疊操作
堆疊結構 ：遵循先進后出原則 堆疊操作可以快速操作陣列中的頭尾元素
1. push(data)
入堆疊操作，向陣列的尾部添加元素，可以是一個或多個
回傳值 ：回傳新陣列的長度
```js
arr[arr.length] = 'hello';
arr.push("Hi");
arr.push(10,20); //多個資料之間只用,隔開
```
- pop() 出堆疊操作，洗掉陣列尾部元素 回傳值 ：回傳被洗掉的元素
- unshift() 向陣列頭部添加一個或多個元素 回傳最終陣列的長度
- shift() 洗掉陣列中頭部元素 回傳被洗掉的元素
二維陣列
陣列中每個元素又是一個陣列
var arr = [[10,9,8],[2,3,4],[3,0,3]];
console.log(arr.length); //3
//向二維陣列中添加元素
arr[1][2] = 50;
//訪問二維陣列中元素
console.log(arr[2][0]); //30
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/65762.html
標籤：JavaScript
下一篇：前端開發工程師都能做什么？