主頁 > 企業開發 > JS基礎語法

JS基礎語法

2022-01-27 07:11:51 企業開發

JavaScript是什么

Netscape在最初將其腳本語言命名為LiveScript,后來Netscape在與Sun合作之后將其改名為JavaScript,JavaScript最初受Java啟發而開始設計的,目的之一就是“看上去像Java”,因此語法上有類似之處,一些名稱和命名規范也借自Java,JavaScript與Java名稱上的近似,是當時Netscape為了營銷考慮與Sun微系統達成協議的結果,Java和JavaScrip只是名字很像,

Java 服務器端的編程語言

JavaScript 運行在客戶端(瀏覽器)的編程語言

JavaScript是一種運行在客戶端腳本語言 JavaScript的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶端的腳本語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能,

JavaScript和HTML、CSS的區別

  1. HTML:提供網頁的結構,提供網頁中的內容

  2. CSS: 用來美化網頁

  3. JavaScript: 可以用來控制網頁內容,給網頁增加動態的效果

第一個JavaScript程式

在HTML頁面中添加

    <title>Document</title>
   <script>
       window.onload=function(){
           for(var i = 0;i < 10;i ++){
               document.write("<p>我要中獎500W!<p>");
          }
      }
   </script>

運行頁面查看效果,

JavaScript的書寫位置

  • 寫在行內

<input type="button" value=https://www.cnblogs.com/xiaoxiaodeboke/p/"按鈕" onclick="alert('Hello World')" />
  • 寫在script標簽中 script可以寫在HTML頁面的任何位置,

<head>
 <script>
   alert('Hello World!');
 </script>
</head>
  • 寫在外部js檔案中,在頁面引入

<script src=https://www.cnblogs.com/xiaoxiaodeboke/p/"main.js"></script>

tips:參考外部js檔案的script標簽中不可以寫JavaScript代碼

變數

什么是變數

變數是存盤資料的最小單元

就是可以變化的量,

程式在計算的時候,是CPU從記憶體中獲取資料,進行計算,計算完成之后再將資料寫入內容,

資料是存盤在記憶體中的,記憶體可以認為是一個陣列(表格),表格的每一個單元格都是有序號的,任何資料存在記憶體中都有一個開始的位置和結束的位置,

變數就是在記憶體中開辟空間,存盤要計算的資料,為了方便操作這個資料,給這個空間起一個別名,

別名+空間+資料 = 變數,

別名:變數名,

資料:變數的值,

空間:根據變數的資料型別開辟的,

變數的使用

tips: JS是嚴格區分大小寫,

tips:js是弱資料型別,所以在申明變數的時候不需要申明資料型別,在做賦值運算的時候,會自動根據賦值的型別確定變數的資料型別,

  • var宣告變數

var age;

任何型別的變數(物件)都是使用var/let,在申明變數的時候不需要注明資料型別,

  • 變數的賦值

var age;
age = 18;

在賦值的時候才確定資料型別,也就是說,一個變數可以賦任何型別的資料,

  • 同時宣告多個變數

var age, name, sex;
age = 10;
name = 'mingren';
  • 同時宣告多個變數并賦值

var age = 10, name = 'kakaxi';
  • 如果一個變數沒有賦值,則默認值是:undefined

//將一個沒有賦值的變數輸出到控制臺
       var tel;
       console.log(tel);// undefined
  • 如果一個變數沒有申明,就直接使用,會出錯,

console.log(a);//出錯 : a is not defined

控制臺的使用

現在的主流瀏覽器中都有JS的控制臺,

都是打開瀏覽器之后,按:F12,

            // 如果申請了一個變數是沒有賦值的,則這個變數的值默認是undefined
var job;
// alert(job);

// 在控制臺輸出內容
// 直接輸出字串
console.log("我是一個直接輸出的字串");
// 輸出一個變數的值,直接寫變數的名字,不需要引號
console.log(c);
console.log(job);
console.log(type);

變數的命名規則和規范

規則:法律,不能觸犯

①不能是JS的關鍵字和保留字符,

錯誤示例:var var ; var int ;

②不能以數字開頭,(可以以數字結尾,或者中間有數字)

錯誤示例: var 0abc; var 10name;

正確示例: var name0; var stu10score;

③不能有特殊符號(特殊符號一般都是運算子和空字符)可以有“_”"$/¥" 也可以是中文(我建議使用拼音),

錯誤示例: var name+score; var name score;

1、js中的關鍵字:

breakcasecatchcontinuedefault
delete do else finally for
function if in instanceof new
return switch this throw try
typeof var void while with

2、js中的保留字:

abstractbooleanbytecharclass
const debugger double enum export
extends final float goto implements
import int interface long native
package private protected public short
static super synchronized throws transient
volatile        

 

規范:

①言簡意賅,

錯誤示例: var a , c , def;

正確示例: var name; age; score;gender;tel;

②符合駝峰規則,

如果變數由一個單詞組成,則所有的字母小寫,

如果由多個單詞組成,則除過第一個單詞之外,其他的單詞的首字母都要大寫,其余的字母小寫,

案例:var stuScore; var teacherTel;

如果是簡稱 就全部小寫,

資料型別

tips:弱資料型別不代表沒有資料型別,

下面我們就來看看js的資料型別,

簡單資料型別

Number、String、Boolean、Undefined、Null

Number型別

  • 數值字面量:數值的固定值的表示法

    110 1024 60.5

  • 進制

十進制
	var num = 9;
	進行算數計算時,八進制和十六進制表示的數值最終都將被轉換成十進制數值,
十六進制
	var num = 0xA;
	數字序列范圍:0~9以及A~F
八進制
    var num1 = 07;   // 對應十進制的7
    var num2 = 019;  // 對應十進制的19
    var num3 = 08;   // 對應十進制的8
    數字序列范圍:0~7
    如果字面值中的數值超出了范圍,那么前導零將被忽略,后面的數值將被當作十進制數值決議
  • 浮點數

    • 浮點數的精度問題

浮點數
	var n = 5e-324;   // 科學計數法  5乘以10的-324次方  
浮點數值的最高精度是 17 位小數,但在進行算術計算時其精確度遠遠不如整數
   var result = 0.1 + 0.2;    // 結果不是 0.3,而是:0.30000000000000004
   console.log(0.07 * 100);
   不要判斷兩個浮點數是否相等
  • 數值范圍

最小值:Number.MIN_VALUE,這個值為: 5e-324
最大值:Number.MAX_VALUE,這個值為: 1.7976931348623157e+308
無窮大:Infinity
無窮小:-Infinity
  • 數值判斷★★★★★★★★★

    • NaN:not a number

      • NaN 與任何值都不相等,包括他本身

    • isNaN: is not a number

關于NaN和isNaN的使用:

NaN是一個型別,表示不是數字,

isNaN是一個函式,判斷一個數字是否是NaN,

        //這是一個錯誤的運算
        var x = 10 - "Ⅹ";
        console.log(x);// NaN
        var r = isNaN(x);
        console.log(r);// true

String型別

'abc' "abc"

