JavaScript知識點的總結

一.Javascript的含義

是一種解釋性的語言，主要給網頁添加各色各樣的動態功能，同時為用戶提供瀏覽效果。

二.JavaScript的主要特點

1. 簡單性 2. 動態性 3. 安全性 4. 跨平台性

三.JavaScript的組成

1. ECMAScript :描述語言的語法和基本對象 2. BOM：描述網頁內容的方法和接口 3. DOM：描述與瀏覽器進行交互的方法和接口

四.JavaScript的三種引入方式

1.標簽內引入
2.內部引入
3.外部引入

五.javaScript語法的基本要求

1.按照順序依次執行 2.嚴格區分的大小寫 3.javascript中的結束分號不能省略 4.javascript中會忽略空白符和換行符

六. JavaScript常用的調試方法

1.alert() 2.confirm(); 3.prompt(); 4.console.log(); 5.document.write()

七.表示符的使用規則

1.只用用數字、字母、下划線、$ 2.不能使用數字開頭 3.區分大小寫 4.不能用關鍵字 5. 駝峰命名法

八.javaScript中常見的數據類型

1.Number 2.Boolean 3.undefined 4.Null 5.String 6.Object

九. 算術運算符

+、-、*、/、%。

1.+ 運算符：運算規則 * 如果兩個都是Number則，則就按照普通的數學加法運算。 * 如果有一個是字符串，就按照字符串的串聯的方式連接。(如果另外一個不是字符串，則先轉換成字符串再連)。 * 如果有一個是NaN，則結果就是NaN。 *如果同時是Infinity或-Infinity，則結果就是Infinity或-Infinity。 * 如果一個是Infinity另外一個是-Infinity，則結果為NaN。 2.- 運算符：運算符規則 - 如果兩個都是Number則，則就按照普通的數學減法運算。 - 如果有一個操作數是字符串、布爾值、null 或undefined，則先在后台調用Number()轉型函數將其轉換為數值，然后再根據正常減法計算。如果轉換的結果有一個是NaN,則減法的結果就是NaN * 如果有一個操作數是對象，則調用對象的valueOf()方法以取得表示該對象的數值。如果得到的值是NaN，則減法的結果就是NaN。如果對象沒有valueOf()方法，則調用其toString()方法並將得到的字符串轉換為數值(了解) 3.* 運算符：運算符規則。 - 運算規則同減法。 1. / 運算符：運算規則 - 就是普通的除法運算，運算規則同 * 4. %運算符：運算規則 - 求余(求模)運算。

十.javaScript中常見的運算符

1.邏輯與 （ 只要有一個是false，則返回false） 2.邏輯或 （只要有一個是true，結果就是true） 3.邏輯非 （先轉換成Boolean值，再取反得到最終的結果） ### &&()和|| 的結果總結： 1. 如果第一個能夠決定結果，則結果就是第一個表達式的值 2. 如果第一個不能決定結果，則結果就是第二個表達式的值

十一.JavaScript中的判斷語句

1.if語句 >##### 語法： if(condition){ //語句1 } 2.if...else語句 >##### 語法： if(condition){ //語句1 } else{ //語句2 } 3. if...else if...elsif... 語句 >##### 語法： if(condition1){ //語句1 } else if(condition2){ //語句2 } ... else if(condition3){ //語句n } 4.if...else if...else ...else語句 >##### 語法： if(condition1){ //語句1 } else if(condition2){ //語句2 } ... else if(condition3){ //語句n } else{ //else語句 } 5. switch條件語句 >##### 語法： switch (expression) { case value1: //語句1 break; case value2: //語句2 break; case value3: //語句3 break; case value4: //語句4 break; default: }

十二.JavaScript中的循環結構

1.for循環

