前端(三)：JavaScript基礎

来源:https://www.cnblogs.com/kuaizifeng/archive/2018/07/11/9293408.html
-Advertisement-
Play Games

一、變數、數據類型與運算符 1.變數 聲明變數： 2.數據類型 隱式轉換 強制轉換 3.運算符 1.算術運算符 2.賦值運算符和比較運算符 3.邏輯運算符 4.三元運算符 5.運算符優先順序 二、流程式控制制 1.條件語句 var readline = require("readline"); var r ...


JavaScript是一種屬於網路的腳本語言，常用來為網頁添加各式各樣的動態功能，是一種動態類型、弱類型、基於原型的語言。
它包括三個部分：ECMAScript、BOM和DOM。ECMAScript描述了該語言的語法和基本對象。BOM，瀏覽器對象模型，描述了與瀏覽器進行交互的方法和介面。DOM，文檔對象模型，描述了處理網頁內容的方法和介面。
js的使用：js代碼寫在script標簽中，其引入方式和css樣式的style標簽一致。

一、變數、數據類型與運算符

　　1.變數

　　聲明變數：

- 通過var關鍵字聲明一個或多個變數。
　　- 聲明變數的同時可以給其賦值(直接量，字面量)，也可以不賦值，不賦值時預設值為undefined。
　　- 變數命名遵循一般的命名規範：區分大小寫，不能包含特殊字元，大小駝峰命名或下劃線命名，不能以數字開頭，命名含義明確等。
　　- 變數在記憶體中會自動存儲於釋放。

　　2.數據類型

js中的數據類型包括：字元串（String）、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空（Null）、未定義（Undefined）。

　　隱式轉換

// 轉換為布爾類型
var a;  // undefined.
var test = function(vec){
    if(vec){
        console.log("true");
    }else{
        console.log("false");
    }
};
a = null;
a = 0;   // 0值
a = NaN; // NaN值
a = '';  // 空字元串
test(a);  
// 轉換成數值型數據
var a;// undefined -> NaN
var b = 1;
a = null; // null -> 0
a = false; // false -> 0
a = "123"; // "12" -> 12
a = "123abc"; // "123abc" -> NaN
console.log(typeof a);
console.log(b + a);

　　強制轉換

// parseInt(string)：將字元串類型轉換成數值；
// parseFloat(string)：將字元串類型轉換成浮點型數值；
var a = "123";
console.log(typeof parseInt(a));
console.log(typeof parseFloat(a));
// String()和toString()：將其它類型轉換成字元串
var a = 123;
console.log(typeof String(a));
console.log(typeof a.toString());
// Boolean：將其它數據類型轉換成布爾值。；
var a = undefined;
console.log(Boolean(a), typeof Boolean(a));

　　3.運算符

　　1.算術運算符

+、-、*、/、%、++、--
++、--分為首碼形式和尾碼形式。首碼先自加(減)再執行運算，尾碼先執行運算再自加(減)。

　　2.賦值運算符和比較運算符

=、+=、-=、*=、/=、%=、.=
>、>=、<、<=、==、!=、===、!==

　　3.邏輯運算符

&&、||、!

　　4.三元運算符

// exp1?exp2:exp3
var a = 1231; // var a;
typeof a==="number"?console.log("true"):console.log("false");

　　5.運算符優先順序

運算符 描述
. [] () 欄位訪問、數組下標、函數調用以及表達式分組
++ -- - ~ ! delete new typeof void 一元運算符、返回數據類型、對象創建、未定義值
* / % 乘法、除法、取模
+ - + 加法、減法、字元串連接
<< >> >>> 移位
< <= > >= instanceof 小於、小於等於、大於、大於等於、instanceof
== != === !== 等於、不等於、嚴格相等、非嚴格相等
& 按位與
^ 按位異或
| 按位或
&& 邏輯與
|| 邏輯或
?: 條件
= oP= 賦值、運算賦值
, 多重求值

二、流程式控制制

　　1.條件語句