tips:在javaScript中的單引號和雙引號是沒有區別的, 再理解就是沒有字符和字串的區分,

一個字串可以是空的,也可以是很長,

請問String 有沒有長度限制?

理論上沒有,實際上有,

Boolean型別

  • Boolean字面量: true和false,區分大小寫

  • 計算機內部存盤:true為1,false為0

tips:js中的元素只要存在就是true,不存在就是false,

在JS中字串 "" 表示 false, “123”表示true , 0表示false,非0表示true,

看一個案例:

        var a = new Object();//這里的a可以賦值為任何型別
        if(a){
            console.log("a");
        }else{
            console.log("no a");
        }

Undefined和Null

  1. undefined表示一個宣告了沒有賦值的變數,變數只宣告的時候值默認是undefined

  2. null表示一個空,變數的值如果想為null,必須手動設定

        var student;
        var person = null;
        console.log(student);// undefined
        console.log(person);// null

獲取變數的型別

typeof

        console.log(typeof car) // object
        console.log(typeof person) // object
        console.log(typeof x) // number
        console.log(typeof "haha")// string

注釋

單行注釋: //

多行注釋:

/*
* 多行注釋
*
*/

資料型別轉換

轉換成字串型別

  • toString()

    var num = 5;
    console.log(num.toString());
    
  • String()

    String()函式存在的意義:有些值沒有toString(),這個時候可以使用String(),比如:undefined和null
    			var u;// undefined
    			console.log(typeof u);
    			// u = u.toString();// undefined沒有toString方法
    			u = String(u); // tips這里的s要大寫
    			console.log(typeof u);
    
  • 拼接字串方式

    num + "",當 + 兩邊一個運算子是字串型別,一個運算子是其它型別的時候,會先把其它型別轉換成字串再進行字串拼接,回傳字串

轉換成數值型別

  • Number()

    Number()可以把任意值轉換成數值,如果要轉換的字串中有一個不是數值的字符,回傳NaN
    			var score = "98.5a";
    			console.log(typeof score);// string
    			console.log(score);// 98.5a
    			score = Number(score);
    			console.log(typeof score);// number
    			console.log(score);// NaN
    

    TIPS:使用Number()進行轉換,字串必須是數字形式, “123”,“95.2” 非數字形式:“32.9A”“abc123” 如果是非數字形式就轉換為NaN

  • parseInt()

    var num1 = parseInt("12.3abc");  // 回傳12,如果第一個字符是數字會決議直到遇到非數字結束
    var num2 = parseInt("abc123");   // 回傳NaN,如果第一個字符不是數字或者符號就回傳NaN
    	/// 案例1
    			var score = "98.9";
    			console.log(typeof score);// string
    			console.log(score);// 98.9
    			score = parseInt(score);// 將字串轉化為整數
    			console.log(typeof score);// number
    			console.log(score);// 98  tips: 如果有小數部分,直接拋棄,
    	// 當字串是非數字形式的時候,
    			var score = "98a89";
    			console.log(typeof score);// string
    			console.log(score);// 98a89
    			score = parseInt(score);// 將字串轉化為整數
    			console.log(typeof score);// number
    			console.log(score);// 98 
    // 如果字串中間出現了非數字,則從非數字字符往前會轉換為整形,其他的字符直接拋棄,如果第一個字符就是非數字,則直接轉換為NaN
    
  • parseFloat()

    parseFloat()把字串轉換成浮點數
    parseFloat()和parseInt非常相似,不同之處在與
    	parseFloat會決議第一個. 遇到第二個.或者非數字結束
    	如果決議的內容里只有整數,決議成整數
    	
    			var score = "98.89.56";
    			console.log(typeof score);// string
    			console.log(score);// 98.89.56
    			score = parseFloat(score);// 將字串轉化為Float
    			console.log(typeof score);// number
    			console.log(score);// 98.89
    
  • +,-0等運算

    var str = '500';
    console.log(+str);		// 取正
    console.log(-str);		// 取負
    console.log(str - 0);
    

    tips:當使用字串和數字進行數學運算的時候,如果沒有歧義(+可以鏈接字串),會自動將字串轉換為數字,如果字串不是純的數字形式,最終的結果就是NaN,

轉換成布爾型別

  • Boolean()

0 ''(空字串) null undefined NaN 會轉換成false 其它都會轉換成true

運算子(運算子)

運算子 operator

5 + 6

運算式 組成 運算元和運算子,會有一個結果

算術運算子

+ - * / %  

和數學中表達的意思是一樣的,

+特殊情況: 當兩個字串使用+連接的時候,會作為字串連接,

對了還是有點區別的:

兩個字串也許是可以作任何算數運算的,如果是“+”有可能會出現字串連接,

			var score1 = "23";
			var score2 = "25";
			// 字串連接
			var score = score1 + score2;// 2325
			console.log(score);
			// 轉換再運算,
			score = eval(score1)+eval(score2);
			console.log(score);
			score = parseInt(score1) + parseInt(score2);
			console.log(score);
			// 其他的運算,如果運算元不出現非數字形式的字串,都會自動轉換
			score = score1 - score2;
			console.log(score);
			// 如果運算元出現非數字形式,最終結果都是NaN
			score = score1 - "123a";
			console.log(score);// NaN

一元運算子

一元運算子: ++ -- (常常被稱為自加自減),

用法:

var x = 10;
x ++; // 11  給自己+1,

++和--在運算元的前后是有區別的,

試題:

15  var x = 2;
16  var j = x ++;
x和j分別是多少?
x = 3; j = 2;

tips: 任何時候使用++和--無論在前還是在后,一旦程式執行之后,被運算元肯定+1或者-1了,

++在前,先++后運算, ++在后,先運算后++;

j = x ++;
先把x的值賦值給j,再給x++;
j = ++ x;
先把x++ 再賦值給j,
案例: var x = 2; j = x ++ + 4; y = ++ x + 5; 上面的情況 x = 4; j = 6; y = 9;

試題:

var x = 3;
y = x ++ + ++ x;
結果:
x = 5;
運算程序: 先計算++x,x=4; 繼續計算 x + x (4 + 4),接下來就是賦值,所以y是8, 接下來執行 x ++;x = 5;

試題:交換兩個變數的值,

var x = 3;y = 4;

中間變數做法:

var t = x;

x = y;

y = t;

在不使用中間變數的情況下的做法:

x = x + y;

y = x - y;

x = x - y;

關系運算子(比較運算子)

任何時候一個運算式中只要出現了 “ 關系運算子 ”,那么這個運算式的結果必然是一個boolean值,

