JS-1基本語法
初識JavaScript
- JavaScript是一種執行在客戶端的指令碼語言
- 指令碼語言：不需要編譯，執行過程中由js直譯器（js引擎）逐行來進行解釋並執行
- 現在也可以基於Node.js技術進行伺服器程式設計
- 瀏覽器分為渲染引擎和JS引擎，渲染引擎用來解析HTML和CSS，俗稱核心，比如chrome瀏覽器的blink，老版本的webkit,JS引擎也成js直譯器，用來讀取網頁中的JavaScript程式碼，對其處理後執行，比如chrome瀏覽器的V8
- JS引擎執行程式碼時逐行解釋每一句原碼，然後由計算機取執行，所以歸為指令碼語言
JS作用
- 表單動態校驗
- 網頁特效
- 服務端開發(Node.js)
- 桌面程式（Electron)
- App（Cordova）
- 控制硬體-物聯網（Ruff）
- 遊戲開發（cocos2D-js）
JS組成
- ECMAScript ：規定了JS的程式設計語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準
- DOM：文件物件模型
- BOM：瀏覽器物件模型，提供了獨立於內容的，可以與瀏覽器視窗互動的物件結構，通過BOM可以操作瀏覽器視窗，比如彈出框、控制瀏覽器跳轉、獲取解析度等
書寫方法
- 行內式：寫在元素內部，JS中推薦用單引號，可讀性差，一般特殊情況下使用
- 內嵌式：
- 外部JS檔案：
註釋
- 單行註釋// ctrl+/
- 多行註釋/* */ shift+alt+a
常用輸入輸出語句
- alert(msg) 瀏覽器彈出警示框
- console.log(msg) 瀏覽器控制檯列印輸出資訊
- prompt(info) 瀏覽器彈出輸入框，使用者可以接入
變數
宣告變數
var age;
賦值
age=18;
變數的初始化
var age=18;
變數更新
多次賦值後會被覆蓋
宣告多個變數
var age=18,
address='sss',
gz='2000';
命名規範
- 不能是關鍵字或者保留字
- 區分大小寫
- 只能字母數字下劃線組成，不能數字開頭
- 首字母小寫，後面單詞字母需要大寫
識別符號、關鍵字、保留字
識別符號：開發人員為變數、屬性、函式、引數取的名字
關鍵字：JS已經使用了的字，不能作為變數名、方法名
保留字：預留的關鍵字
資料型別
JS是一種弱型別或者說動態語言，意味著不用提前宣告變數的型別，在程式執行過程中，型別會被自動確定
簡單資料型別
- number：數字型，JS中八進位制前面要加0，十六進位制前加0x
數字型別有三個特殊值，infinity、-infinity、NaN（代表非數值）
可以用isNaN判斷是否是數字，
- boolean：布林型型別，預設為false
- string： 字串型別，預設值為“”
外用單引號，裡面用雙引號，或者外雙內單
可以用length獲取字串長度
str.length
字串拼接
字串+任意型別=拼接後的新字串，拼接前把任意型別轉化為字串
- undefined： 聲明瞭但是沒有給值，預設值為undefined
- null：空型別，預設值為null
資料型別的檢測
- typeof
- 字面量字面量是原始碼中一個固定值的表示法，通俗來說就是字面量表示如何表達這個值
資料型別轉換
把一種資料型別的變數轉換成另一種資料型別
轉換成字串型：
- toString()
- String()強制轉換
- 加號拼接字串，和字串拼接的結果都是字串，這種方法也稱為隱式轉換
轉換成數字型（前兩個重點）
- parseInt(string)： 可以把帶單位的值變數字120px-120,得到是整數
- parseFloat(string)：得到是浮點數
- Numer()
- js隱式轉換，利用算術運算 如：'12'-0 '12'*1 '12'/1 加號是轉化成字串
轉化成布林型
- Boolean()代表空、否定的值會被轉換為false，如'',0,NaN,null,undefined,其餘值都會轉化為true
解釋型語言和編譯型語言
編譯和解釋的區別在於翻譯的時間點不同，編譯器是程式碼執行之前進行編譯生成機器語言，直譯器讀到每一行都解釋為機器語言並執行，java是編譯語言，js是解釋型語言
運算子
算術運算子
+-*/% (%是取餘，一般用於判斷能否被整除)
表示式和返回值
由數字變數運算子等組成的式子
遞增運算子和遞減運算子
++ --
- 放在變數前面，表示前置遞增，放在變數後面，表示前置遞減
- 必須和變數配合使用
- ++在前，先加後返回值；++在後先返回值後自加1
- 開發中大多數使用後置遞增/遞減，程式碼獨佔一行
比較運算子
- < > >= <= == !=
- === ！==全等、不全等，要求值和資料型別都一致
邏輯運算子
&& || ！
短路運算（邏輯中斷）：當有多個表示式時，左邊的表示式值可以確定結果時，就不再繼續運算右邊的表示式的值
賦值運算子
- =
- += -= 加、減一個數後再賦值
- *= /= %= 乘、除、取模後賦值
運算子優先順序
- 1 ()
- 2 ++ -- !
- 3 先*/%後+-
- 4 > >= < <=
- 5 == ！= === ！==
- 6 先&&後||
- 7 =
- 8 ，
流程控制
分為順序結構、分支結構、迴圈結構三種，會按照程式碼的先後順序依次執行
分支結構
if(條件表示式) {
//
}
else if (){
}
else {
}
//三元表示式
num>5?'11':'22'
//switch
switch(表示式) {
case value1:
執行語句1;
break;
case value2:
執行語句2;
break;
default:
執行語句
迴圈
//for迴圈
for(初始化變數；條件表示式；操作表示式){
//迴圈體
}
//while
while(條件表示式) {
//迴圈體
}
// do while 先執行一次迴圈體，如果條件表示式為真，則繼續執行迴圈體
do {
//迴圈體
}while(條件表示式)
continue;
break;
陣列
var arr= [1,2,3,4];
利用new建立陣列
var 陣列名=new Array();
var arr=new Array();
利用陣列字面量建立陣列
var 陣列名=[];
var 陣列名=[1,2,3];
數組裡可以存放數字、字串、布林型等
遍歷陣列
可以通過迴圈
陣列新增元素
- 修改length長度
- 直接增加索引號，追加陣列元素
函式
宣告函式
function 函式名(形參) {
//函式體
}
var 變數名=function(){
//匿名函式，fun是變數名，不是函式名，但是呼叫的時候可以fun()
}
呼叫函式
函式名(實參);
形參實參不匹配
- 個數相等，正常輸出
- 實參個數大於形參個數，得到形參個數
- 實參個數小於形參個數，多的形參值視為undefined，相加結果為NaN
函式返回
return
- return後面的語句不會再被執行
- return只能返回一個值，如果返回多個，返回的結果是最後一個
- 函式沒有return則返回undefined
Arguements的使用
當不確定有多少個引數傳遞的時候，可以用arguments來獲取，在JS中，arguments實際上是當前函式的一個內建物件，所有函式都內建了一個arguments物件，arguments物件儲存了傳遞的所有實參
- 是一個偽陣列
- 沒有真正陣列的一些方法
- 按照索引的方式儲存的
JS作用域
- 作用域就是程式碼名字在某個範圍內起效果，目的是在某個範圍內起作用和效果，目的是提高程式的可靠性，重要的是減少命名衝突
- es6之前，js的作用域分為全域性作用域和區域性作用域
- 全域性作用域：整個script標籤 或者一個單獨的js檔案
- 區域性作用域：在函式內部就是區域性作用域，這個程式碼的名字只在函式內部起效果和作用
- 全域性變數只有在瀏覽器關閉的時候才會銷燬，區域性變數只要在程式執行完畢就會銷燬，比較節約記憶體資源
JS沒有塊級作用域（es6會新增）
塊級作用域{}，即只能在大括號裡使用的變數
作用域鏈
函式巢狀函式時，就會巢狀一個新的作用域；
根據內部函式可以訪問外部函式變數的機制，就用鏈式查詢的方式，決定哪些資料能被內部函式訪問（取哪個值），就稱為作用域鏈，類似就近原則
JS預解析
JS解析器在執行程式碼的時候，分為預解析和程式碼執行兩步，預解析時，js會先將js裡面所有var還有function提升到當前作用域的最前面
預解析分為變數預解析（變數提升）和函式預解析（函式提升）
（1）變數提升：把所有的變數宣告提升到當前的作用域最前面，不提供賦值操作
（2）函式提升：把所有的函式宣告提升到當前的作用域最前面，不提供呼叫操作
JS物件
物件：一個具體的事物，可以是一個數據庫，一個網頁，一個遠端伺服器的連線
物件是由屬性和方法組成的
- 屬性：事物的特徵，在物件中用屬性來表示（常用名詞
- 方法：事物的行為，在物件中用方法來表示（常用動詞
為什麼需要物件
陣列很難儲存一個人的完整資訊，可以使用物件實現
var arr={'你好'，'男',128,154};
建立物件
字面量方法：
屬性或者方法採用鍵值對的形式，多個屬性之間用逗號隔開，方法冒號後面跟的是一個匿名函式
//字面量建立物件
var obj= {
usname: '張三',
age :18,
say: function() {
console.log('hi');
}
};
console.log(obj.uname);//呼叫屬性
console.log(obj['age']);//呼叫屬性的第二種方法
obj.say();//呼叫物件的方法
利用new object建立物件
var obj =new Object();
obj.usename='張三';
obj.age=18;
obj.say=function(){
}
利用建構函式建立物件
前面兩個建立物件的方式只能一次建立一個物件，可以利用建構函式批量構造，這種函式稱為建構函式,這種函式封裝的不是普通程式碼，而是物件
定義：把物件裡一些相同的屬性和方法抽象出來封裝到函式裡
建構函式的語法格式
function 建構函式名() {
this.屬性=值；
this.方法=function() {}
}
new 建構函式名()
-------
function Star(uname,age,sex) {
this.name=uname;
this.age=age;
this.sex=sex;
}
new Star('張三',18,'男');
- 建構函式名字首字母要大寫
- 建構函式不需要return就可以返回結果
- 新建建構函式必須用new
- 只要new Star() 呼叫函式就建立一個物件
- 屬性和方法前必須加this
遍歷物件
for (變數 in 物件)
for (var k in obj) {//一般喜歡用k或key
console.log(k);//得到屬性名
console.log(obj[k]);//得到屬性值
}
方法也會被遍歷出來
JS內建物件
- JS中物件分為自定義物件、內建物件、瀏覽器物件
- 前兩種是ECMAScript，第三個是JS獨有的
- 內建物件是JS中自帶的一些物件，提供了最常用和基本的功能，幫助我們快速開發
- 內建物件包括Math、Date、Array、String等
MDN
Mozilla開發者網路（MDN）提供了有關開放網路技術的資訊，包括HTML、CSS和全球資訊網及HTML5應用的API
Math物件
是一個內建物件，不是建構函式，不需要通過new呼叫
Math.PI Math.max(非數值型返回NaN，無引數返回-infinite)
Math.abs() 取絕對值Math.ceil()向上取整 Math.floor()向下取整 Math.round() 四捨五入
隨機數方法
Math.random():返回一個隨機小數，0<=x<1,浮點數
日期物件
- date是個建構函式,必須使用new呼叫
- 如果沒有輸入引數，則返回當前系統的當前時間
var today=new Date();
var date1=new Date(2019,10,1);//月份要小一個月，是從0-11的月
var date2=new Date('2019-10-1 8:8:8');
日期格式化
- date.getFullYear() 返回年
- date.getMonth()+1 返回月份
- date.getDate() 返回幾號
- date.getHours()
- date.getMinutes()
- date.getSeconds()
獲得Date總的毫秒數，是距離1970年1月1日過了多少毫秒數
var date=new Date()
console.log(date.valueOf());
console.log(date.getTime());
var date1=+new Date();//最常用的寫法
console.log(date1);
console.log(Date.now());//H5新增的獲得總的毫秒數
陣列物件
檢測是否為陣列
console.log(arr instanceof Array);//（1）用instanceof檢測
console.log(Array.isArray(arr));//(2)優先於instanceof，H5新增，IE9以上版本支援
增加陣列元素
arr.push(1)//在arr陣列中新增1,返回的結果是新陣列的長度
arr.unshift('red'，‘green');//在arr陣列前新增'red','green',返回新陣列的長度
刪除陣列元素
arr.pop()//刪除陣列的最後一個元素，返回值是刪除掉的元素
arr.shift()//刪除陣列的第一個元素，shift完畢後，返回第一個元素的值
陣列排序
arr.reverse(); //翻轉陣列
arr.sort();//陣列排序，比較的是字串，數字排序要用以下方法
arr.sort(function(a,b)){
return a-b;//升序排列，b-a是降序
});
陣列索引方法
arr.indexOf('blue')//返回該陣列元素的索引號
//只返回第一個滿足條件的索引號，如果在該陣列中找不到元素，則返回-1
arr.lastIndexOf('blue')//倒序查詢
陣列轉化為字串
arr.toString()//
arr.join()//預設逗號分隔
arr.join('-')；//用-分隔
arr.join('&')；//表單常用分隔符
其他
arr.concat() //拼接兩個或多個數組，不影響原陣列，返回一個新陣列
arr.slice() //陣列擷取，返回被擷取專案的新陣列slice(begin,end)
arr.splice() //陣列刪除splice（第幾個開始，要刪除個數） 返回被刪除專案的新陣列，會影響原陣列
字串物件
字串如何呼叫length的？
- 把簡單資料型別包含為複雜資料型別
- 把臨時變數的值給str
- 銷燬這個臨時變數
基本包裝型別：String、Number、Boolean，，就是把簡單資料型別包裝成複雜資料型別，這樣基本資料型別就就有了屬性和方法
字串的不可變性
隻字符串裡面的值沒有變，只是指向了新的地址，看起來像變了，因此不應該大量拼接字串
根據字元返回位置
str.indexOf('要查詢的字元',[起始的位置])//可以實現從第幾位開始查詢，查詢不到返回的結果是-1
根據位置返回字元
str.charAt(index)//返回第index個字元，從0開始
str.charCodeAt(index)//返回相應索引號的字元ASCII值 目的：判斷使用者按下了哪個鍵
str[index]//H5新增
字串操作方法
str.concat('a')//相當於str+'a'
substr(擷取的起始位置，擷取幾個字元)
slice
str.replace('a','b')//把str中的'a'替換成'b',只會替換第一個
str.split(',')//字串轉化為陣列，用','分割，可以改為其他分隔符
toUpperCase()//轉換大寫
toLowerCase()//轉換小寫
資料型別總結
簡單資料型別/值型別：string、number、boolean、underfined、null
複雜型別/引用型別：在儲存時變數中儲存的僅僅是地址（引用），因此叫做引用資料型別，是通過new建立的型別
- 一般有個變數打算以後放物件，可以先讓他等於none
- 一般簡單的資料型別值放在棧中，複雜的是把地址放在棧中，內容是存放在堆中
- 函式的形參也可以看做是一個變數，當我們把引用型別變數傳給形參時，實質上是把變數在棧內儲存的堆地址複製給了形參，形參和實參儲存的是同一個堆地址，因此函式內部對輸入的物件進行改變的時候，直接改變了堆中的內容，函式執行完畢後，該物件的內容已經改變