JavaScript知識點的總結(jié)

一.Javascript的含義

是一種解釋性的語言,主要給網(wǎng)頁添加各色各樣的動態(tài)功能,同時為用戶提供瀏覽效果。

二.JavaScript的主要特點

1. 簡單性
2. 動態(tài)性
3. 安全性
4. 跨平臺性

三.JavaScript的組成

1. ECMAScript :描述語言的語法和基本對象
2. BOM:描述網(wǎng)頁內(nèi)容的方法和接口
3. DOM:描述與瀏覽器進行交互的方法和接口

四.JavaScript的三種引入方式

1.標簽內(nèi)引入
2.內(nèi)部引入
3.外部引入

五.javaScript語法的基本要求

1.按照順序依次執(zhí)行

2.嚴格區(qū)分的大小寫

3.javascript中的結(jié)束分號不能省略

4.javascript中會忽略空白符和換行符

六. JavaScript常用的調(diào)試方法


1.alert()

2.confirm();

3.prompt();

4.console.log();

5.document.write()

七.表示符的使用規(guī)則

1.只用用數(shù)字、字母、下劃線、$

2.不能使用數(shù)字開頭

3.區(qū)分大小寫

4.不能用關(guān)鍵字

5. 駝峰命名法

八.javaScript中常見的數(shù)據(jù)類型

1.Number

2.Boolean

3.undefined

4.Null

5.String

6.Object

九. 算術(shù)運算符

+、-、*、/、%。

1.+ 運算符:運算規(guī)則

* 如果兩個都是Number則,則就按照普通的數(shù)學加法運算。

* 如果有一個是字符串,就按照字符串的串聯(lián)的方式連接。(如果另外一個不是字符串,則先轉(zhuǎn)換成字符串再連)。
* 如果有一個是NaN,則結(jié)果就是NaN。
*如果同時是Infinity或-Infinity,則結(jié)果就是Infinity或-Infinity。
* 如果一個是Infinity另外一個是-Infinity,則結(jié)果為NaN。

2.- 運算符:運算符規(guī)則

- 如果兩個都是Number則,則就按照普通的數(shù)學減法運算。
- 如果有一個操作數(shù)是字符串、布爾值、null 或undefined,則先在后臺調(diào)用Number()轉(zhuǎn)型函數(shù)將其轉(zhuǎn)換為數(shù)值,然后再根據(jù)正常減法計算。如果轉(zhuǎn)換的結(jié)果有一個是NaN,則減法的結(jié)果就是NaN
* 如果有一個操作數(shù)是對象,則調(diào)用對象的valueOf()方法以取得表示該對象的數(shù)值。如果得到的值是NaN,則減法的結(jié)果就是NaN。如果對象沒有valueOf()方法,則調(diào)用其toString()方法并將得到的字符串轉(zhuǎn)換為數(shù)值(了解)

3.* 運算符:運算符規(guī)則。

- 運算規(guī)則同減法。

1. / 運算符:運算規(guī)則

- 就是普通的除法運算,運算規(guī)則同 *

4. %運算符:運算規(guī)則

- 求余(求模)運算。

十.javaScript中常見的運算符

1.邏輯與  (  只要有一個是false,則返回false)

2.邏輯或   (只要有一個是true,結(jié)果就是true)

3.邏輯非    (先轉(zhuǎn)換成Boolean值,再取反得到最終的結(jié)果)

###   &&()和|| 的結(jié)果總結(jié):

1. 如果第一個能夠決定結(jié)果,則結(jié)果就是第一個表達式的值
2. 如果第一個不能決定結(jié)果,則結(jié)果就是第二個表達式的值

十一.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中的循環(huán)結(jié)構(gòu)

1.for循環(huán)

語法:
for(表達式1; 表達式2; 表達式3){
    //循環(huán)體
}

>注意:

- 3個表達式的都可以省略。
- 對表達式1和表達式3省略,對for循環(huán)沒有任何影響,只是少執(zhí)行了代碼而已。
- 如果表達式2省略,表示此處為true,那么這個循環(huán)就是死循環(huán)。 
- 如果第一次檢查表達式2的時候就是false,則循環(huán)體內(nèi)的代碼可能一次也不執(zhí)行。


2.while循環(huán)

語法:while(condition){   }

>注意:

- condition不能省略。如果省略為語法錯誤
- while循環(huán)也有可能一次也不執(zhí)行。


3. do...while循環(huán)