語法：
for(表達式1; 表達式2; 表達式3){
 //循環體 } >注意： - 3個表達式的都可以省略。 - 對表達式1和表達式3省略，對for循環沒有任何影響，只是少執行了代碼而已。 - 如果表達式2省略，表示此處為true，那么這個循環就是死循環。 - 如果第一次檢查表達式2的時候就是false，則循環體內的代碼可能一次也不執行。 2.while循環 語法：while(condition){ } >注意： - condition不能省略。如果省略為語法錯誤 - while循環也有可能一次也不執行。 3. do...while循環 語法： do{ //循環體}while(condition); >注意： - condition條件不能省略，省略語法錯誤。 - 由於先執行在判斷，所以，對do...while 循環來說，循環體至少執行一次。

十三. javaScript中的兩個特殊控制語句

1.break語句 作用：在循環體中，break會提前結束循環 >例如： for(var i=0;i<6;i++){ if(i==5){ break; } console.log(i); } 2.continue語句 作用：在循環體中，continue會結束本次循環，不會執行剩余的代碼，不過會繼續執行它外層的循環 >例如： for(var i=0 i<10;i++){ if(i==6){ continue; } }

十四.自定義函數

---

1.函數的聲明

語法：

function 函數名(形式參數1, 形式參數2, ...){
//函數體
}

例如：

function mer(a,b,c){
var m=a+b;
}

2.函數的調用

語法：

方法名(實參1，實參2);
例如：
function mer(m,n){
var m=n;
}
alert(mer(10));

3.函數的命名規范

十五.變量的作用域

---

##### 1.全局變量 定義： 在函數外部聲明的變量 例如： var m=13; alert(m); ##### 2.局部變量 定義： 在函數體內部聲明的變量 >例如： function f(){ var m="234"; alert(m); } ##### 3.匿名函數 1.定義：沒有聲明函數名的函數 >例如： var m=function(){ alert("Hello world"); } m(); 2.注意點： * 匿名函數除了沒有函數名以外，與其他函數沒有任何區別 * 如果想要在其他地方調用該函數，則需要先聲明一個變量，並把該函數的值賦值給聲明的變量 * 可以將變量名做為函數名調用 3.匿名函數的作用 * 可以將函數表達式存儲在變量中 * 可以將匿名函數當作參數來傳遞 ##### 4.匿名函數的立即執行 1.語法： * （function(){ alert("立即執行"); }()); 2.注意點： * 要把匿名函數用一對圓括號括起來，作為一個整體看 * 在函數的最后面添加一對圓括號來表示調用函數 3.函數遞歸調用 1. 定義： 在函數的內部調用當前的函數 2. 需要滿足的條件 * 要有結束條件 * 遞歸不能無限的遞歸下去，否則會溢出。 3. 總結： 函數的調用原理與數據結構棧的實現是一致的。

十六.JavaScript中數組的特點

1.數組的長度是可以動態改變的
2.在同一個數組中可以存儲不同的數據類型
3.每一個數組中都有一個 length的屬性，表示的是數組中元素的個數

十七.數組的創建

1. 數組中的兩種基本創建方式

   1.字面量的方式

   例如：["a", 5, "b",8]

2.構造函數

例如： new Array(數組長度);

注意點：

• 在構造函數創建數組對象時，最后一個元素后面不需要添加逗號
• 在構造函數中只傳入一個Number值，這個值一定要大於 0
• 在構造函數創建數組對象時，new關鍵字可以省略

3.修改和訪問數組中的元素

例如：

 var arr=[10,20,30,40,50,60]; alert(arr[0]); arr[3]=100;

4.數組中的長度

例如：

var arr = [10, 20, 60, 5, 7];

alert(arr.length);

十八.數組的遍歷

---

1.遍歷數組的方法

* 普通的for循環 * for...in * for each * for... of

2.普通for循環的遍歷

例如：

 var arr=[20,30,50,60,78]; for (var i=0;i<arr.length;i++){ console.log(arr[i]); }

3.for ...in循環的遍歷

例如：

var arr=[50,30,60,12,45]; for (var index in arr){ console.log(arr); } ##### 注意：

for...in遍歷數組時，遍歷出來的是數組的下標

4.for each方法的遍歷

例如：

  var arr=[23,4,56,7,80]; arr.forEach(function(ele,index){ alert(ele); });

十九.javaScript中數組的常用方法

---

1.轉換方法：

toString（）

作用：返回由數組中每個值得字符串形式拼接而成的一個以逗號分割的字符串

例如：

  var arr=[2,3,45,6,78]; alert(arr.toString());

2.join()方法

作用：可以使用指定的連接符連接

例如：
var arr = [50, 20, 10, 5, 15, 6];

alert(arr.join("="));

二十.JavaScript中站的方法

---

1.入棧 （ push() )

作用：把新的元素添加到數組的后面

2.出棧 ( pop() )

作用：把數組中的最后一個元素從數組中移除

例如:

var arr=[2,3,4,5,67]; var num=arr.push("100"); var hom=arr.pop(); alert(num); alert(hom);

3.隊列方法

1.shift()

作用：從隊列中的頭部移除元素

2.unshift()

作用：向隊列尾部添加元素

例如：

var arr=[23,45,67]; var num=arr.shift(); var bak=arr.unshift(); alert(num); alert(bak);

4.數組中的倒序

reverse()：

作用：將數組中的元素進行倒序

例如：
var arr=[34,56,7,9];
arr.reverse();
alert(arr);

