1.NaN
isNaN()：非數（not number），可確定值是否為非數字，是非數字（不是數字）輸出true，不是非數（是數字）輸出fluse
NaN 表示 “不是一個數字”，但是 NaN 的 typeof 結果卻是 number
2.replace方法
x.replace（原文本需要更改的部分，被更改為）
3.外部文件：可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。
外部 JavaScript 文件的文件擴展名是 .js。
如需使用外部文件，請在 <script> 標簽的 "src" 屬性中設置該 .js 文件：
<script src="myScript.js"></script>
注釋：myFunction 保存在名為 "myScript.js" 的外部文件中。
4.對象也是一個變量，但對象可以包含多個變量，每個值以 name:value 對呈現。
var car = {name:"Fiat", model:500, color:"white"};
5.對象方法作為一個函數定義存儲在對象屬性中。對象也是變量，但是對象包含多個變量屬性
對象方法是一個函數定義,并作為一個屬性值存儲。
var person = {
? ? firstName: "John",
? ? lastName : "Doe",
? ? fullName : function() //對象方法（作為函數定義儲存在對象屬性中）
? ? {
? ? ? return this.firstName + " " + this.lastName;
? ? }
對象方法通過添加 () 調用 (作為一個函數)。
接上：
document.getElementById("demo").innerHTML = person.fullName();
6.作用域是可訪問變量的集合。
如果變量在函數內沒有聲明（沒有使用 var 關鍵字），該變量為全局變量。
function myFunction() {
? ? carName = "Volvo";//沒有使用給關鍵字var，為全局變量
}
7.Math.random()
是令系統隨機選取大于等于 0.0 且小于 1.0 的偽隨機 double 值
8.for/in 語句循環遍歷對象的屬性
function myFunction(){
? ? var x;
? ? var txt;
? ? var person={fname:"Bill",lname:"Gates",age:56};
? ? for (x in person){
? ? ? ? txt=txt + person[x];//結果：BillGates56
? ? }
9.do/while 循環：
該循環至少會執行一次，即使條件為 false 它也會執行一次，因為代碼塊會在條件被測試前執行：
do
{
? ? 需要執行的代碼
}
while (條件);
10.break和continue的區別：
break：break 語句可用于跳出循環。
continue：continue 語句中斷當前的循環中的迭代，然后繼續循環下一個迭代
11.typeof(數據類型）和indexOf（返回指定字符串在字符串中首次出現的位置）
typeof 操作符來檢測變量的數據類型
數組是一種特殊的對象類型。 因此 typeof [1,2,3,4] 返回 object。
使用typeof檢測：對象{ }和數組[ ]的數據類型都是object(對象)
null 值為空，但是數據類型是object。 undefined值為 undefined, 類型為 undefined。
typeof 一個沒有值的變量會返回 undefined
null 和 undefined 的值相等，但類型不等：
typeof undefined? ? ? // undefined
typeof null? ? ? ? // object
null === undefined? ? ? // false
null == undefined? ? ? // true
12.js的 6 種不同的數據類型：
string
number
boolean
object
function
symbol
13.js三種對象類型：
Object
Date：數據類型為object
Array：數據類型為object
2 個不包含任何值的數據類型：
null：數據類型為object
undefined：數據類型為undefined
NaN：數據類型為number
14。強轉為數字
：字符串包含數字(如 "3.14") 轉換為數字 (如 3.14)。空字符串轉換為 0。其他的字符串會轉換為 NaN (不是個數字)。
Number("3.14") // 返回 3.14 Number(" ")? // 返回 0 Number("")? // 返回 0 Number("99 88") // 返回 NaN
15.變量后跟一個+：變量的數據類型會轉換為數字型
將布爾值轉換為數字
全局方法 Number() 可將布爾值轉換為數字：
Number(false)? // 返回 0 Number(true)? // 返回 1
日期方法 getTime()和Number() 都可將日期轉換為數字：d = new Date(); Number(d) d.getTime()
16.正則基礎
正則表達式可以匹配某些特定的數據，可以從龐大的文字信息中提取出一小段你需要的數據
（1）字符組（[]）允許匹配一組可能出現的字符。匹配Java和 java：[Jj]ava
（2）連字符(-)代表區間.
匹配數據所有的數字、小寫字母和大寫字母:[0-9a-zA-Z]
（3）在正則中使用 \ 就可以進行對特殊符號進行轉義 匹配-：-
（4）[]字符組中可以放多個條件例如，想要匹配數字和小寫字母可以這樣寫：[0-9a-z]
（5）字符串開頭使用^實現取反
在字符數組開頭使用 ^ 字符實現取反操作 n【^e】 的意思就是n后面的字母不能為 e
（6）\w:任意字符
\w:與任意單詞字符匹配：即【0-9】，【a-z】，【A-Z】，_(下劃線)
（7）\d:與任意數字匹配
（8）\s:匹配空格
\s快捷方式可以匹配空白字符，比如空格，tab、換行等。
（9）\s【^D】：空白字符后面不跟D
（10）\b 匹配的是單詞的邊界
（11）快捷方法取反：小寫改大寫
快捷方式也可以取反，例如對于\w的取反為\W，將小寫改寫成大寫即可，其他快捷方式也遵循這個規則。
（12）^區間內取反，^區間外表字符串開始
^在區間里面是取反，在區間外邊表示一個字符串的開始 ^字符串
（13）$表示字符串結尾
在區間外部后邊寫$,表示一個字符串的結尾 字符串$
（14）.為任意字符
.是任意字符，只能出現在方括號之外，.字符只有一個不能匹配的字符，也就是換行符（\n）
（15）？是可選字符
，字符后加？，表示該字符可出現可不出現，即？用于匹配它之前的字符0次或1次
（16）{M，N}：重復區間
不知道具體要匹配字符組要重復的次數時使用重復區間，語法：{M,N}，M是下界而N是上界
\d{3,4} 既可以匹配3個數字也可以匹配4個數字，不過當有4個數字的時候，優先匹配的是4個數字，這是因為正則表達式默認是貪婪模式，即盡可能的匹配更多字符，而要使用非貪婪模式，我們要在表達式后面加上 ?號。
（17）開區間：\d{n,} 閉區間不寫即可表示匹配一個或無數個。
+ 匹配1個到無數個，使用 *代表0個到無數個
+等價于{1,}，*等價于{0,}。
正則總結：
實例 描述
[Pp]ython 匹配 “Python” 或 “python”。
rub[ye] 匹配 “ruby” 或 “rube”。
[abcdef] 匹配中括號內的任意一個字母。
[0-9] 匹配任何數字。類似于 [0123456789]。
[a-z] 匹配任何小寫字母。
[A-Z] 匹配任何大寫字母。
[a-zA-Z0-9] 匹配任何字母及數字。
[^au] 除了au字母以外的所有字符。
[^0-9] 匹配除了數字外的字符。
實例 描述
. 匹配除 “\n” 之外的任何單個字符。要匹配包括 ‘\n’ 在內的任何字符，請使用象 ‘[.\n]’ 的模式。
？ 匹配一個字符零次或一次，另一個作用是非貪婪模式
+ 匹配1次或多次
* 匹配0次或多次
\b 匹配單詞的邊界
\d 匹配一個數字字符。等價于 [0-9]。匹配多個數字字符：\d{n}
\D 匹配一個非數字字符，等價于 0-9。
\s 匹配任何空白字符，包括空格、制表符、換頁符等等。等價于 [ \f\n\r\t\v]。
\S 匹配任何非空白字符。等價于 \f\n\r\t\v。
\w 匹配包括下劃線的任何單詞字符。等價于’[A-Za-z0-9_]’。
\W 匹配任何非單詞字符。等價于 ‘A-Za-z0-9_‘。
17.正則進階：
（1）使用（）提取分組：
提取分組使用()即可，分組的功能——捕獲數據
（2）|是或者
或者：使用分組的同時還可以使用或者，即|
例如：正則表達式提取所有的視頻文件的后綴 \w{0,8}(.mp4|.avi|.wmv|.rmvb)
（3）非捕獲分組(?:表達式)，可使用可不用
當并不需要捕獲某個分組的內容，但是又想使用分組的特性的時候就可以使用非捕獲組(?:表達式)，從而不捕獲數據，還能使用分組的功能。此時也可以使用|
（4）分組使用技巧：
(\d{4})[-./\s]?(\d{1,2})[-./\s]?(\d{1,2}) 就可以從文本中將年月日分別提取出來了。[-./\s]表示匹配三個可能出現的分隔符-./和空白，?表示匹配它們0次或者1次，其他年月日的數據使用\d{N}與分組結合就可以提取到目標數據。
（5）分組的回溯引用：
代碼0123< font >提示< /font >abcd 的正則表達式為：<\w+> .*? </\w+>
他的回溯引用為：<\w+> (.*?) </\1>
分組的回溯引用，使用\N可以引用編號為N的分組
18.拋出（throw）錯誤（err）
錯誤：當錯誤發生時，js會生成一個錯誤消息，即JavaScript 將拋出（throw）一個錯誤。
try 語句測試代碼塊的錯誤。
catch 語句處理錯誤。 try 和 catch 是成對出現的
throw 語句創建自定義錯誤，結束處理。
finally 語句在 try 和 catch 語句之后，無論是否有觸發異常，該語句都會執行。
（1）err/error：錯誤。
err對象屬性（是固定屬性）：err.name(設置或返回一個錯誤名）和err.message（設置或返回一個錯誤信息）
var txt="";
function message()
{
? ? try { //測試錯誤
? ? ? ? adddlert("Welcome guest!");
? ? } catch(err) { //處理顯示錯誤，拋出錯誤
? ? ? ? txt="本頁有一個錯誤。\n\n";
? ? ? ? txt+="錯誤描述：" + err.message + "\n\n";
? ? ? ? txt+="點擊確定繼續。\n\n";
? ? ? ? alert(txt);
? ? }
}
<button type="button" onclick="myFunction()">點我</button>
<p id="p01"></p>
<script>
function myFunction() {
? var message, x;
? message = document.getElementById("p01");
? message.innerHTML = "";
? x = document.getElementById("demo").value;
? try {
? ? if(x == "") throw "值是空的";
? ? if(isNaN(x)) throw "值不是一個數字";
? ? x = Number(x);
? ? if(x > 10) throw "太大";
? ? if(x < 5) throw "太小";
? }
? catch(err) {
? ? message.innerHTML = "錯誤: " + err + ".";
? }
}
</script>
18.變量提升：只有聲明的變量可以提升，初始化過的變量無法提升
19.switch case 語句
switch case 語句：判斷一個變量與一系列值中某個值是否相等，每個值稱為一個分支
switch(expression){
? ? case value :
? ? ? //語句
? ? ? break; //可選
? ? case value :
? ? ? //語句
? ? ? break; //可選
? ? //你可以有任意數量的case語句
? ? default : //可選
? ? ? //語句
}
switch case 執行時，一定會先進行匹配，匹配成功返回當前 case 的值，再根據是否有 break，判斷是否繼續輸出，或是跳出判斷。
switch 語句會使用恒等計算符(===)進行比較，如果進行比較的兩字符數據類型不相等，返回false
20.加法與連接：數字1+數字2輸出加法，數字1+字符1=兩字符連接。
1+2=3，1+“2”=12
21.出現return，自動默認結束語句，返回值
22.數組不支持使用名字作為索引，只支持使用數字進行索引，對象使用名字進行索引
定義數組元素時，數組最后不能添加逗號。var colors = [5, 6, 7,]; //這樣數組的長度可能為3 也可能為4。
23.表單驗證：
<script>
function validateForm() {//表單驗證的方法函數
//document.forms，獲取頁面表單
? ? var x = document.forms["myForm"]["fname"].value;//獲取表單輸入的值，處理input輸入的值
? ? if (x == null || x == "") {
? ? ? ? alert("需要輸入名字。");
? ? ? ? return false;//阻止表單提交
? ? }
}
</script>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
注釋：form name="myForm":name值為“myForm”的表單
? ? action="demo_form.php":發送表單數據到文件中,連接外部文件（處理輸入）
? ? οnsubmit="return validateForm()":onsubmit會在表單中的確認按鈕被點擊時發生（手動驗證表單）
? ? 表單自動驗證：required="required"：點擊提交按鈕，如果輸入框是空的，瀏覽器會提示錯誤信息。 如果表單字段 (fname) 的值為空, required 屬性會阻止表單提交
? ? method="post"表示表單中的數據以post方法傳遞。Form提供了兩種數據傳輸的方式——get和post。
indexOf() 和lastIndexOf() 方法：
indexOf() 方法：可返回某個指定的字符串值在字符串中首次出現的位置，如果要檢索的字符串值沒有出現，則該方法返回 -1。
lastIndexOf() 方法可返回一個指定的字符串值最后出現的位置，在一個字符串中的指定位置從后向前搜索。如果要檢索的字符串值沒有出現，則該方法返回 -1。
24.API約束驗證：約束驗證 API用于在將值提交到服務器之前檢查用戶已輸入到表單控件中的值。
<input id="id1" type="number" min="100" max="300" required>
var demo = document.getElementById("id1");
if (demo.checkValidity() == false) {//checkValidity()如果 input 元素中的數據是合法的返回 true，否則返回 false。
? document.getElementById("demo").innerHTML = demo.validationMessage;//validationMessage:瀏覽器提示錯誤信息
? ? ? ? }
25.let和const
let：let 聲明的變量只在 let 命令所在的代碼塊 {} 內有效，在 {} 之外不能訪問。
var x = 10;
// 這里輸出 x 為 10
{
? ? let x = 2;
? ? // 這里輸出 x 為 2
}
// 這里輸出 x 為 10
let 關鍵字定義的變量則不可以在使用后聲明，也就是變量需要先聲明再使用。
const：const 用于聲明一個或多個常量，聲明時必須進行初始化，且初始化后的值不可再修改，const 定義的變量并非常量，并非不可變，它定義了一個常量引用一個值。使用 const 定義的對象屬性或者數組是可變的
const不能對常量對象/數組重新賦值，但是可以對常量數組進行修改
// 創建常量對象
const car = {type:"Fiat", model:"500", color:"white"};
// 修改屬性:
car.color = "red";
// 添加屬性
car.owner = "Johnson";
const 關鍵字定義的變量則不可以在使用后聲明，也就是變量需要先聲明再使用。
26.id定位：
<!--a標簽的href屬性指定要跳轉的錨點-->
< a href="#pos">點我定位到指定位置!</a>
< p id="pos">尾部定位點</p>
27.異步編程
：setTimeout(第一個參數是個回調函數(箭頭函數），第二個參數是毫秒數)
回調函數：
setTimeout(function () {
? ? document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);
箭頭函數：
setTimeout(()=> {
? ? document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);
28.函數自調用
：表達式后面緊跟 () ，則會自動調用
(function () {
? ? var x = "Hello!!";? ? ? // 我將調用自己
})();
29.函數顯式參數在函數定義時列出。函數隱式參數在函數調用時傳遞給函數真正的值。
函數可以自帶參數
<script>
function myFunction(x, y = 10) {
? ? // 如果不傳入參數 y ，則其默認值為 10
? ? return x + y;
}
// 輸出 2
document.getElementById("demo1").innerHTML = myFunction(0, 2) ;
// 輸出 15, y 參數的默認值
document.getElementById("demo2").innerHTML = myFunction(5);
</script>
30.arguments:通過索引引用參數的類數組對象
arguments：類似于數組，arguments對象是所有函數中可用的局部變量。你可以使用arguments對象在函數中引用函數的參數。當我們不確定有多少個參數傳遞的時候，可以用 arguments 來獲取。在 JavaScript 中，arguments 實際上它是當前函數的一個內置對象。
所有函數都內置了一個 arguments 對象，arguments 對象中存儲了傳遞的所有實參。
arguments展示形式是一個偽數組，具有 length 屬性，可以進行遍歷。
如果一個函數傳遞了三個參數，你可以以如下方式引用他們：
arguments[0]
arguments[1]
arguments[2]
31.閉包：
在一個函數內部定義另外一個函數，并且返回內部函數或者立即執行內部函數。
內部函數可以讀取外部函數定義的局部變量
如果我們在js中寫的方法都是全局的方法，在需要嵌入到別人的界面中的時候，這些全局的東西很可能會和別人的東西重名從而引發錯誤，所以說需要用js閉包包起來。
我的理解是，閉包就是能夠讀取其他函數內部變量的函數。
32.constructor()：類的構造函數
類：類是用于創建對象的模板。使用 class 關鍵字來創建類，類體在一對大括號 {} 中， {} 中定義類成員的位置，如方法或構造函數。
每個類中包含了一個特殊的方法 constructor()，即類的構造器，它是類的構造函數，這種方法用于創建和初始化一個由 class 創建的對象。使用前沒有聲明會報錯
<script>
? class Runoob {
? constructor(name, url) {
? ? this.name = name;
? ? this.url = url;
? }
}//創建了一個名為Runoob的類，初始化了name和url兩個屬性
let site = new Runoob("菜鳥教程",? "http://www.runoob.com");//定義好類之后使用new創建對象
document.getElementById("demo").innerHTML =
site.name + "：" + site.url;//對象可以使用類中初始化的屬性
</script>
構造方法是一種特殊的方法：
構造方法名為 constructor()。
構造方法在創建新對象時會自動執行。
構造方法用于初始化對象屬性。
如果不定義構造方法，JavaScript 會自動添加一個空的構造方法。
類聲明和類表達式的主體都執行在嚴格模式下，不能使用沒有聲明的變量
33.super類繼承
類繼承：類繼承使用extends關鍵字，super（）方法調用父類的構造函數，
// 基類
class Animal {
? ? // eat() 函數
? ? // sleep() 函數
};
//派生類
class Dog extends Animal {
? ? // bark() 函數
};
super() 方法引用父類的構造方法。
通過在構造方法中調用 super() 方法，我們調用了父類的構造方法，這樣就可以訪問父類的屬性和方法
class Runoob extends Site {
? constructor(name, age) {
? ? super(name);
? ? this.age = age;
? }
setter和getter
setter和getter：getter是獲取屬性的方法，setter是設置屬性的方法。
class Runoob {
? constructor(name) {
? ? this.sitename = name;
? }
? get s_name() {
? ? return this.sitename;
? }
? set s_name(x) {
? ? this.sitename = x;
? }
}
let noob = new Runoob("菜鳥教程");
document.getElementById("demo").innerHTML = noob.s_name;
靜態方法
靜態方法：靜態方法是使用 static 關鍵字修飾的方法，又叫類方法，屬于類的，但不屬于對象，在實例化對象之前可以通過 類名.方法名 調用靜態方法。靜態方法不能在對象上調用，只能在類中調用。實例對象調用靜態方法會報錯，如果你想在實例對象 中使用靜態方法，可以將實例對象作為一個參數傳遞給靜態方法
javascript前端開發語言
發布于2023-04-09
著作權歸作者所有