// if(exp){執行代碼段};
var a = 123; // var a;
if(typeof a === "number"){
    console.log("true");
}
// if(exp){exp為true的代碼段}else{exp為false的代碼段};
var a = 123; // var a;
if(typeof a === "number"){
    console.log("true");
}else {
    console.log("false");
}
// if ... else if ...
var readline = require("readline");
var rl = readline.createInterface({
    input: process.stdin,
    out: process.stdout,
});
rl.question("請輸入成績: ", (number) => {
    if(number > 100){
        console.log("輸入的成績不能大於100！");
    }else if(number > 80){
        console.log("錄入成功，A檔");
    }else if(number > 60){
        console.log("錄入成功，B檔");
    }else if(number > 0){
        console.log("錄入成功，C檔");
    }else{
        console.log("輸入的成績不能小於0！")
    }
    rl.close();
});
rl.on("close", function () {
    console.log("退出程式！");
    process.exit();
});
var readline = require("readline");
var rl = readline.createInterface({
    input: process.stdin,
    out: process.stdout,
});
rl.question("請輸入星期幾: ", (day) => {
    switch(day){
        case "1":
            console.log("今天吃炒麵");
            break;
        case "2":
            console.log("今天吃魚香肉絲");
            break;
        case "3":
            console.log("今天吃麻辣香鍋蓋飯");
            break;
        case "4":
            console.log("今天吃豆丁胡蘿蔔");
            break;
        case "5":
            console.log("今天公司聚餐");
            break;
        case "6":
            console.log("今天吃泡麵");
            break;
        case "7":
            console.log("今天擼串");
            break;
        default:
            console.log("input error.")
    }

    rl.close();
});
rl.on("close", function () {
    process.exit();
}
// switch ... case ...
var readline = require("readline");
var rl = readline.createInterface({
    input: process.stdin,
    out: process.stdout,
});
rl.question("請輸入星期幾: ", (day) => {
    switch(day){
        case "1":
            console.log("今天吃炒麵");
            break;
        case "2":
            console.log("今天吃魚香肉絲");
            break;
        case "3":
            console.log("今天吃麻辣香鍋蓋飯");
            break;
        case "4":
            console.log("今天吃豆丁胡蘿蔔");
            break;
        case "5":
            console.log("今天公司聚餐");
            break;
        case "6":
            console.log("今天吃泡麵");
            break;
        case "7":
            console.log("今天擼串");
            break;
        default:
            console.log("input error.")
    }

    rl.close();
});
rl.on("close", function () {
    process.exit();
});

　　2.迴圈語句

　　for 迴圈

和java中的for迴圈一致：for(exp1; exp2; exp3){代碼塊;}
　　- exp1: 無條件的執行第一個表達式
　　- exp2: 是判斷是否能執行迴圈體的條件
　　- exp3: 增量操作
// 九九乘法表
var str = "";
for(var i=1;i<=9;i++){
    for(var j=1;j<=i;j++){
        str += i + "*" + j + "=" + i*j + " ";
        if(i === j){
            str += "\n";
        }
    }
}
console.log(str);

　　while 迴圈

var arr = function (number) {
    var arr_list = new Array(); // var arr_list = [];
    var i = 0;
    while (i < number){
        arr_list[i] = Math.random();
        i++;
    }
    return arr_list;
};
console.log(arr(5))
var arr = function (number) {
    var arr_list = new Array(); // var arr_list = [];
    var i = 0;
    while (i < number){
        arr_list[i] = Math.random();
        i++;
    }
    return arr_list;
};
console.log(arr(5));

　　do ... while迴圈



// 和java中的do ... while 迴圈一致，先執行依次do內的代碼塊，再執行while 判斷。不管while條件判斷是否成功，do都會至少執行一次。
var arr = function (number) {
    var arr_list = new Array(); // var arr_list = [];
    var i = 0;
    do {
        arr_list[i] = Math.random();
        i++;
    }while (i > number);
    return arr_list;
};
console.log(arr(5));



三、函數


　　1.定義


　　函數通過function關鍵字定義。function 函數名稱([參數1, ...]){代碼塊; [return 返回值]};也可以通過Function構造器定義函數。





// 通過function 關鍵字定義函數
function hello() {
    console.log("hello world.")
};
hello();



　　匿名函數，即function關鍵字定義的無函數名稱的函數。



// 通過function 關鍵字定義匿名函數
var hello = function () {
    console.log("hello world.")
};
hello();



　　將匿名函數作為參數，傳遞給另一個函數進行執行，此時其被稱為回調函數。回調函數在js中異常強大。



function calc(v1, v2, callback) {
    v1 = v1 || 1;
    v2 = v2 || 2;
    return callback(v1, v2);
}
calc(3,4, function (v1, v2) {
    return v1 + v2
});



　　


　　2.參數


　　函數如果定義了參數，在調用函數的時候沒有傳值則預設值為undefined。如果傳遞的參數超過了形參，js會忽略掉多於的參數值。



function  calc(v1, v2){
    return v1 + v2;
}
console.log(calc(5, 6, 7));



　　es5不能直接寫形參的預設值，但可以通過arguments對象來實現預設值。同時，arguments對象可以實現可變參數。



function  calc(v1, v2){
    v1 = v1 || 1;
    v2 = v2 || 2;
    return v1 + v2;
}
console.log(calc());



　　3.函數調用



function calc(v1, v2, callback) {
    v1 = v1 || 1;
    v2 = v2 || 2;
    return callback(v1, v2);
}
value1 = calc(3,4, function (v1, v2) {
    return v1 + v2
});

value2 = calc.call(calc, 3, 4, function (v1, v2) {
    return v1 + v2;
});

value3 = calc.apply(calc, [3, 4, function (v1, v2) {
    return v1 + v2;
}]);

value4 = (function (v1, v2) {
    return v1 + v2;
})(3, 4);
console.group("函數調用的方式");
console.log("- 直接調用: " + value1);
console.log("- 間接call調用: " + value2);
console.log("- 間接apply調用: " + value3);
console.log("- 自調用: " + value4);



四、對象


　　js中對象分為：內建對象、宿主對象和自定義對象。


　　1.對象創建


　　直接通過var關鍵字定義Object對象。



var obj1 = new Object();
var obj2 = {};




// 使用字面量來創建一個對象: var obj = {} 和new本質上是一模一樣的
// 使用字面量創建對象時，可以在創建對象時直接指定對象中的屬性
// 字面量裡面的屬性可以加引號，也可以不加引號，建議不加
// 如果使用特殊字元或名字則必須加引號
var obj = {
  name: "孫悟空",
  gender: "男猴",
  age: 1500,
  credit: {
    name1: "孫行者",
    name2: "齊天大聖"
  }
};
console.log(obj);



　　也可以通過工廠方法創建對象。



function Person(name, age) {
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.sayHello = function () {
        console.log(obj.name + ", " + obj.age + "years old.");
    };
    return obj;
}
sun = Person("孫悟空", 2000);
sun.sayHello();



　　2.對象屬性操作和方法創建





var obj = new Object(); // new 構造對象, 可使用typeof obj 查看對象
// 在對象中保存的值稱為屬性
// 向對象中添加屬性:對象.屬性名 = 屬性值
obj.name = "孫悟空";
obj.gender = "男猴";
obj.age = 18;
console.log(obj);
// 讀取對象中的屬性: 對象.屬性名
// 如果讀取的對象中沒有該屬性，會返回undefined
console.log(obj.name);
// 修改對象的屬性值: 對象.屬性名 = 新值
obj.age = 24;
console.log(obj);
// 刪除對象屬性
delete obj.age;
console.log(obj);
// 自定義
obj.fuc = function add(x, y) {
    return x+y;
};
console.log(obj);





　　3.作用域



在js中一共有兩種作用域，全局作用域和函數作用域
    全局作用域:
       - 直接編寫在script標簽內的JS代碼
       - 在頁面打開時創建，在頁面關閉時銷毀
       - 在全局作用域中有一個全局對象window，可以直接使用.它代表的是一個瀏覽器的視窗，它由瀏覽器創建
       - 在全局作用域中創建的變數都會作為window對象的屬性保存
       - 在全局作用域中創建的函數都會作為window對象的方法保存
       - 全局作用中的變數和函數在頁面的任意位置都可以被訪問/執行
　　函數作用域：
　     - 調用函數時創建函數作用域，函數執行完畢之後，函數作用域銷毀
　     - 每調用一次函數就會創建一個新的函數作用域，它們之間是相互獨立的
   　　- 全局作用域中訪問不到函數作用域，函數作用域中可以訪問全局作用域
　　   - 函數作用域會優先查找本作用域中的變數，如果沒有就找上一級中的變數
   　　- 函數作用域的a並不影響上一級作用域中的a
      - 如果不使用var聲明，直接寫a = 20，就是在操作全局作用域中的a變數
      - 如果使用全局作用域中的a變數[在本作用域中已聲明a變數]，可以用window.a，這在b1中已強調過



　　全局作用域



console.log(window); // window是個對象

// 使用var關鍵字聲明的變數，會在所有的代碼執行之前執行;如果聲明變數時不使用var，則變數不會被提前聲明
console.log(a); // 	   




	
	
您的分享是我們最大的動力!




			 	
	
	

    


-Advertisement-
Play Games
     


	


    

    

    




	       	  

              
更多相關文章  

              

                   
              

          



		
        

        
        

            
 







    
一周排行

    

         
    

 
    -Advertisement-
    Play Games
    	   
	
  • 
			        	
    
			    	        
    
				    	        移動開發（一）：使用.NET MAUI開發第一個安卓APP
			            	
    
				        	
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        wpf ToggleButton選中效果和一個登錄界面
			            	
    
				        	
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        彈幕樹洞項目功能新增篇
			            	
    
				        	
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        第27篇 sqlserver2022詳細安裝步驟
			            	
    
				        	
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        .NET 開源高性能 MQTT 類庫
			            	
    
				        	
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
			            	
    
				        	
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
			            	
    
				        	
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
			            	
    
				        	
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
			            	
    
				        	
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
    
			         	
    
		            
  • 
			        	
    
			    	        
    
				    	        第28篇 如何.net中實現高效可靠數據同步api
			            	
    
				        	
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
    
			         	
    
		            
    • 										 





		        	
                 	
                 			        

    





    
所有分類