語法:  do{  //循環(huán)體}while(condition);

>注意:

- condition條件不能省略,省略語法錯誤。
- 由于先執(zhí)行在判斷,所以,對do...while 循環(huán)來說,循環(huán)體至少執(zhí)行一次。

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

1.break語句
作用:在循環(huán)體中,break會提前結(jié)束循環(huán)

>例如:

for(var i=0;i<6;i++){

    if(i==5){
        break;
    }
    console.log(i);
}

2.continue語句
作用:在循環(huán)體中,continue會結(jié)束本次循環(huán),不會執(zhí)行剩余的代碼,不過會繼續(xù)執(zhí)行它外層的循環(huán)
>例如:

for(var i=0 i<10;i++){

    if(i==6){
        continue;
    }
    
}

十四.自定義函數(shù)


1.函數(shù)的聲明

語法:

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

例如:

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

2.函數(shù)的調(diào)用

語法:

方法名(實參1,實參2);

例如:
function mer(m,n){
var m=n;
}
alert(mer(10));

3.函數(shù)的命名規(guī)范

十五.變量的作用域


##### 1.全局變量

定義: 在函數(shù)外部聲明的變量

例如:

    var m=13;
    
    alert(m);

##### 2.局部變量

定義: 在函數(shù)體內(nèi)部聲明的變量

>例如:

  function f(){
      var m="234";
      alert(m);
  }
  
##### 3.匿名函數(shù)

1.定義:沒有聲明函數(shù)名的函數(shù)
>例如:
var m=function(){
    alert("Hello world");
}
m();

2.注意點:
* 匿名函數(shù)除了沒有函數(shù)名以外,與其他函數(shù)沒有任何區(qū)別
* 如果想要在其他地方調(diào)用該函數(shù),則需要先聲明一個變量,并把該函數(shù)的值賦值給聲明的變量
* 可以將變量名做為函數(shù)名調(diào)用

3.匿名函數(shù)的作用

* 可以將函數(shù)表達式存儲在變量中
* 可以將匿名函數(shù)當作參數(shù)來傳遞

##### 4.匿名函數(shù)的立即執(zhí)行
1.語法:
* (function(){
    alert("立即執(zhí)行");
}());

2.注意點:
* 要把匿名函數(shù)用一對圓括號括起來,作為一個整體看
* 在函數(shù)的最后面添加一對圓括號來表示調(diào)用函數(shù)

3.函數(shù)遞歸調(diào)用

1. 定義:
  在函數(shù)的內(nèi)部調(diào)用當前的函數(shù)

2. 需要滿足的條件
* 要有結(jié)束條件
* 遞歸不能無限的遞歸下去,否則會溢出。
3. 總結(jié):
   函數(shù)的調(diào)用原理與數(shù)據(jù)結(jié)構(gòu)棧的實現(xiàn)是一致的。

十六.JavaScript中數(shù)組的特點

<pre>

1.數(shù)組的長度是可以動態(tài)改變的
2.在同一個數(shù)組中可以存儲不同的數(shù)據(jù)類型
3.每一個數(shù)組中都有一個 length的屬性,表示的是數(shù)組中元素的個數(shù)
</pre>

十七.數(shù)組的創(chuàng)建

  1. 數(shù)組中的兩種基本創(chuàng)建方式
1.字面量的方式

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

2.構(gòu)造函數(shù)

例如: new Array(數(shù)組長度);

注意點:
  • 在構(gòu)造函數(shù)創(chuàng)建數(shù)組對象時,最后一個元素后面不需要添加逗號
  • 在構(gòu)造函數(shù)中只傳入一個Number值,這個值一定要大于 0
  • 在構(gòu)造函數(shù)創(chuàng)建數(shù)組對象時,new關(guān)鍵字可以省略
3.修改和訪問數(shù)組中的元素

例如:

var arr=[10,20,30,40,50,60];

alert(arr[0]);

arr[3]=100;
4.數(shù)組中的長度

例如:

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

alert(arr.length);

十八.數(shù)組的遍歷


1.遍歷數(shù)組的方法
* 普通的for循環(huán)
* for...in
* for each
* for... of 
2.普通for循環(huán)的遍歷

例如:

 var arr=[20,30,50,60,78];

 for (var i=0;i<arr.length;i++){
 
     console.log(arr[i]);
 }
3.for ...in循環(huán)的遍歷

例如:

var arr=[50,30,60,12,45];

for (var index in arr){

    console.log(arr);
}
##### 注意:

for...in遍歷數(shù)組時,遍歷出來的是數(shù)組的下標

4.for each方法的遍歷

例如:

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

十九.javaScript中數(shù)組的常用方法


1.轉(zhuǎn)換方法:

toString()

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

例如:

  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() )

作用:把新的元素添加到數(shù)組的后面

2.出棧 ( pop() )

作用:把數(shù)組中的最后一個元素從數(shù)組中移除

例如:

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.數(shù)組中的倒序

reverse():

作用:將數(shù)組中的元素進行倒序

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

alert(arr);

5.javaScript中查找指定元素在數(shù)組中的索引
1. indexOf(item,num)

作用:從num的位置開始向后查找item第一次出現(xiàn)的位置

2.lastIndex(item,num)

作用:從num的位置開始向前查找item第一次出現(xiàn)的位置

例如:

var arr=[2,3,5,3,6,2,8,8];