5.javaScript中查找指定元素在數組中的索引

1. indexOf(item,num)

作用：從num的位置開始向后查找item第一次出現的位置

2.lastIndex(item,num)

作用：從num的位置開始向前查找item第一次出現的位置

例如：

var arr=[2,3,5,3,6,2,8,8]; alert(indexOf("2",2); alert(lastIndeOf("3",4);

6.獲取新的數組

1.concat(arrayX,arrayX,......,arrayX)

作用：用於連接多個數組，並且不會對原數組做任何的改變

例如：

 var arr=[2,34,56]; var arr1=[87,65,43]; var newArr=arr.concat(arr1); alert(newArr);

2. slice(start,end)方法

作用：截取數組，並且返回結渠道的新數組

例如：

var arr=["a","s","d","f","g"]; var arr1.slice(0,3); alert(arr1);

3.splice(index,howmany,item1,.....,itemX) 方法

作用：向數組中添加元素，刪除元素，替換元素

例如：

var arr=[2,3,4,"as",d,f]; var num= arr.splice(1,3); alert(num); var num1=arr.splice(1,0,"m","n"); alert(num1); var num2=arr.splice(1,2,"2","3"); alert(num2);

二十一.javaScript中數組的檢測

1.instanceof運算符

作用：會返回一個Boolean值，指出對象是否是特定構造函數的一個實例

例如：

var arr = [];

alert(arr instanceof Array);

2.Array.isArray()方法

作用：判斷一個變量是不是數組，是則返回true，否則返回false

例如：
var arr = [];
alert(Array.isArray(arr))

二十二. JavaScript中字符串的操作

1.注意：

javaScript中字符串是不可變的，需要創建一個新的字符串

2. 字符串的創建

• 字符串直接量

  例如：

var s = "good";

alert(typeof s);

• 通過String()轉換函數

  ==例如：==

var s = String(123);

alert(typeof s);

二十三.JavaScript中字符串常見的方法

---

##### 1.s.charAt(index) 作用：返回的是指定位置的字符 >例如： var s = "a你好bcd"; alert(s.charAt(0)); ##### 2.s.charCodeAt(index) 作用：返回指定位置的字符的 Unicode 編碼 >例如： var s = "a你好bcd"; alert(s.charCodeAt(0)); ##### 3.字符串連接方法 ###### 1.s.concat(stringX,stringX,...,stringX) * 作用：用於連接兩個或者多個字符 * 注意： 1.並不會改變原字符串 2.可以使用字符串連接符(+) >例如： var s = "你好"; alert(s.concat("啊", "凌源")); ##### 4.查找子字符串出現的位置 ###### 1. s.indexOf(searchvalue,fromindex) 作用：可以返回某個指定的字符串值在字符串中首次出現的位置 >例如： var v = "abcabdefgh"; alert(s.indexOf("ab")); ###### 2.s.lastIndexOf(searchvalue,fromindex) 作用：可以返回一個指定的字符串值最后出現的位置，在一個字符串中的指定位置從后向前搜索 >例如： var s = "abcabcdab"; alert(s.lastIndexOf("ab")); ##### 5.js字符串的截取 ###### 1.s.substring(start,stop) 方法 作用：用於提取字符串中介於兩個指定下標之間的字符 >例如： var s="asdfghj"; alert (s.substring(1)); ###### 2.s.substr(start, length) 方法 作用：可以在字符串中抽取從start下標開始的指定數目的字符 >例如： var s="asdfghj"; alert (s.substr(1)); ###### 3.s.slice(start,end) 方法 作用：可以提取字符串的某個部分，並且以新的字符串返回被提取的部分 >例如： var s="asdfghj"; alert (s.slice(1，3)); ##### 6.大小寫轉換方法 ###### 1.s.toUpperCase 作用：字符串中所有的字符轉變成為大寫 >例如： var s = "abcAbc"; alert(s.toUpperCase()); ###### 2.s.toLowerCase 作用：字符串中的所有的字符轉變成小寫 >例如： var s = "ABcAbc"; alert(s.toLowerCase()); ##### 7.去除字符串首尾空白字符 s.trim() : 作用;只是去除字符串的首尾的所有空白字符. 字符串內部的空白字符不做任何處理 >例如： var s = " \n \t ABc Abc \t \n \t"; alert(s.trim()); ##### 8.字符串替換、匹配、搜索方法 ###### 1. s.replace(regexp/substr,replacement)方法 作用:用於在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。 >例如： var s = "abcaba"; var newStr = s.replace("ab", "js"); alert(newStr); ###### 2. s.match(匹配值) 作用：在字符串內檢索指定的值 >例如： var s = "abcaba"; var arr = s.match("ab"); alert(arr); ###### 3.s.search(匹配的參數) 作用：始終從字符串的頭部開始查找 >例如： var s = "abcaba"; var arr = s.search("ab"); alert(arr); ##### 9.字符串比較 * == 比較兩個字符串的==內容==是否相等 * === 恆等 只有類型和內容都相等的時候才返回true ##### * s.localeCompare(other): - 如果字符串在字母表中應該排在字符串參數之前，則返回一個負值； - 如果字符串的等於字符串參數，返回0； - 如果字符串在字母表中應該排在字符串參數之后，則返回一個正數； ##### 10.字符串切割方法 s.split(separator,howmany)方法 作用：用於把一個字符串分割成字符串數組。 >例如: var s = "How do you do"; var arr = s.split(" "); alert(arr);

二十四.JavaScript中Math對象

1.常用屬性

• Math.PI : π的值
• Math.E: 自然對數的底數

2.Math對象常用方法

• Math.abs(x) : 返回x的絕對值
• Math.max(任意個數值) ：返回傳入的數值中的最大值
• Math.min(任意個數值) ：返回傳入的數值中的最小值
• Math.ceil(number) ： 返回大於等於number的最小整數(向上取整)
• Math.floor(number) ： 返回小於等於number的最大整數(向下取整)
• Math.round(number): 四舍五入
• Math.pow(x, y) : 返回 x^y
• Math.random() : 返回 0-1之間的隨機小數
• Math.sin(x) 正弦, Math.cos(x) 余弦, Math.tan(x) 正切

二十五.BOM核心---window對象

---

1. 獲取全局變量的方式

• this

• window.age

*window.sagAge()

例如：

 var num=24; function sagAge(){ alert(this.num); } alert(window.age); window.sagAge();

2. window窗口大小

==獲取瀏覽器窗口大小==

1.在Internet Explorer(9+)、Chrome、Firefox、Opera 以及 Safari

  window.innerHeight - 瀏覽器窗口的內部高度
  window.innerWidth  -  瀏覽器窗口的內部寬度

2. 針對於 Internet Explorer 8、7、6、5

 document.documentEelement.clentWidth
 document.documentEelement.clentWidth

3.為了兼容瀏覽器的版本可以使用下面的代碼

 var w=window.innerWidth || documentEelement.clentWidht;
 var h=window.innerHeight || documentEelemlent.clentHeight;

3.調整窗口大小

• window.resize(w,h): 調整到指定的大小
• resizeBy(deltW, deltH): 增加指定窗口的寬和高

  例如：

<body>
    <button onclick="to();">將窗口調整到指定大小</button>
    <br/>
    <button onclick="by();">寬和高增加的像素</button>
    <script type="text/javascript">
        function to () {
            alert("我要縮小了");
            window.resizeTo(200, 300);
        }
        function by () {
             alert("我開始增大了");
             window.resizeBy(30, 30);
        }
    </script>
</body>

二十六. window中的定時器

1.window對象中定時器的功能方法

• 超時調用 setTimeout()

例如：

/*
    setTimeout(code,millisec)
    參數1：要執行代碼。一般傳入一個函數。(當然也可是字符串形式的代碼，但是不建議使用)
    參數2：多長時間后執行參數1中的代碼。  單位毫秒
*/
<script type="text/javascript"> //傳入函數的時，函數名不要加括號。(因為方法不是我們調用，是引擎幫助我們調用) // setTimeout方法會返回一個值，表示超時調用的id，可以在任務執行前取消任務。 var timeOutId = window.setTimeout(go, 3000); // 3秒中之后執行函數go中的代碼 function go () { window.open("http://www.yztcedu.com") } window.clearTimeout(this.timerId); //取消這個超時調用，如果超時調用已經執行完畢，就什么也不會發生。 </script>

• 周期調用 setInterval()

  例如：

/*
    setInterval(code,millisec)
    參數1：每隔一段時間執行一次的代碼。  一般是一個函數
    參數2：周期性執行的時間間隔。  單位毫秒

*/
<body> <h1 id="time"></h1> <script type="text/javascript"> //顯示時間，每秒鍾變化一次。 window.setInterval(function() { var timeElement = document.getElementById("time"); //找到h1標簽 var msg = new Date().toLocaleString(); timeElement.innerHTML = msg; //設置h1標簽中的值 }, 1000); </script> </body> //清除間隔定時器 window.clearInterval(id);

 

學習過程中遇到什么問題或者想獲取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！