<  >  >=  <= == != === !==
①絕對不能出現等于大于  >=  也不能出現 等于小于 
②比較兩個變數的值是否相等,使用 == 是否不相等使用 !=
③比較兩個變數的值和型別是否相等,使用 === 
==與===的區別:==只進行值得比較,===型別和值同時相等,則相等
			var x  = 10;
			var y = 9
			var result = x > y;
			console.log(result);
			// <  >=   <=  都是一樣的,
			// 如果是字串....
			var name = "卡卡西";
			var name1 = "佐助";
			result = name < name1;
			console.log(result);
			// 數字形式的字串直接按照數字處理,
			var score = "98.5"
			var score1 = 98.5;
			console.log(score >= score1);
			
			// 運算子 == 和 !=
			var s1 = "abc";
			var s2 = "abc";
			console.log(s1 == s2);// true
			console.log(s1 != s2);// false
			
			var c1 = "95.8";
			var c2 = 95.8;
			console.log(c1 == c2);// true
			
			var c3 = "abc" - 98;
			var c4 = "def" * 95;
			console.log(c3 == c4);// false 所有的NaN == 的結果都是false,
			
			// 運算子 === (要求值和型別完全一致,才是true)
			var c1 = "95.8";
			var c2 = 95.8;
			console.log(c1 === c2);// false
			console.log(c1 !== c2);// true
邏輯運算子(布爾運算子)

邏輯運算子主要用來鏈接或者操作一個或多個結果為布林值的運算式,

&& 與 兩個運算元同時為true,結果為true,否則都是false || 或 兩個運算元有一個為true,結果為true,否則為false ! 非 取反

案例:

		var score1 = 90;
		var score2 = 80;
		// 兩個條件同時是true
		var result = score1 >= 85 && score2 >= 85;
		console.log(result);
		// 兩個條件滿足一個即可
		result = score1 >= 90 || score2 >= 90;
		console.log(result);
		// 邏輯非 ! 取反  優先級賊高
		result = !(score1 >= 90) || score2 >= 90;
		console.log(result);
		
		result = !(score1 >= 90 || score2 >= 90);
		console.log(result);

邏輯運算子連或者操作的運算式肯定是boolean型別的運算式, 任何一個運算式如果出現了邏輯運算子,結果肯定也是boolean值,

短路情況:

(筆試面試常考的細節)

		// 特殊情況
		var score1 = 90;
		var score2 = 80;
		var a = 10;
		result = score2 > 85 && (a = score1) > 85;
		console.log(result);// false
		console.log(a);// 10

邏輯與 && 和邏輯或|| 都有短路的作用:當運算子前面的運算式已經決定了整個運算式的結果,運算子后面的運算式不會再運算了,

賦值運算子

= += -= *= /= %=

賦值運算子的主要作用就是將運算子右邊的運算式的結果賦值給左邊的變數,

例如:
var num = 0;
num += 5;	//相當于  num = num + 5;

運算子的優先級

優先級從高到底
	1. ()  優先級最高
	2. 一元運算子  ++   --   !  (++和--要考慮在前還是在后)
	3. 算數運算子  先*  /  %   后 +   -
	4. 關系運算子  >   >=   <   <=
	5. 相等運算子   ==   !=    ===    !==
	6. 邏輯運算子 先&&   后||
	7. 賦值運算子

案例:計算一個年份是否是閏年

var result = ((year % 400) == 0) || (((year % 100) != 0) && ((year % 4) == 0));

三目運算

或者說是三元運算,

運算子:result = 運算式1 ? 運算式2 : 運算式3

result的結果 = 如果運算式1的結果是true,則整個運算式的結果是運算式2的結果,如果運算式1的結果是false,則整個運算式的結果是運算式3的結果,

性別:

		var gender = 1;
		console.log(gender == 1?'男':'女');

流程控制

程式的三種基本結構

順序結構

從上到下執行的代碼就是順序結構

程式默認就是由上到下順序執行的

分支結構

根據不同的情況,執行對應代碼

回圈結構

回圈結構:重復做一件事情

分支結構

if陳述句

語法結構

情況1: 如果xxx就xxxx