alert(indexOf("2",2);

alert(lastIndeOf("3",4);
6.獲取新的數(shù)組
1.concat(arrayX,arrayX,......,arrayX)

作用:用于連接多個數(shù)組,并且不會對原數(shù)組做任何的改變

例如:

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

作用:截取數(shù)組,并且返回結(jié)渠道的新數(shù)組

例如:

var arr=["a","s","d","f","g"];

var arr1.slice(0,3);

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

作用:向數(shù)組中添加元素,刪除元素,替換元素

例如:

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中數(shù)組的檢測

1.instanceof運算符

作用:會返回一個Boolean值,指出對象是否是特定構(gòu)造函數(shù)的一個實例

例如:

var arr = [];

alert(arr instanceof Array);

2.Array.isArray()方法

作用:判斷一個變量是不是數(shù)組,是則返回true,否則返回false

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

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

1.注意:

javaScript中字符串是不可變的,需要創(chuàng)建一個新的字符串

2. 字符串的創(chuàng)建
  • 字符串直接量

例如:

var s = "good";

alert(typeof s);

  • 通過String()轉(zhuǎn)換函數(shù)

==例如:==

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.查找子字符串出現(xiàn)的位置
###### 1. s.indexOf(searchvalue,fromindex)
作用:可以返回某個指定的字符串值在字符串中首次出現(xiàn)的位置

>例如:

var v = "abcabdefgh";

alert(s.indexOf("ab"));
###### 2.s.lastIndexOf(searchvalue,fromindex)
作用:可以返回一個指定的字符串值最后出現(xiàn)的位置,在一個字符串中的指定位置從后向前搜索
>例如:

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下標開始的指定數(shù)目的字符
>例如:

var s="asdfghj";

alert (s.substr(1));
###### 3.s.slice(start,end) 方法
作用:可以提取字符串的某個部分,并且以新的字符串返回被提取的部分
>例如:

var s="asdfghj";

alert (s.slice(1,3));

##### 6.大小寫轉(zhuǎn)換方法
###### 1.s.toUpperCase
作用:字符串中所有的字符轉(zhuǎn)變成為大寫
>例如:
var s = "abcAbc";

alert(s.toUpperCase());
###### 2.s.toLowerCase

作用:字符串中的所有的字符轉(zhuǎn)變成小寫
>例如:

var s = "ABcAbc";

alert(s.toLowerCase());

##### 7.去除字符串首尾空白字符
s.trim() : 
作用;只是去除字符串的首尾的所有空白字符.  字符串內(nèi)部的空白字符不做任何處理
>例如:

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(匹配值)
作用:在字符串內(nèi)檢索指定的值
>例如:

var s = "abcaba";

var arr = s.match("ab");

alert(arr);

######  3.s.search(匹配的參數(shù))

作用:始終從字符串的頭部開始查找
>例如:

var s = "abcaba";

var arr = s.search("ab");

alert(arr);
##### 9.字符串比較
* ==    比較兩個字符串的==內(nèi)容==是否相等
* === 恒等    只有類型和內(nèi)容都相等的時候才返回true

##### * s.localeCompare(other):
 - 如果字符串在字母表中應(yīng)該排在字符串參數(shù)之前,則返回一個負值;
- 如果字符串的等于字符串參數(shù),返回0;
- 如果字符串在字母表中應(yīng)該排在字符串參數(shù)之后,則返回一個正數(shù);

##### 10.字符串切割方法
s.split(separator,howmany)方法

作用:用于把一個字符串分割成字符串數(shù)組。
>例如:
var s = "How do you do";

var arr = s.split(" ");

alert(arr);

二十四.JavaScript中Math對象

1.常用屬性
  • Math.PI : π的值
  • Math.E: 自然對數(shù)的底數(shù)
2.Math對象常用方法
  • Math.abs(x) : 返回x的絕對值
  • Math.max(任意個數(shù)值) :返回傳入的數(shù)值中的最大值
  • Math.min(任意個數(shù)值) :返回傳入的數(shù)值中的最小值
  • Math.ceil(number) : 返回大于等于number的最小整數(shù)(向上取整)
  • Math.floor(number) : 返回小于等于number的最大整數(shù)(向下取整)
  • Math.round(number): 四舍五入
  • Math.pow(x, y) : 返回 x^y
  • Math.random() : 返回 0-1之間的隨機小數(shù)
  • 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

<pre>

  • window.innerHeight - 瀏覽器窗口的內(nèi)部高度
  • window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
    </pre>
2. 針對于 Internet Explorer 8、7、6、5

<pre>

  • document.documentEelement.clentWidth
  • document.documentEelement.clentWidth
    </pre>
3.為了兼容瀏覽器的版本可以使用下面的代碼

<pre>

  • var w=window.innerWidth || documentEelement.clentWidht;
  • var h=window.innerHeight || documentEelemlent.clentHeight;
    </pre>
3.調(diào)整窗口大小
  • window.resize(w,h): 調(diào)整到指定的大小
  • resizeBy(deltW, deltH): 增加指定窗口的寬和高

例如:

<pre>
<body>

<button onclick="to();">將窗口調(diào)整到指定大小</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>
</pre>

二十六. window中的定時器

1.window對象中定時器的功能方法
  • 超時調(diào)用 setTimeout()

例如:

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

例如:

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

*/
<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;    //設(shè)置h1標簽中的值
        }, 1000);
    </script>
</body>
    //清除間隔定時器
    window.clearInterval(id);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容