if (/* 條件運算式 */) { // 執行陳述句}

案例:

            var score = 85;
if(score > 85){
console.log("獎勵《奎華寶點》");
}
console.log("程式結束")

情況2:如果xxx就xxx,否則就xxxx

if (/* 條件運算式 */){ // 成立執行陳述句 } else { // 否則執行陳述句 }

案例:

            var score = 85;
if(score > 85){
console.log("獎勵《奎華寶點》");
}else{
console.log("獎勵《一頓暴揍》");
}
console.log("程式結束");
?
// 三目運算解決問題
console.log(score > 85 ?"《奎華寶點》":"《一頓暴揍》");

tips: 這個世界上最遠的距離就是你在if里,我在else里, if(條件),條件理論上必須是布林值的運算式,但是js中的默認會自動將其他型別轉換為布爾型,所以書寫上就感覺可以寫任何型別,

            var x = 0;
if(x){// 默認會將其他的型別轉換為布爾型、
console.log("111");
}else{
console.log("222");
}

其他型別轉換為布林值的情況:

其他型別布爾型
數字 0->false,非0 -> true
字串 "" -> false,其他都是true
undefined,null,NaN 全部都是false
其他的物件 全部都是true

案例:

var username = document.getElementById("username").value;
// 判斷用戶名是否是空字符或者是否是undefined
if(username != undefined && username != ""){
   // username不是空的
}
// ---------------
if(username){
   // username不是空的
}else{
   // username是空的
}

情況3 多重分支陳述句

if (/* 條件1 /){ // 成立執行陳述句 } else if (/ 條件2 /){ // 成立執行陳述句 } else if (/ 條件3 */){ // 成立執行陳述句 } else { // 最后默認執行陳述句 }

tips:這里的if(條件) 后面的條件可以是任何型別,因為它會自動進行型別轉換, else模塊是可選的,

        <input type="text" id="score">
<input type="button" onclick="showScore()" value=https://www.cnblogs.com/xiaoxiaodeboke/p/"click me">
<script>
function showScore(){
var score = document.getElementById("score").value;
if(score == undefined || score ==""){// 沒有輸入任何內容
alert("請輸入一個成績");
return;// 讓這個程式中斷
}
// 判斷輸入的是否是一個數字
if(isNaN(Number(score))){ // 如果是true,就說明不是一個數字
alert("請輸入一個數字");
return;// 讓這個程式中斷
}
// 判斷數字范圍
if(score > 100 || score < 0){
alert("請輸入一個0~100之間數字");
return;
}

// 你輸入的格式符合要求了
// 多重分支
if(score >= 90){
console.log("獎勵《虧華寶殿》");
}else if(score >= 80){
console.log("獎勵寶馬自行車");
}else if(score >= 70){
console.log("獎勵《三年模擬五年高考》");
}else{
console.log("獎勵《一頓暴揍》");
}
}
</script>

tips:即使是多重分支陳述句,也是永遠最多執行一個陳述句塊,如果某一個判斷條件已經成立,其他的條件就不會再判斷了,

多重分支要注意的一些問題:

上面的案例做一個簡單的修改:

            // 你輸入的格式符合要求了
// 多重分支
if(score >= 70){
console.log("獎勵《三年模擬五年高考》");
}else if(score >= 80){
console.log("獎勵寶馬自行車");
}else if(score >= 90){
console.log("獎勵《虧華寶殿》");
}else{
console.log("獎勵《一頓暴揍》");
}

上面的程式中只要超過70分就是三年模擬五年.....

避免上面的問題的解決方案:

[1]不要把順序寫錯了,

[2]把條件寫完整

分支陳述句的嵌套

分支陳述句中{}表示一個分支陳述句塊,

一個陳述句塊中可以寫其他的執行陳述句獲取其他的分支陳述句,

案例:

        <input type="text" placeholder="請輸入年齡" id="age">
<input type="button" onclick="parseAge()" value=https://www.cnblogs.com/xiaoxiaodeboke/p/"click me">
<script type="text/javascript">
function parseAge(){
var age = document.getElementById("age").value;
if(age){// 分支陳述句中再嵌套一個分支
if(age < 18 || age > 150){
alert("年齡大小不符合范圍");
}else{
alert("OKKKKKKK");
}
}else{
alert("請輸入一個年齡");
}
}
</script>

tips: 在實際的開發中,盡量避免復雜的分支陳述句和分支嵌套,

switch陳述句

語法格式:

switch (expression) {
 case 常量1:
   陳述句;
   break;
 case 常量2:
   陳述句;
   break;
 case 常量3:
   陳述句;
   break;
 
 case 常量n:
   陳述句;
   break;
 default:
   陳述句;
   break;
}

tips:這里的expression機會沒有限制,break是非必須的, default塊也是可選的,

看一個簡單案例:

        <input type="text" placeholder="請輸入年級" id="grade">
<input type="button" onclick="parseGrade()" value=https://www.cnblogs.com/xiaoxiaodeboke/p/"click me">
<script type="text/javascript">
function parseGrade(){
var grade = document.getElementById("grade").value;
// 使用switch輸出年級的特性
switch(grade){
case '1':
console.log("積極的回答問題!");
break;
case '2':
console.log("就知道玩!");
break;
case '3':
console.log("你就是校園的老大!");
break;
case '4':
console.log("你根校園馬上就沒有關系了!");
break;
default:
console.log("已經進入社會,被社會毒打!");
}
}
</script>

break是可選的,如果洗掉break,會出現如下的情況:

當case 2 符號條件之后,后面的所有程式都會執行,

因為在swtich結構中,如果某一個case判斷為true,后面的case默認全部是true,

我們使用break就為了跳出當前的swtich結構,不再執行后面的程式,

問題switch ...case 和多重的if esle if . ....有些相似,能不能互換?

案例1: 使用if else if 替換switch

                    // 使用多重的if  else  替換swtich
if(grade =='1'){
console.log("積極的回答問題!");
}else if(grade == '2'){
console.log("就知道玩!");
}else if(grade == '3'){
console.log("你就是校園的老大!");
}else if(grade == '4'){
console.log("你根校園馬上就沒有關系了!");
}else{
console.log("已經進入社會,被社會毒打!");
}

swtich只能做等值判斷, 所以所有的等值判斷的分支,都可以使用swtich,

if else if 可以是做任何的分支判斷,

tips:能使用swtich的地方不要使用多重的if else ......

回圈結構

在javascript中,回圈陳述句有三種,while、do..while、for回圈,

回圈結構是用來執行多次相同或者相似的操作,

while陳述句

基本語法:

// 當回圈條件為true時,執行回圈體,
// 當回圈條件為false時,結束回圈,
while (回圈條件) {
 //回圈體
}

案例1:一個簡單的死回圈(瀏覽器會奔潰,建議你不要嘗試這個程式)

        <script type="text/javascript">
// 先判斷while中的條件是否是true,如果是就執行回圈陳述句
// 執行回圈陳述句之后,再次判斷條件......
while(1 == 1){// 這個回圈是一個死回圈
console.log("明年就中500W!");
}
</script>

案例2:簡單回圈

    <script type="text/javascript">
var i = 0;
while( i < 10 ){
console.log(i+"明年就中500W!");
i ++;
}
</script>

while回圈的特點:先判斷,后執行,有可能一次都不執行, 退出回圈的位置在判斷條件的位置,

問題:計算1~100之間所有的數的和,

    <script type="text/javascript">
// 計算1到100之間的和
var x = 1;
var sum = 0;
while( x <= 100){
sum += x;// sum = sum + x;
x ++;
}
console.log("sum = "+sum);
</script>

do...while陳述句

do..while回圈和while回圈非常像,二者經常可以相互替代,但是do..while的特點是不管條件成不成立,至少會執行一次,

基礎語法:

do {
 // 回圈體;
} while (回圈條件);

執行流程:先執行后判斷,

先執行回圈體,再判斷回圈條件,如果條件成立,則繼續回圈,條件不成立,退出回圈,

案例1:不寫死回圈了,

    <script type="text/javascript">
// do while回圈
var j = 0;
do{
console.log("22年要找"+j+"個物件");
j ++;// 不要忘記
}while(j < 10); // 也執行10次
</script>

do while 無論如何都會執行一次,

案例2: 計算1~100之間所有的偶數的和

	<script type="text/javascript">
		var y = 1;
		var sum = 0;
		do{
			if(y % 2 == 0){// 當y是偶數的時候才+
				sum += y;
			}
			y ++;
		}while(y <= 100);
		console.log("sum = "+sum);
	</script>

for陳述句

while和do...while一般用來解決無法確認次數的回圈,for回圈一般在回圈次數確定的時候比較方便

for回圈語法:

// for回圈的運算式之間用的是;號分隔的,千萬不要寫成,
for (初始化運算式1; 判斷運算式2; 自增運算式3) {
  // 回圈體4
}

for回圈中的運算式不是必須的,

案例1:

	<script type="text/javascript">
		for(var x = 0;x < 10;x ++){
			console.log(x + "->這個是for回圈");
		}
	</script>

上面的案例中的

運算式1 : var x = 0

運算式2: x < 10

運算式3: x++

回圈體: 輸出陳述句

上面for回圈的執行流程:

進入for回圈立刻執行運算式1,
接下來執行運算式2,運算式2結果為true,執行回圈體,為false退出回圈,
如果執行了回圈體,接著執行運算式3,
執行完運算式3表示一個回圈結束,接著執行運算式2,繼續判斷是否回圈,,,,,

流程應該是:1,2,3,4,2,3,4...... 當2為false的時候退出回圈,

運算式1在進入回圈的時候執行一次,以后不會再執行,

運算式2最終都會被轉換為布林值,

看看下面的例子:

			var x = 0
			for(console.log("回圈開始");x < 10;x ++,console.log("一次回圈結束")){
				console.log(x + "->這個是for回圈");
			}

for回圈的第一個運算式不一定就是回圈變數定義,可以是任何可執行的陳述句,

運算式3也是可以寫任何可執行的程式,

案例2: 計算一個數字的階乘,

1x2x3x4x5x6x7x8x9x10 = 10!
	<input type="text" id="num">
	<input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/p/click me" onclick="jiechen()">
	<script type="text/javascript">
		function jiechen(){
			var num = document.getElementById("num").value;
			num = parseInt(num);
			// 使用for回圈計算階乘
			var result = 1;
			for(var x = 2; x <= num ;x ++){
				result *= x;// result = result * x;
			}
			document.getElementById("num").value=https://www.cnblogs.com/xiaoxiaodeboke/p/result;
		}
	</script>

continue和break

break:立即跳出整個回圈,即回圈結束,開始執行回圈后面的內容(直接跳到大括號)

continue:立即跳出當前回圈,繼續下一次回圈(跳到i++的地方)

break 中斷當前的回圈

案例1:

	<script type="text/javascript">
		// break
		for(var x = 0;x < 10;x ++){
			console.log(x+"--你好!");
			if(x == 5){
				break;// 中斷回圈
			}
		}
		
	</script>

案例:2計算兩個數字的最小公倍數,

	<input type="text" id="num1" placeholder="第一個數">
	<input type="text" id="num2" placeholder="第一個數">
	<input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/p/click me" onclick="jisuan()">
	<script type="text/javascript">
		function jisuan(){
			// 從相對比較大的數開始往上+1,進行測驗
			var num1 = document.getElementById("num1").value;
			var num2 = document.getElementById("num2").value;
			// 找出相對較大的資料
			var n = num1 > num2 ? num1:num2;
			// 開始回圈,這里我們不知道回圈次數
			while(true){
				if(n % num1 == 0 && n % num2 == 0){
					// 最小公倍數找到,退出回圈,
					break;
				}
				n ++;
			}
			console.log(num1+"和"+num2+"的最小公倍數是:"+n);
		}
	</script>

continue中斷本次回圈,繼續下次回圈

案例1:

	<script type="text/javascript">
		// break
		for(var x = 0;x < 10;x ++){
			if(x == 5){
				continue;// 中斷本次回圈,繼續下次回圈
			}
			console.log(x+"--你好!coninue");
		}
	</script>

案例2: 計算1~100之間所有可以被3整除的數的和

	<script type="text/javascript">
		var sum = 0;
		for(var x = 1;x <= 100;x ++){
			if(x % 3 != 0){
				continue;// 不能被3整除的就直接continue
			}
			sum += x;
		}
		console.log(sum);
	</script>

除錯

  • 過去除錯JavaScript的方式

    • alert()

    • console.log()

  • 斷點除錯

斷點除錯是指自己在程式的某一行設定一個斷點,除錯時,程式運行到這一行就會停住,然后你可以一步一步往下除錯,除錯程序中可以看各個變數當前的值,出錯的話,除錯到出錯的代碼行即顯示錯誤,停下,

  • 除錯步驟

瀏覽器中按F12-->sources-->找到需要除錯的檔案-->在程式的某一行設定斷點
  • 除錯中的相關操作

Watch: 監視,通過watch可以監視變數的值的變化,非常的常用,
F10: 程式單步執行,讓程式一行一行的執行,這個時候,觀察watch中變數的值的變化,
F8:跳到下一個斷點處,如果后面沒有斷點了,則程式執行結束,

陣列

tips:js中沒有集合,只有陣列,

陣列的定義

陣列是一個有序的串列,可以在陣列中存放任意的資料,并且陣列的長度可以動態的調整,

通過陣列字面量創建陣列

        //申明一個空陣列
        var arr = [];// java >> int [] arr = {};
        // 再申明一個陣列
        var arr1 = new Array(3);// 創建了一個陣列,里面有3個元素都是undefined
        // 創建一個有初始值的陣列,數字的值的型別可以不一致
        var arr2 = [1,2,'三']

tips:

在js中申明陣列也是使用var,
陣列的長度可以指定,也可以不指定, 指定長度 new Array(len); 這個len只是表示這個陣列的最小長度,我們在賦值的時候即使超過了這個長度也不會有任何錯誤,
陣列如果指定了長度,元素的默認值統一是undefined,
陣列元素的型別是可以不規則的,

給陣列中添加元素

沒錯就是想的那樣, 而且陣列的長度根本就限制不了我們添加元素,

        //賦值
        arr1[0] = '一';
        arr1[1] = '二';
        arr1[2] = '三';
        //在js中沒有索引越界
        arr1[3] = '四';// java>>ArrayIdexOutOfBoundsException

獲取陣列元素

這個和java是一樣的,通過下標獲取,

但是js中的陣列還有一種奇怪的現象,我們來看看情況!

        var cs = new Array();
        cs['江蘇'] = '南京';
        cs['安徽'] = '合肥';
        cs['河南'] = '鄭州';
        console.log(cs['江蘇']);// 南京
        console.log(cs.length);// 0

tips:上面的例子上可以看出,陣列的索引不是數字 ?????????

遍歷陣列

        //遍歷陣列
        for(var x = 0;x < arr1.length;x++){
            console.log(arr1[x]);
        }
        //foreach遍歷
        console.log("foreach遍歷--和java不同");
        // 將:替換為in關鍵字,  j表示的是陣列的索引
        for(var j in arr1){
            console.log(arr1[j]);
        };

當然如果遇到了上面寫的那種奇怪的陣列可能操作也要有點改變了,我們來看看呢!

傳統for回圈無法遍歷,要使用foreach遍歷:

        for(var s in cs){
            console.log(s+">>"+cs[s]);
        };

JS中的“陣列”的特殊理解:

陣列是一個物件,

我們訪問一個物件的屬性的時候,使用的語法一般都是:

物件名.屬性名
或者
物件名['屬性名']

再看看剛才的例子:

        var cs = new Array();
        cs[0] = '哈哈'
        cs[1] = '嘻嘻'
        cs['江蘇'] = '南京';
        cs['安徽'] = '合肥';
        cs['河南'] = '鄭州';
        console.log(cs);

瀏覽器格式化之后的陣列物件,所有的資料都是 key: value的形式,

這里的key都是這個陣列物件的屬性,那么理論上來說,我們就可以通過 物件名.屬性名 來方法所有的屬性,、

但是,如果屬性是數字,從語法決議上就會出錯,所以數字就是用 物件名.[index]來訪問,

函式

什么是函式

就是java中的方法,

函式的定義

  • 函式宣告

function 函式名(){
  // 函式體
}
  • 函式運算式

var fn = function() {
  // 函式體
}
  • 特點:

    函式宣告的時候,函式體并不會執行,只要當函式被呼叫的時候才會執行, 函式一般都用來干一件事情,需用使用動詞+名詞,表示做一件事情,

函式的呼叫

  • 呼叫函式的語法:

函式名();

案例:

        //定義一個函式
        //第一種方式
        function sayHello(){
            console.log("hello");
        }
        //第二種定義函式的方式
        var sayBey=function(){
            console.log("再見");
        }
        //呼叫函式
        sayHello();
        sayBey();

函式的引數

js是弱資料型別,在申明引數的時候,不需要申明資料型別,只要寫清楚引數的名稱和個數就好,
        //函式的引數
        function eat(food){
            console.log("吃"+food);
        }
        //呼叫有引數的函式
        eat("米飯");
        function sleep(name,time){
            console.log(name+"睡了"+time+"毫秒");
        }
        sleep("卡卡西",56416316456);

對了,有的時候,申明或者不申明引數,好像對函式的呼叫也沒啥影響!(對于java程式員來說,比戴假發還難受)

        //有一個引數的函式
        function fn(n){
            console.log(n);
        }
        fn();// undefined
        fn(1,2,3,4,5,6);//1

函式的回傳值

話不多說,直接來看看和java中方法回傳值的區別吧

  • 回傳值不需要申明

  • 如果這個方法沒有回傳值,則默認回傳undefined

  • 如果有回傳值,只需要在最后一行使用return回傳即可,

        //有回傳值的函式
        function md(n){
            var r = eval(n)+1;
            return r==10?0:r;
        }
        var str = '950506';
        var s = "";
        for(var x = 0;x < str.length;x ++){
            var ch = str.charAt(x);
            //呼叫有回傳值的函式
            var rs = md(ch);
            s += rs;
        };
        console.log(s);

函式其它

匿名函式

匿名函式:沒有名字的函式

匿名函式如何使用:

將匿名函式賦值給一個變數,這樣就可以通過變數進行呼叫
匿名函式自呼叫

關于自執行函式(匿名函式自呼叫)的作用:防止全域變數污染,

自呼叫函式

匿名函式不能通過直接呼叫來執行,因此可以通過匿名函式的自呼叫的方式來執行

        //自執行函式(往往是用來做初始化作業的)
        (function fn1(a){
            console.log("做一些初始化的作業:"+a);
        })("準備一些陣列");
        //fn1("準備一些陣列");

函式是一種資料型別

function fn() {}
console.log(typeof fn);
  • 函式作為引數

因為函式也是一種型別,可以把函式作為兩一個函式的引數,在兩一個函式中呼叫

  • 函式做為回傳值

因為函式是一種型別,所以可以把函式可以作為回傳值從函式內部回傳,這種用法在后面很常見,

        //函式可以作為引數傳遞
        function fn2(f){
            console.log("執行fn2");
            //呼叫f函式
            f();
        }
        //隨意定義一個函式
        function fn3(){
            console.log("執行fn3");
        }
        //呼叫fn2,將fn3作為引數傳遞到fn2中,
        fn2(fn3);

        //函式作為回傳值
        function fn4(){
            console.log("執行 fn4 ");
            return function(){
                console.log("fn4 內部產生的一個函式");
            }
        }
        //呼叫fn4得到一個函式物件
        var fn5 = fn4();
        //呼叫fn5
        fn5();//fn4 內部產生的一個函式

作用域

作用域:變數可以起作用的范圍

全域變數和區域變數

  • 全域變數

    在任何地方都可以訪問到的變數就是全域變數,對應全域作用域

  • 區域變數

    只在固定的代碼片段內可訪問到的變數,最常見的例如函式內部,對應區域作用域(函式作用域)

不使用var宣告的變數是全域變數,不推薦使用,
變數退出作用域之后會銷毀,全域變數關閉網頁或瀏覽器才會銷毀

塊級作用域

任何一對花括號({和})中的陳述句集都屬于一個塊,在這之中定義的所有變數在代碼塊外都是不可見的,我們稱之為塊級作用域,

詞法作用域

變數的作用域是在定義時決定而不是執行時決定,也就是說詞法作用域取決于原始碼,通過靜態分析就能確定,因此詞法作用域也叫做靜態作用域,

在 js 中詞法作用域規則:

  • 函式允許訪問函式外的資料.

  • 整個代碼結構中只有函式可以限定作用域.

  • 作用域規則首先使用提升規則分析

  • 如果當前作用規則中有名字了, 就不考慮外面的名字

var num = 123;
function foo() {
  console.log( num );
}
foo();

if ( false ) {
    var num = 123;
}
console.log( num ); // undefiend

作用域鏈

只有函式可以制造作用域結構, 那么只要是代碼,就至少有一個作用域, 即全域作用域,凡是代碼中有函式,那么這個函式就構成另一個作用域,如果函式中還有函式,那么在這個作用域中就又可以誕生一個作用域,

將這樣的所有的作用域列出來,可以有一個結構: 函式內指向函式外的鏈式結構,就稱作作用域鏈,
// 案例1:
function f1() {
    function f2() {
    }
}

var num = 456;
function f3() {
    function f4() {    
    }
}

預決議

JavaScript代碼的執行是由瀏覽器中的JavaScript決議器來執行的,JavaScript決議器執行JavaScript代碼的時候,分為兩個程序:預決議程序和代碼執行程序

預決議程序:

  1. 把變數的宣告提升到當前作用域的最前面,只會提升宣告,不會提升賦值,

  2. 把函式的宣告提升到當前作用域的最前面,只會提升宣告,不會提升呼叫,

  3. 先提升var,在提升function

        //console.log(a);// 錯誤  a  is  not defined
        console.log(b); // undefinde
        m();// 輸出m
        var b = 10;
        function m(){
            console.log('m');
        }

物件

物件創建方式

  • 物件字面量

var o = {
  name: 'zs',
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};   
  • new Object()創建物件

var person = new Object();
  person.name = '卡卡西';
  person.age = 35;
  person.job = '高級忍者';
  person.sayHi = function(){
  	console.log('千年殺');
  }
  • 工廠函式創建物件

function createPerson(name, age, job) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function(skill){
    console.log(skill);
  }
  return person;
}
var p1 = createPerson('鳴人', 18, '初級忍者');
  • 自定義建構式

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function(skill){
  	console.log(skill);
  }
}
var p1 = new Person('鳴人', 18, '初級忍者');

屬性和方法

額!  在這里屬性和方法從申明上來看,是一回事,
function Person(name,age,job){
  this.name = ...// 屬性
  this.age = ...// 屬性
  this.job = ...// 屬性
  this.sayHi = ... //方法
}
在實作的時候才會有寫區別:
function Person(name,age,job){
  this.name = name;// 屬性
  this.age = age;// 屬性
  this.job = job;// 屬性
  this.sayHi = function(skill){  // 方法
  	console.log(skill);
  }
}

new關鍵字

建構式 ,是一種特殊的函式,主要用來在創建物件時初始化物件, 即為物件成員變數賦初始值,總與new運算子一起使用在創建物件的陳述句中,

  1. 建構式用于創建一類物件,首字母要大寫,

  2. 建構式要和new一起使用才有意義,

new在執行時會做四件事情

new會在記憶體中創建一個新的空物件
new 會讓this指向這個新的物件
執行建構式  目的:給這個新物件加屬性和方法
new會回傳這個新物件

this詳解

JavaScript中的this指向問題,有時候會讓人難以捉摸,隨著學習的深入,我們可以逐漸了解
現在我們需要掌握函式內部的this幾個特點
	1. 函式在定義的時候this是不確定的,只有在呼叫的時候才可以確定
	2. 一般函式直接執行,內部this指向全域window
	3. 函式作為一個物件的方法,被該物件所呼叫,那么this指向的是該物件
	4. 建構式中的this其實是一個隱式物件,類似一個初始化的模型,所有方法和屬性都掛載到了這個隱式物件身上,后續通過new關鍵字來呼叫,從而實作實體化

物件的使用

遍歷物件的屬性

通過for..in語法可以遍歷一個物件

var obj = {};
for (var i = 0; i < 10; i++) {
  obj[i] = i * 2;
}
for(var key in obj) {
  console.log(key + "==" + obj[key]);
}

洗掉物件的屬性

function fun() { 
  this.name = 'mm';
}
var obj = new fun(); 
console.log(obj.name); // mm 
delete obj.name;
console.log(obj.name); // undefined

簡單型別和復雜型別的區別

基本型別又叫做值型別,復雜型別又叫做參考型別

值型別:簡單資料型別,基本資料型別,在存盤時,變數中存盤的是值本身,因此叫做值型別,

參考型別:復雜資料型別,在存盤是,變數中存盤的僅僅是地址(參考),因此叫做參考資料型別,

  • 堆和堆疊

    堆疊空間分配區別:
      1、堆疊(作業系統):由作業系統自動分配釋放 ,存放函式的引數值,區域變數的值等,其操作方式類似于資料結構中的堆疊;
      2、堆(作業系統): 存盤復雜型別(物件),一般由程式員分配釋放, 若程式員不釋放,由垃圾回識訓制回收,分配方式倒是類似于鏈表,
    
  • 注意:JavaScript中沒有堆和堆疊的概念,此處我們用堆和堆疊來講解,目的方便理解和方便以后的學習,

基本型別和復雜型別在記憶體中的存盤

和java是一樣的, 

面向物件思想

面向物件是一個思想,跟編程語言沒有關系,

面向物件的思想實作的最經典的語言就是 java,

計算機語言都是向著人類更容易理解的方向在發展,

相對于面向程序而言:

使用面向程序的方式描述你早上刷牙這件事:

準備牙刷,牙膏,打水,漱口,刷牙,漱口,,,,,

使用面向物件的方式描述:

程序中的一些事物:人,牙刷,牙膏,杯子等等

這些事物都有哪些特征和行為:

人:

特征:性別,名字等等

行為:打水,擠牙膏,刷牙等等

牙刷:

特征:尺寸,顏色,品牌等等

行為:刷牙,,,,

杯子:

特征:大小,顏色,,,

行為:盛水,,,,

這些事物之間如何配合完成作業:

人拿杯子打水,漱口,使用牙刷刷牙,

今天刷牙的時候,發現牙刷掉毛了,,,,,,,, 換牙刷,,,,

牙膏過期了,換牙膏,,,,,

萬物皆物件

面向物件的描述一件事情:找出一件事情中的事物(物件),明確這些事物的特征和行為,明確它們之間的配置方式(介面),

描述表示

特征:看得見,摸得著的,

行為:能干啥?

物件就是任何一個具體的事物,

高內聚,低耦合

函式

概念和申明

模塊化編程,

一段程式,可以重復的使用:

<input type="button" value="click me" onclick="fun()">
<script type="text/javascript">
           // 函式定義
function fun(){
               // 重復執行
console.log(123);
}
</script>

函式的語法:

方式1:
function 函式名(引數串列){
  函式體(要執行的代碼)
}
方式2:
var 函式名 = function(引數串列){
  函式體(要執行的代碼)
}

function:固定關鍵字 必須的

引數串列:表示執行這個函式的時候,需要提前準備的資料, 可以為空

函式體:要執行的代碼,

函式名:名字,在一個作用域內,不能有同名的函式, 命名規則和規范與變數的命名規則和規范一致, 必須的

函式可以簡單的認為是做一個事的方法,方法就是一個行為,一個動作,

比如:炒 《西紅柿炒雞蛋》的程序就是一個函式,函式可以重復的被呼叫,

函式的呼叫應該在函式申明和實作之后,

呼叫函式: 函式名();

第二種方式申明函式:

var fun1 = function(){
console.log(456);
}
fun1();

函式傳參

申明函式的時候,申明引數,

案例: 申明一個函式,可以使用xxx炒雞蛋,

<script>
/**
* 申明函式
*
*/
function chaojidan(food){
console.log("-------")
console.log("把雞蛋準備好....");
console.log("炒雞蛋...");
console.log("加入"+food+",繼續炒....");
console.log("出鍋裝盤:《"+food+"炒雞蛋》");
}
chaojidan("青椒");
chaojidan("番茄");
chaojidan("鴨蛋");
</script>

上面的案例中,小括號中的food就是引數,

引數名可以隨意,但是不能太隨意,按照變數命名的規則和規范指定,

申明引數的意思是:當呼叫這個函式的時候,可以在()中傳遞引數,所謂傳遞引數就是給引數賦值,

多個引數的案例:

// 多個引數的案例
function chaocai(food1,food2,count){
console.log("-------")
for(var i = 0; i < count;i++){
console.log("第"+(i+1)+"份《"+food1+"炒"+food2+"》出鍋");
}
}
// 呼叫函式的時候傳入多個引數
chaocai("番茄","雞蛋",3);
chaocai("土豆","馬鈴薯",4);

當有多個引數的時候,就按照引數的順序傳入對應的引數,引數的型別要注意:如果是字串就要使用引號包裹,如果是數字,不需要引號,

當然我們可以把一個變數作為引數,當變數作為引數的時候,無論是什么型別,都不要使用引號,

案例:

var f1 = "西葫蘆";
var f2 = "肉片";
var c = 5;
// 把變數作為引數傳遞
chaocai(f1,f2,c);

函式的回傳值

所謂回傳值,就是這個函式執行結束之后得到的結果,

并不是每個函式都有回傳值,有的函式就是純粹的執行,沒有回傳值,

案例1:在頁面輸出幾個標簽 這個函式就沒有回傳值

<script type="text/javascript">
function showTag(){
for(var x = 0;x < 3;x++){
document.write("<h2>哈哈哈</h2>");
}
}
showTag();
</script>

案例2: 定義一個函式,計算兩個數字的和,并且回傳

<script type="text/javascript">
// 有回傳值的函式
function he(n1,n2){
var sum = n1 + n2;
// 使用return回傳一個回傳值,
return sum;
// 任何使用,return如果執行了,后面的程式將不再執行,
}
// 呼叫有回傳值的函式
var result = he(1,101);// 我們將函式執行的結果賦值給result變數
console.log(result);
</script>

在函式中使用return回傳一個變數, 或者一個資料物件等等,這時這個函式在呼叫之后就會得到回傳的結果,并且在return關鍵字后面的程式將不再執行,

程式中的面向物件

物件的創建

在程式中自己寫一個物件,

就是按照自己規則,準備一堆資料,然后將這堆資料放在記憶體的某一個空間上,

使用任何編程語言創建物件,都要按照這個編程語言的規則撰寫,

JS中創建物件的規則:

創建一個Person

[1]使用{}表示

var pserson = {name:"卡卡西",age:28,skill:function(){console.log("千年殺");}}

[2]直接創建一個Object

		// 直接創建一個Object
		var pserson1 = new Object(); // 物件已經創建好了
		// 給物件添加特征
		pserson1.name = "如花";
		pserson1.age = "18";
		// 物件的行為
		pserson1.eat = function(){
			console.log("吃飯....");
}

屬性和方法

一些概念:

上面的案例中的person和person1就是物件,

其中特征:name,age稱之為屬性

行為:skill和eat稱之為方法

物件中屬性和行為呼叫:

[1]創建物件時設定屬性和行為

上面的案例中,就是在創建物件的時候,設定了屬性和行為:

把兩個物件輸出到控制臺:

console.log(person);
console.log(person1);

[2]也可以在創建物件之后設定屬性和行為

給物件設定屬性和行為的語法:

物件名.屬性名 = 屬性值,
物件名.方法名 = function(){.....}

也可以使用這樣的語法修改原來的屬性值和行為,

呼叫物件中的屬性和行為,

所謂呼叫屬性,就是獲取屬性值:

		console.log(person.name);
		console.log(person1.age);

物件名.屬性名 如果后面有=就是賦值,如果沒有就是獲取值,

方法的呼叫是: 物件名.方法名(引數)

		person.skill();
		person1.eat();

方法的引數和回傳值與之前函式的操作一致,

物件作為引數傳遞

在js中我們可以將一個物件作為一個引數進行傳遞,

引數傳遞中的一些問題

程式1:

<script type="text/javascript">
var num = 100;
console.log(num); // ①100
function changeNum(n){
console.log(n); // ②100
n = 10000;
console.log(n); // ③10000
}
changeNum(num); // n = num
// -------------
console.log(num); // ④100
</script>

程式2:

	<script type="text/javascript">
		var person = {name:"大錘"};
		console.log(person.name);// ①大錘
		function changeName(p){
			console.log(p.name); // ②大錘
			p.name = "小錘錘";
			console.log(p.name); // ③小錘錘
		}
		changeName(person);
		console.log(person.name); // ④小錘錘
	</script>

程式2的結果和程式3的結果截然不同,是因為物件和簡單型別在記憶體中的存盤是不一樣的,

物件在堆疊中只有一個地址,堆里面值具體資料,

總結:

簡單型別的參考和數值都是存盤在堆疊記憶體中,

物件是參考存盤在堆疊中,具體的資料存盤在堆記憶體中的,堆疊中的存盤著堆中資料的地址,

所謂傳參或者說賦值:就是將堆疊中的內容進行拷貝傳遞,

具體的描述:

簡單型別,就是我把我的書復印一份給你,你隨便折騰,看壞了,也跟我沒關系,

物件型別,就是我把我書借給你,你要是看壞了,我的書就壞了,

陣列

基本概念

所謂陣列,就是一組數,

陣列的特點就是在記憶體開辟一組連續的空間,存盤一組資料,

變數,就是給記憶體的一個空間起個別名,

陣列就是把多個變數放在一起,一起起一個別名,

陣列中的每一個元素都是有索引的,索引從0開始,長度如果是3,那么索引就是0,1,2,

陣列的基本操作

[1]申明一個陣列,

申明陣列和申明變數一樣,

// 申明陣列
var names;
// 初始化 (所謂初始化,就是在記憶體中開辟空間,并且放入資料)
names = new Array(3);
// 申明的同時初始化
var ages = [18,18,16];

陣列的申明和變數一樣,但是陣列的初始化和變數的初始化略有不同,

數字的初始化方式:

① new Array(length) 在記憶體中開辟空間,創建陣列,其中引數length是陣列的最小長度,當不傳入這個length的時候,默認長度是0,陣列中的每個元素默認都是undefined,

② args = [a,b,v] 使用[]直接初始化陣列,在[]中直接寫陣列的元素,

[2]陣列的元素的操作

我們可以通過 陣列名[index] 訪問陣列中的任何一個元素,

		names = new Array(3);
		// 給陣列的元素賦值
		names[0] = "張三";
		names[1] = "大錘";
		names[2] = "如花";
		// 取出陣列元素的值
		var n1 = names[2];
		console.log(n1);
		console.log("-----------");
		console.log(names);

[3]遍歷陣列

		var scores = [98,96,98,97,99];
		// 獲取陣列的長度(元素個數)
		console.log(scores.length);
		// 將所有的成績逐個的列印到控制臺
		console.log(scores[0]);
		console.log(scores[1]);
		console.log(scores[2]);
		console.log(scores[3]);
		console.log(scores[4]);
		console.log("-----回圈遍歷------");
		// 回圈遍歷陣列
		for(var x = 0; x < scores.length;x ++){
			console.log(scores[x]);
		}

JS中陣列的一些特殊情況

[1]元素型別可以隨意

JS中的陣列的元素的型別是可以不一致的, 陣列的元素可以是任何型別,

			var infos = new Array(6);
			infos[0] = "卡卡西";//字串
			infos[1] = 28; // 數字
			infos[2] = false; // 布爾型
			infos[3] = null;// NaN // null
			infos[4] = {skill:"千年殺"};// 一個物件 
			infos[5] = [1,2,3,4,5]; // 一個陣列
			console.log(infos);

[2]JS中該陣列的長度是最小長度

當我們操作的元素的索引超過了最大索引時,陣列會自動增長,

		var skills = new Array(2);
		skills[0] = "千年殺";
		skills[1] = "千鳥";
		skills[30] = "寫輪眼";
		
		console.log(skills.length);// 31
		console.log(skills); // 其中有27個undefined

[3]JS中陣列也是一個"物件"

		var skills = new Array(2);
		skills[0] = "千年殺";
		skills[1] = "千鳥";
		// 使用"-1"作為索引
		skills[-1] = "寫輪眼";
		console.log(skills.length);// 2
		console.log(skills); 

陣列中有三個元素,但是長度是2,說明-1不作為陣列的元素索引,

一個案例:

var person = {name:"卡卡西",skill:"千年殺"}
console.log(person.name);
// 物件的屬性也可以使用[]訪問
console.log(person["skill"])

JS中的陣列就是一個物件, 我們給陣列中添加一個元素,就相當于給陣列添加一個屬性,這個屬性名字就是這個元素的索引,但是我們不能 使用 陣列名.數字 的方式訪問陣列元素,所以就使用

陣列名[index] 訪問陣列元素,

在JS中,所有的物件都是陣列,

案例:

var ns = ["白素貞","卡卡西","小丸子"];
console.log(ns[0]); // ①白素貞
function  changeArray(args){
console.log(args[0]); // ②白素貞
args[0] = "青城山下-白素貞";
console.log(args[0]);// ③青城山下-白素貞
}
changeArray(ns);
console.log(ns[0]); // ④青城山下-白素貞

本文來自博客園,作者:{瀟瀟消消氣},轉載請注明原文鏈接:{https://www.cnblogs.com/xiaoxiaodeboke/}

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/421648.html

標籤:JavaScript

上一篇:CSS技術

下一篇:DOM

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了!

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下面,我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果,首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下: 實作代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中,有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子: 1、可選鏈運算子(optional chaining operator) ?.是可選鏈運算子(optional chaining operator)。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位,它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思,中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px,即默認情況下: 1rem = 16px rem布局原理:根據CSS媒體查詢功能,更改根標簽的字體尺寸,實作rem單位隨螢屏尺寸的變化,如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標:計算屬性是如何實作的?計算屬性快取原理以及洋蔥模型的應用?在初始化Vue實體時,我們會給每個計算屬性都創建一個對應watcher,我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more